本地使用Google OAuth 2.0报Error 400: invalid_request如何解决？

核心原因 #

该错误是Google收紧OAuth 2.0本地开发环境校验规则导致的，未验证应用的本地来源地址、测试用户权限、配置参数不匹配都会触发稳定报错，之前偶发可刷新解决是因为浏览器缓存了旧的有效授权会话。

排查步骤 #

• 检查OAuth同意屏幕配置：确认用户类型如果是「外部」且应用未完成Google官方验证，你使用的测试Google账号已经被添加到「测试用户」列表中。
• 检查OAuth客户端ID授权配置：确认已授权的JavaScript来源、已授权的重定向URI，都完整添加了本地访问的地址，协议（HTTP/HTTPS）、域名、端口完全和本地访问地址一致，无多余斜杠、大小写不匹配问题。
• 检查本地环境配置：确认使用的client_id是对应测试项目的ID，没有误用生产环境未配置本地来源的client_id；自签名HTTPS证书如果没有被系统根证书信任，会触发Google的安全校验，优先使用HTTP协议的localhost地址测试。
• 检查ng-gapi配置：确认配置中显式指定了redirect_uri参数，取值和控制台配置的重定向URI完全一致。

解决操作 #

1. 进入Google Cloud对应项目的「API和服务」→「OAuth同意屏幕」，添加测试账号后保存，等待5-10分钟生效。如果应用仅在团队内部使用，直接将用户类型修改为「内部」，无需额外添加测试用户即可绕过校验。
2. 进入「凭据」页面，找到对应的OAuth 2.0客户端ID，在「已授权的JavaScript来源」和「已授权的重定向URI」中都添加以下地址（按需选择）：
   • http://localhost:4200
   • http://127.0.0.1:4200
   • http://mywebsite.com:4200（自定义host域名场景）
3. 修改ng-gapi配置，新增redirect_uri字段：

import { NgGapiClientConfig } from 'ng-gapi/config/GoogleApiConfig';
import { environment } from '@env/environment';

export const gapiClientConfig: NgGapiClientConfig = {
  client_id: environment.clientId,
  discoveryDocs: [],
  scope: 'https://www.googleapis.com/auth/userinfo.email',
  redirect_uri: 'http://localhost:4200' // 与控制台配置的重定向地址完全一致
};

4. 清除浏览器所有Cookie和缓存，重启本地开发服务后重新测试。

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