JavaScript实现新版Google登录遇问题：按钮无响应、不知如何用回调

一、修复按钮无响应问题 #

你的代码里startApp函数依赖window.onload触发初始化，但initGoogle是在open_signin中调用的，此时window.onload事件大概率已经触发过了，导致初始化代码从未执行，所以点击按钮没反应。

修改方案：去掉window.onload包裹，直接在startApp里执行初始化逻辑：

var startApp = function() {
    // 移除window.onload，直接执行初始化
    google.accounts.id.initialize({
      client_id: googleSignInClientId,
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
    google.accounts.id.renderButton(document.getElementById("button_google_login"), {
        theme: 'outline',
        size: 'large',
        click_listener: onClickHandler
    });
};

额外注意事项：

• 页面必须正确引入Google登录的官方脚本（通常是<script src="https://accounts.google.com/gsi/client" async defer></script>）
• 确认googleSignInClientId是有效的客户端ID，无拼写错误

二、正确使用handleCredentialResponse回调函数 #

这个回调会在用户成功完成Google登录后触发，接收包含用户凭证的response参数，你可以解析其中的ID Token获取用户信息：

function handleCredentialResponse(response) {
    // 打印完整响应，用于调试
    console.log("Google登录响应：", response);
    
    // 解析ID Token（JWT格式），提取用户信息
    const payload = JSON.parse(atob(response.credential.split('.')[1]));
    
    // 获取常用用户字段
    console.log("用户唯一ID：", payload.sub);
    console.log("用户名：", payload.name);
    console.log("用户邮箱：", payload.email);
    console.log("用户头像地址：", payload.picture);
    
    // 这里可将凭证发送到后端完成验证，或执行前端登录逻辑
    // 示例：
    // fetch('/your-backend-google-login-api', {
    //     method: 'POST',
    //     headers: { 'Content-Type': 'application/json' },
    //     body: JSON.stringify({ credential: response.credential })
    // })
}

补充说明：

• response.credential是Google返回的ID Token，属于JWT字符串，由头部.负载.签名三部分组成
• 用atob解码中间的负载部分，即可得到用户的明文基本信息
• 必须在后端对ID Token进行合法性验证，不要直接信任前端解析的信息

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