Flutter InAppWebView中Google Sign-In对话框无法打开的解决问询

针对控制台输出的TypeError: undefined is not an object (evaluating 'google.accounts.id')错误，以及Google Sign-In弹窗无法弹出的问题，可按以下步骤排查解决：

1. 确认Google Sign-In脚本正确加载 #

检查目标网站是否在页面中正确引入Google Identity Services官方脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

若网站动态加载该脚本，需确保InAppWebView未拦截第三方脚本请求。

2. 配置InAppWebView核心参数 #

在InAppWebView的初始化设置中，开启必要的JavaScript、窗口及Cookie权限：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的目标网站地址")),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    javaScriptCanOpenWindowsAutomatically: true, // 允许脚本触发窗口弹出
    thirdPartyCookiesEnabled: true, // Google登录依赖第三方Cookie
    cacheEnabled: true,
    domStorageEnabled: true,
  ),
  // Android端额外配置
  androidInAppWebViewOptions: AndroidInAppWebViewOptions(
    supportMultipleWindows: true, // 支持多窗口承载登录弹窗
    allowContentAccess: true,
  ),
  // iOS端额外配置
  iosInAppWebViewOptions: IOSInAppWebViewOptions(
    javaScriptCanOpenWindowsAutomatically: true,
  ),
)

3. 处理登录弹窗的窗口创建事件 #

Google Sign-In会通过新窗口触发登录流程，需在onCreateWindow回调中处理新窗口的加载：

onCreateWindow: (controller, createWindowRequest) async {
  // 根据UI需求，返回内嵌InAppWebView或打开新页面承载登录弹窗
  return InAppWebViewWidget(
    key: UniqueKey(),
    initialUrlRequest: URLRequest(url: createWindowRequest.request.url),
    settings: InAppWebViewSettings(
      javaScriptEnabled: true,
      thirdPartyCookiesEnabled: true,
    ),
  );
},

4. 调整User-Agent（可选） #

部分网站会根据User-Agent限制Google Sign-In功能，可尝试设置主流浏览器的UA：

initialSettings: InAppWebViewSettings(
  userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1",
)

5. 验证权限配置 #

• Android端：确保AndroidManifest.xml中已添加INTERNET权限；若网站使用HTTP协议，需添加android:usesCleartextTraffic="true"。
• iOS端：在Info.plist中确认已开启NSAppTransportSecurity相关配置，允许HTTPS访问。

内容的提问来源于stack exchange，提问作者Shivam Umaraniya