Google登录成功后如何获取用户信息？遇pop_up_closed_by_user错误求助

常见问题及解决步骤 #

1. 谷歌开发者控制台配置错误 #

这是最常见的触发原因：

• 未将自有域名添加到已获授权的 JavaScript 来源：登录谷歌开发者控制台，进入对应项目的「凭据」页面，找到你的Web应用客户端ID，编辑并添加当前网站的完整域名（如https://yourdomain.com，本地测试需添加http://localhost:端口号）。
• 未配置已获授权的重定向 URI：同样在客户端ID编辑页面，添加与域名匹配的重定向地址（自定义按钮场景下可直接填写域名根地址）。
• 客户端ID类型错误：确保创建的是「Web应用」类型的客户端ID，而非Android/iOS等其他类型。

2. 代码初始化时机错误 #

auth2对象未完全初始化就调用attachClickHandler会导致弹窗异常终止：
必须在gapi.auth2.init完成后再绑定点击事件，示例代码如下：

gapi.load('auth2', function() {
  // 初始化auth2实例
  auth2 = gapi.auth2.init({
    client_id: '你的Web应用客户端ID',
    scope: 'profile email' // 按需申请用户权限
  });

  // 等待auth2初始化完成后再绑定点击事件
  auth2.then(function() {
    var loginBtn = document.getElementById('你的按钮ID');
    attachSignin(loginBtn);
  });
});

3. attachClickHandler配置缺失 #

第二个参数的空对象{}可能缺少必要配置，可补充客户端ID和权限范围：

function attachSignin(element) {
    console.log(element.id);
    auth2.attachClickHandler(element, {
        client_id: '你的Web应用客户端ID',
        scope: 'profile email'
    },
    function(googleUser) {
        document.getElementById('name').innerText = "Signed in: " +
              googleUser.getBasicProfile().getName();
    },
    function(error) {
        alert('success but:'+JSON.stringify(error, undefined, 2));
    });
}

4. 浏览器或环境限制 #

• 浏览器弹窗被阻止：检查浏览器是否允许当前网站的弹窗，临时允许后重试。
• 使用file://协议测试：谷歌登录不支持本地文件协议，需用http/https协议启动本地服务（如用Python的python -m http.server或Node的http-server）。

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