Google登录成功却无法获取用户数据，遇Cross-Origin-Opener-Policy错误

核心问题分析 #

你遇到的问题根源在于：

1. 同时混用了Google登录的新Identity Services (GSI) 和旧Platform Library脚本，两者产生冲突导致回调无法正常触发；
2. 仅通过meta标签配置Cross-Origin-Opener-Policy（COOP）不完整，缺少配套的Cross-Origin-Embedder-Policy（COEP），导致跨源弹窗的postMessage通信被浏览器阻断；
3. 代码结构不符合GSI规范，配置块位置错误，登出函数使用了旧版API，与新GSI不兼容。

分步解决方案 #

1. 移除冲突的旧SDK #

删除旧版Google Platform Library脚本，新GSI完全不需要依赖它：

<!-- 移除这行代码 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

2. 完善跨源策略配置 #

在<head>中同时添加COOP和COEP的meta标签（若服务器有响应头配置，需确保服务器设置与meta标签一致，服务器响应头优先级更高）：

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

3. 调整代码结构与回调函数 #

• 将g_id_onload配置块移到<body>顶部，确保GSI脚本加载前完成初始化；
• 提前定义回调函数，避免GSI加载时找不到函数；
• 适配新GSI的回调参数格式，通过解析JWT令牌获取用户信息。

4. 修正登出函数 #

使用新GSI的API实现登出，替换旧版gapi.auth2方法：

function signOut() {
    google.accounts.id.disableAutoSelect();
    localStorage.removeItem('g_csrf_token');
    alert("已成功登出");
}

5. 检查Google Console配置 #

确认JavaScript源和重定向源包含当前开发域名（如本地开发的http://localhost:3000，需包含完整协议、域名和端口）。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <title>Login</title>
    <style>
        label {
            display: block;
            margin-top: 1rem;
        }
    </style>
    <script>
        // 提前定义回调函数，确保GSI加载时可访问
        function onSignIn(response) {
            // 解析GSI返回的JWT令牌获取用户信息
            const payload = JSON.parse(atob(response.credential.split('.')[1]));
            console.log('ID: ' + payload.sub);
            console.log('Name: ' + payload.name);
            console.log('Image URL: ' + payload.picture);
            console.log('Email: ' + payload.email);
            
            // 填充表单字段
            document.getElementById('firstName').value = payload.given_name;
            document.getElementById('image').value = payload.family_name;
            document.getElementById('email').value = payload.email;
        }

        // 新GSI兼容的登出函数
        function signOut() {
            google.accounts.id.disableAutoSelect();
            localStorage.removeItem('g_csrf_token');
            alert("已成功登出");
        }
    </script>
    <!-- 仅加载新GSI脚本 -->
    <script src="https://accounts.google.com/gsi/client" async></script>
</head>

<body>
    <!-- GSI初始化配置块，放在body顶部 -->
    <div id="g_id_onload" 
         data-client_id="970963878365-1dorojn0774tgekijnmb475h09gh9p0p.apps.googleusercontent.com"
         data-callback="onSignIn">
    </div>

    <div class="container">
        <div class="form" id="form">
            <form>
                <div class="g_id_signin" data-type="standard"></div>

                <!-- 登出按钮添加type="button"，避免触发表单提交 -->
                <button type="button" onclick="signOut()">Sign out</button>

                <label for="firstName">First Name:</label>
                <input id="firstName" type="text" autocomplete="given-name" />

                <label for="image">Last Name:</label>
                <input id="image" type="text" autocomplete="family-name" />

                <label for="email">Email:</label>
                <input id="email" type="email" autocomplete="off" />
            </form>
        </div>
    </div>
</body>

</html>

关键说明 #

• 新GSI的回调参数是response对象，需通过解析credential字段的JWT令牌获取用户信息，而非旧版的googleUser对象；
• g_id_onload必须配置data-callback="onSignIn"，否则登录成功后不会触发回调；
• 登出按钮添加type="button"，防止浏览器默认触发表单提交行为。

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