如何在Flutter中加载谷歌OAuth链接以展示账号选择对话框？

你这种场景不用google_sign_in包，因为后端已经帮你处理了OAuth的客户端配置，直接用WebView加载授权链接就能完成流程，步骤如下：

• 添加WebView依赖
  在pubspec.yaml里添加webview_flutter包：

  dependencies:
    flutter:
      sdk: flutter
    webview_flutter: ^4.4.0 # 使用最新稳定版本
  

• 实现WebView页面加载授权链接
  创建一个页面，用WebViewWidget加载后端返回的谷歌授权链接，同时拦截回调URL获取授权码：

  import 'package:flutter/material.dart';
  import 'package:webview_flutter/webview_flutter.dart';
  
  class GoogleAuthWebView extends StatefulWidget {
    final String authUrl;
    const GoogleAuthWebView({super.key, required this.authUrl});
  
    @override
    State<GoogleAuthWebView> createState() => _GoogleAuthWebViewState();
  }
  
  class _GoogleAuthWebViewState extends State<GoogleAuthWebView> {
    late final WebViewController controller;
  
    @override
    void initState() {
      super.initState();
      controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(Uri.parse(widget.authUrl))
        ..setNavigationDelegate(
          NavigationDelegate(
            onNavigationRequest: (NavigationRequest request) {
              // 拦截后端指定的回调URL（示例中的回调地址）
              if (request.url.startsWith('https://api-v1-dare.cloud.atadp.ir/api/auth/login/google/callback')) {
                // 从URL中提取授权码code参数
                final uri = Uri.parse(request.url);
                final authCode = uri.queryParameters['code'];
                if (authCode != null) {
                  // 把authCode传给后端完成登录/注册逻辑
                  _submitAuthCode(authCode);
                  // 关闭WebView页面
                  Navigator.pop(context);
                }
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
          ),
        );
    }
  
    void _submitAuthCode(String code) {
      // 这里调用后端API，将code传入以完成登录/注册
      // 示例逻辑：
      // await http.post(
      //   Uri.parse('你的后端登录接口地址'),
      //   body: {'code': code},
      // );
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('选择谷歌账号登录')),
        body: WebViewWidget(controller: controller),
      );
    }
  }
  

• 调用WebView页面
  当你从后端拿到授权链接后，直接跳转到这个WebView页面即可：

  // 假设已通过后端API获取到授权链接authUrl
  final String authUrl = '后端返回的谷歌授权链接';
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => GoogleAuthWebView(authUrl: authUrl),
    ),
  );
  

• 平台配置注意事项

  • Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS：在ios/Runner/Info.plist中确保允许网络请求（如果回调是HTTPS则无需额外配置，HTTP需添加ATS例外）：

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    

整个流程逻辑：WebView加载授权链接→用户选择谷歌账号→页面跳转到后端回调URL→拦截URL提取授权码→将授权码传给后端完成登录。

内容的提问来源于stack exchange，提问作者Marlen Schreiner