React集成Google OAuth 2.0报错：部分请求范围无效

你遇到的范围无效错误，核心原因是你使用的userinfo.email和userinfo.profile完整URL范围已被Google的OpenID Connect (OIDC) 标准简写范围取代，直接使用简写范围即可解决问题。

具体修复步骤： #

1. 替换授权范围
   将原来的完整URL范围替换为OIDC标准简写：email 和 profile，这两个简写会自动映射到对应的完整权限，且是Google当前推荐的用法。

2. 验证Cloud Console配置
   确保Google Cloud Console的OAuth同意屏幕中，已添加以下范围（两者选其一即可，简写范围会自动关联对应URL）：

   • 简写范围：email、profile
   • 完整URL范围：https://www.googleapis.com/auth/userinfo.email、https://www.googleapis.com/auth/userinfo.profile

3. 修正后的代码

const scope = [
  'email',
  'profile'
].join(' ');

const params = {
    response_type: 'code',
    client_id: googleClientId,
    redirect_uri: `${apiBaseURL}/${redirectUri}`,
    prompt:'select_account',
    access_type:'offline',
    scope
};

const urlParams = new URLSearchParams(params).toString();
// 确保googleAuthUrl是正确的授权端点，比如：https://accounts.google.com/o/oauth2/v2/auth
window.location = `${googleAuthUrl}?${urlParams}`;

额外检查点： #

• 确认googleAuthUrl使用的是Google OAuth 2.0的正确授权端点，推荐使用https://accounts.google.com/o/oauth2/v2/auth
• 检查重定向URIredirect_uri是否与Cloud Console中OAuth客户端配置的完全一致（包括协议、域名、路径）
• 如果是生产环境，确保OAuth同意屏幕已通过Google的审核（测试环境用内部测试用户无需审核）

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