如何解决网站Google账号登录时popup_closed_by_user错误？

问题描述 #

在网站上通过Google账号登录时，触发错误：

popup_closed_by_user

相关代码如下：

// Render Google Sign-in button
function renderButton() {
  gapi.signin2.render('gSignIn', {
    'scope': 'profile email',
    'plugin_name':'abcd01233',
    'width': 240,
    'height': 50,
    'longtitle': true,
    'theme': 'dark',
    'onsuccess': onSuccess,
    'onfailure': onFailure
  });
}

// Sign-in success callback
function onSuccess(googleUser) {
    // Get the Google profile data (basic)
    //var profile = googleUser.getBasicProfile();

    // Retrieve the Google account data
    gapi.client.load('oauth2', 'v2', function() {
        var request = gapi.client.oauth2.userinfo.get({
            'userId': 'me'
        });
        request.execute(function(resp) {
            // Display the user details
            var profileHTML = '<h3>Welcome ' + resp.given_name +
                '! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></h3>';
            profileHTML += '<img src="' + resp.picture + '"/><p><b>Google ID: </b>' + resp.id +
                '</p><p><b>Name: </b>' + resp.name + '</p><p><b>Email: </b>' + resp.email +
                '</p><p><b>Gender: </b>' + resp.gender + '</p><p><b>Locale: </b>' + resp.locale +
                '</p><p><b>Google Profile:</b> <a target="_blank" href="' + resp.link +
                '">click to view profile</a></p>';
            document.getElementsByClassName("userContent")[0].innerHTML = profileHTML;

            document.getElementById("gSignIn").style.display = "none";
            document.getElementsByClassName("userContent")[0].style.display = "block";

            // Save user data
            saveUserData(resp);
        });
    });
}


// Sign-in failure callback
function onFailure(error) {
    console.log(error);
    alert(error);
}

// Sign out the user
function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function() {
        document.getElementsByClassName("userContent")[0].innerHTML = '';
        document.getElementsByClassName("userContent")[0].style.display = "none";
        document.getElementById("gSignIn").style.display = "block";
    });

    auth2.disconnect();
}
// Save user data to the database
function saveUserData(userData) {
    $.post("saveData.php", {
        oauth_provider: 'google',
        userData: JSON.stringify(userData)
    });
}

解决方案 #

popup_closed_by_user错误通常由弹窗拦截、用户主动关闭或OAuth配置异常导致，按以下步骤排查修复：

1. 检查浏览器弹窗拦截 #

• 确认当前网站未被浏览器标记为弹窗拦截对象，临时允许网站弹窗后重试。
• 使用隐私/无痕窗口测试，排除浏览器插件或缓存干扰。

2. 验证Google OAuth配置 #

• 登录Google Cloud Console，找到对应项目的OAuth 2.0客户端ID。
• 确保已授权的JavaScript来源添加了你的网站完整域名（包含http/https前缀，如https://your-domain.com）。
• 确认已授权的重定向URI配置正确：后端验证场景需填写后端处理地址，纯前端场景需匹配当前页面URL。

3. 优化登录触发逻辑 #

• 确保登录按钮的点击事件由用户主动交互触发，禁止通过页面加载自动脚本调用登录（这类操作会被浏览器拦截）。
• 确保renderButton在页面完全加载后执行，可放在window.onload事件中：

window.onload = function() {
  gapi.load('signin2', function() {
    renderButton();
  });
};

4. 改用跳转式登录（可选） #

若弹窗拦截问题持续，可切换为Google的redirect模式登录，避免弹窗拦截：

gapi.signin2.render('gSignIn', {
  'scope': 'profile email',
  'plugin_name':'abcd01233',
  'width': 240,
  'height': 50,
  'longtitle': true,
  'theme': 'dark',
  'onsuccess': onSuccess,
  'onfailure': onFailure,
  'ux_mode': 'redirect' // 添加此参数启用跳转模式
});

5. 优化错误提示 #

在onFailure中区分错误类型，给用户更清晰的提示：

function onFailure(error) {
    if (error.error === 'popup_closed_by_user') {
        console.log('登录弹窗已关闭');
        // 可提示用户重新点击登录按钮
    } else {
        console.log('登录失败:', error);
        alert('登录失败，请稍后重试');
    }
}

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