网站集成Google登录按钮触发TypeError错误，已配置域名白名单求排查

我之前也碰到过一模一样的问题，结合你的代码和错误栈来看，大概率是下面几个常见原因导致的，咱们一步步排查：

你的两种实现方案 #

1. JavaScript手动初始化方式 #

<script>
gapi.load('auth2', function() {
  auth2 = gapi.auth2.init({
    client_id: 'MY_CLIENT_ID.apps.googleusercontent.com',
    fetch_basic_profile: false,
    scope: "email" //I do only need the email for the moment
  });
  auth2.signIn().then(function() {
    console.log(auth2.currentUser.get().getId());
  });
});
</script>

2. Google平台组件方式 #

<meta name="google-signin-scope" content="email">
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function google(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log("ID: " + profile.getId());
  console.log('Full Name: ' + profile.getName());
  console.log('Given Name: ' + profile.getGivenName());
  console.log('Family Name: ' + profile.getFamilyName());
  console.log("Image URL: " + profile.getImageUrl());
  console.log("Email: " + profile.getEmail());
  var id_token = googleUser.getAuthResponse().id_token;
  console.log("ID Token: " + id_token);
}
function fail(error) {
  console.log(error);
}
</script>
<div class="g-signin2" data-onsuccess="google" data-onfailure="fail" data-theme="dark" data-longtitle="true"></div>

触发的错误信息 #

TypeError: this.u3.open is not a function
at fv.open (cb=gapi.loaded_0:250)
at gw (cb=gapi.loaded_0:298)
at Dx (cb=gapi.loaded_0:341)
at $w (cb=gapi.loaded_0:337)
at xx. (cb=gapi.loaded_0:338)
at new _.rk (cb=gapi.loaded_0:188)
at xx.Ej (cb=gapi.loaded_0:338)
at bx.a. [as signIn] (cb=gapi.loaded_0:321)
at login:269
at platform.js:28

问题排查与解决方案 #

你已经把域名加入白名单了，那我们从其他常见原因入手：

1. 浏览器弹窗拦截器阻止了登录弹窗 #

Google登录需要打开一个新弹窗（或跳转页）完成授权流程，如果浏览器的弹窗拦截器自动阻止了这个弹窗，就会触发this.u3.open is not a function错误——因为gapi无法调用window.open方法。

解决方法：

• 临时允许当前网站的弹窗权限（在浏览器地址栏的弹窗拦截提示里选择允许）
• 测试时使用浏览器正常模式（不要用隐身模式，部分隐身模式会有更严格的弹窗限制）

2. 客户端ID的类型不正确 #

如果你的客户端ID是移动端/桌面应用类型，而非Web应用类型，哪怕域名加了白名单，也会出现授权流程异常的问题。

解决方法：

• 登录Google Cloud控制台，找到你的OAuth 2.0客户端ID，确认类型是「Web应用」
• 如果类型不对，重新创建一个Web应用类型的客户端ID，替换代码中的MY_CLIENT_ID

3. 脚本加载时机或页面环境冲突 #

• 对于手动初始化方式：gapi.load的代码如果放在页面顶部，可能DOM还没加载完成，或者页面中其他脚本修改了window.open方法，导致gapi调用失败。可以把脚本放在</body>标签前，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  gapi.load('auth2', function() {
    // 初始化代码
  });
});

• 对于组件方式：确保<meta>标签在<script src="https://apis.google.com/js/platform.js">之前加载，避免platform.js读取不到配置参数。
• 排查页面中其他第三方脚本：暂时移除其他非必要的脚本（比如广告脚本、分析脚本），测试是否还会出现错误，逐步定位冲突的脚本。

4. 页面在iframe中运行 #

如果你的页面是嵌入在iframe里的，很多浏览器会限制iframe中的弹窗操作，导致gapi无法打开登录窗口。

解决方法：

• 把登录页面放在独立的顶级窗口中测试
• 如果必须在iframe中，需要确保父窗口和iframe的域名一致，并且在iframe中添加allow-popups属性：

<iframe src="你的登录页面" allow-popups></iframe>

你可以先从弹窗拦截和客户端ID类型这两个最常见的原因开始排查，应该能快速解决问题。

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