Google登录弹窗自动关闭及idpiframe初始化失败等报错求助

报错翻译 #

• 报错1：未捕获的类型错误：无法为null设置属性（设置'innerHTML'）
• 报错2：未捕获错误：idpiframe初始化失败，详情：你创建的新客户端应用使用的用户认证/授权库即将被弃用。新客户端必须改用新库；现有客户端也必须在旧库弃用前完成迁移。

问题原因及修复步骤 #

1. "Cannot set properties of null" 错误原因 #

你的代码中，gapi.signin2.render 方法指定渲染到 id为my-signin2 的元素，但页面里只有一个class为g-signin2的div，找不到目标元素导致报错。

修复：
将页面中的div标签修改为带id的形式：

<div id="my-signin2"></div>

同时移除原有的data-ux_mode="redirect"属性，因为render方法的配置会覆盖这个属性。

2. "idpiframe_initialization_failed" 错误原因 #

你使用的gapi.signin2属于旧版Google登录库，新创建的Client ID已经不再支持该库，必须迁移到Google Identity Services（GIS）新库。

迁移后的完整代码示例：

<html>
<head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
    <div id="g_id_signin"></div>

    <script>
        function handleCredentialResponse(response) {
            // 解析JWT获取用户信息
            const payload = JSON.parse(atob(response.credential.split('.')[1]));
            console.log('Email:', payload.email);
            console.log('Full Name:', payload.name);
            console.log('Given Name:', payload.given_name);
            console.log('Family Name:', payload.family_name);
            console.log('Image URL:', payload.picture);
            
            // 这里添加你的邮箱验证逻辑
            const allowedEmails = ['xxx@example.com', 'yyy@example.com']; // 替换为你的指定邮箱列表
            if (allowedEmails.includes(payload.email)) {
                // 邮箱符合，允许进入网站
                console.log('邮箱验证通过，允许访问');
                // 这里可以添加跳转或页面逻辑
            } else {
                console.log('邮箱不在允许列表中');
            }
        }

        window.onload = function () {
            google.accounts.id.initialize({
                client_id: '201822045397-b8k83v6ang79rlfo8009vpr1nnse7bsl.apps.googleusercontent.com',
                callback: handleCredentialResponse
            });
            google.accounts.id.renderButton(
                document.getElementById('g_id_signin'),
                { theme: 'dark', size: 'large', text: 'signin_with', width: 240 } // 自定义按钮样式
            );
        }
    </script>
</body>
</html>

额外说明 #

• 新的GIS库不需要在meta标签中配置client_id，而是在初始化时传入。
• 通过解析JWT凭证可以直接获取用户邮箱等信息，无需额外调用API。
• 确保你的Client ID在Google Cloud控制台中已正确配置授权域名（本地测试可添加http://localhost:端口号）。

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