React用react-google-login实现Google OAuth调用YouTube API报403 access_denied

直接触发登录报错的核心原因 #

• OAuth同意屏权限配置缺失：https://www.googleapis.com/auth/youtube 属于Google标记的敏感权限，只要Google Cloud项目未完成官方应用安全验证，所有不在测试用户名单内的账号登录时，都会被OAuth流程直接拦截，返回Error 403: access_denied。该问题和你是否启用YouTube Data API V3无直接关联：
  • 需在OAuth同意屏配置页，将当前测试用的Google账号添加到测试用户列表
  • 需在同意屏的权限申请列表中，显式声明代码里用到的YouTube相关scope，否则OAuth会默认拒绝你的授权请求
• 代码中凭证取值完全错误：你当前在登录成功回调里，把response.profileObj 直接传给业务层，之后拿profileObj.googleId 当Bearer令牌塞到请求头里。实际上profileObj 仅存储用户公开身份信息（昵称、头像、公开账号ID），真正可用于调用受保护API的访问令牌，存在成功回调的response.accessToken 字段里——你现在用来认证的内容是用户公开ID，完全不符合OAuth要求，哪怕登录流程能走完，接口请求也一定会被拒。
  修正后的登录回调逻辑：

  const onSuccess = (response) => {
    // 分别存储用户公开信息和可用于API调用的访问令牌
    props.onLogin({
      userProfile: response.profileObj,
      accessToken: response.accessToken
    });
  }
  

接口调用环节的代码问题 #

• 认证逻辑混用：YouTube Data API 的认证分为两种独立模式，不能同时混用逻辑：
  1. 带合法OAuth访问令牌的请求：直接在请求头中携带Bearer令牌即可，不需要在URL中拼接API Key，这种模式才能使用mine=true 参数查询当前授权用户的私有资源（比如自己创建的播放列表）
  2. 仅使用公开API Key的请求：只能查询公开的视频、频道信息，mine=true 这类和用户私有数据绑定的参数会完全失效
• 原代码存在语法拼接错误：你写的请求地址里&key=" + googleId" 部分缺少数值取符，本身就无法正常运行。
  修正后的接口调用代码：

  const logPlayList = () => {
    const requestHeader = {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Authorization": "Bearer " + googleId.accessToken // 替换为之前存储的真实访问令牌
      }
    };
    // 去掉URL中错误拼接的key参数，靠请求头的OAuth令牌完成用户级认证
    axios.get("https://www.googleapis.com/youtube/v3/playlists?part=snippet&mine=true", requestHeader)
      .then(res => console.log(res.data))
      .catch(err => console.log(err))
  }
  

现有配置状态说明 #

你当前在Google Cloud控制台的API启用状态如下：

从截图看，你已经正常启用了YouTube Data API V3，该环节不存在配置错误，所有报错来源均集中在OAuth同意屏配置、凭证取值、接口认证逻辑三个部分。 #

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