自定义Google登录按钮无法触发认证问题排查

你遇到的问题是使用Google Identity Services SDK实现自定义登录按钮时，点击按钮无响应，以下是问题分析和解决方案：

问题根源 #

1. 重复初始化配置：你在每次点击按钮时都调用google.accounts.id.initialize()，这会反复重置登录配置，导致后续的登录流程无法正常触发。初始化操作只需在页面加载时执行一次。
2. 错误调用方法：prompt()是用于触发页面加载时的自动登录提示（如右上角的账号选择弹窗），并非响应自定义按钮点击的正确方法，应该使用google.accounts.id.signIn()来主动触发登录流程。

修改后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Google Sign-In</title>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function handleCredentialResponse(response) {
            console.log("Encoded JWT ID token: " + response.credential);
            // 在这里解码并使用JWT令牌
        }

        window.onload = function () {
            // 仅初始化一次登录配置
            google.accounts.id.initialize({
                client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
                callback: handleCredentialResponse
            });

            // 为自定义按钮绑定点击事件
            document.getElementById('loginButton').addEventListener('click', function() {
                // 触发Google登录流程
                google.accounts.id.signIn();
            });
        };
    </script>
</head>
<body>
    <button id="loginButton">Login with Google</button>
</body>
</html>

额外注意事项 #

• 务必将代码中的YOUR_CLIENT_ID.apps.googleusercontent.com替换为你在Google Cloud Console中生成的真实客户端ID。
• 确认你的域名已添加到Google Cloud Console的OAuth授权域名列表中，否则会因跨域限制导致登录失败。
• 查看浏览器控制台的报错信息，排查是否存在客户端ID无效、脚本加载失败等问题。

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