Google Sign-in JavaScript重定向模式无法获取用户对象求助

嘿，我来帮你搞定这个问题～ 你遇到的核心问题其实是重定向模式和弹窗模式的工作逻辑完全不同：弹窗模式下，你的页面始终存在，所以点击回调能拿到用户对象；但重定向模式下，点击登录按钮后页面会直接跳转到Google的登录页，原页面的JS环境直接销毁了，原来的attachClickHandler成功回调自然不会执行。登录完成后，Google会把用户重定向回你指定的页面，这时候你需要在重定向后的页面重新获取用户信息。

下面是具体的修正步骤和代码示例：

1. 正确配置初始化参数 #

首先，开启ux_mode: 'redirect'的同时，必须指定redirect_uri（这个是你可能漏掉的关键！），这个URI要和你在Google Cloud控制台中配置的「已授权的重定向URI」完全一致，否则登录后会报错。

2. 在重定向页面检查用户状态 #

登录完成后，用户会被跳转到redirect_uri指定的页面（可以是同一个登录页），这时候你需要在这个页面初始化auth2后，主动检查当前用户的登录状态，而不是依赖原来的点击回调。

修改后的完整代码 #

var auth2;
gapi.load('auth2', function () {
    // 初始化auth2，必须包含ux_mode和redirect_uri
    auth2 = gapi.auth2.init({
        client_id: 'my_client_id',
        cookiepolicy: 'single_host_origin',
        ux_mode: 'redirect',
        redirect_uri: 'https://your-domain.com/your-callback-page' // 替换成你的回调页面URL
    });

    // 绑定登录按钮的点击事件（重定向模式下，成功回调不会触发）
    auth2.attachClickHandler(
        document.getElementById('loginG'),
        {},
        function() { /* 此回调在重定向模式下不会执行，可留空 */ },
        function(error) {
            console.error('登录触发失败:', error);
        }
    );

    // 页面加载时，检查用户是否已登录（关键！）
    checkAuthenticatedUser();
});

function checkAuthenticatedUser() {
    const currentUser = auth2.currentUser.get();
    
    if (currentUser.isSignedIn()) {
        // 用户已登录，获取个人信息
        const profile = currentUser.getBasicProfile();
        const usermail = profile.getEmail();
        const username = profile.getName();
        const userimage = profile.getImageUrl();
        
        console.log('登录用户信息:', { usermail, username, userimage });
        // 这里可以添加你的业务逻辑，比如把用户信息发送到后端等
    } else {
        // 用户未登录，正常显示登录按钮即可
        console.log('用户未登录，请点击按钮登录');
    }
}

关键注意事项 #

• Google控制台配置：一定要确保你的OAuth 2.0客户端ID的「已授权的重定向URI」列表中，包含你设置的redirect_uri，否则登录后会出现“重定向URI不匹配”的错误。
• 回调页面的一致性：如果你的应用是单页应用，redirect_uri可以设置为当前页面的路由，只要确保页面加载时会执行上述的初始化和检查逻辑即可。
• 状态监听（可选）：如果需要实时监听登录状态变化，可以添加auth2.isSignedIn.listen(function(isSignedIn) { /* 处理状态变化 */ })，这样用户后续登出/登录时都能触发相应逻辑。

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