OAuth授权同意页未显示且YouTube API mine参数授权失败求助

问题重现 #

尝试通过以下代码获取YouTube频道名称及订阅数：

var youtubeAuthResponse = [],youtubeChannelResponse = [];
function authenticate() {
  showNewLoader('show');
  return gapi.auth2.getAuthInstance()
  .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
  .then(function(response) {  
    console.log( response);
    youtubeAuthResponse['token_details'] = response.tc; 
    youtubeAuthResponse['google_email'] = '';
    youtubeAuthResponse['google_id'] = '';
    showNewLoader('hide');
  },
  function(err) { console.error("Error signing in", err); showNewLoader('hide');});
}
function loadClient() {
  showNewLoader('show');
  gapi.client.setApiKey("XXXX");
  return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
  .then(function() { execute();},
    function(err) { console.error("Error loading GAPI client for API", err);showNewLoader('hide');});
}
/*Make sure the client is loaded and sign-in is complete before calling this method.*/
function execute() {
  return gapi.client.youtube.channels.list({
    "part": [
    "snippet",
    "statistics"
    ],
    "mine": true
  })
  .then(function(response) {
    /*Handle the results here (response.result has the parsed body).*/
    youtubeChannelResponse = response.result;
    storeYoutubeData();
  },
  function(err) { console.error("Execute error", err); showNewLoader('hide') }).then(function(){
  });
}

gapi.load("client:auth2", function() {
  gapi.auth2.init({client_id: "XXXXXX",
    'access_type':'offline'});
});

执行后遇到两个问题：

1. 登录后收到谷歌错误提示：

"The request uses the <code>mine</code> parameter but is not properly authorized."

2. OAuth授权同意页从未显示（截图：）

问题原因及修复方案 #

1. 修正授权流程逻辑 #

当前代码中loadClient直接调用execute，未等待authenticate完成，导致API请求时无有效授权令牌，触发mine参数未授权错误。需调整调用顺序，确保先完成认证再执行API请求：
添加触发按钮绑定流程：

<button onclick="authenticate().then(loadClient)">授权并获取数据</button>

2. 替换不可靠的私有属性调用 #

代码中使用response.tc获取令牌，这是谷歌Auth2内部私有属性，随时可能变更。改用官方API获取授权信息：
修改authenticate函数：

function authenticate() {
  showNewLoader('show');
  return gapi.auth2.getAuthInstance()
  .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
  .then(function(googleUser) {  
    console.log(googleUser);
    const authResponse = googleUser.getAuthResponse();
    youtubeAuthResponse['token_details'] = authResponse.access_token; 
    youtubeAuthResponse['google_email'] = googleUser.getBasicProfile().getEmail();
    youtubeAuthResponse['google_id'] = googleUser.getId();
    showNewLoader('hide');
  },
  function(err) { console.error("Error signing in", err); showNewLoader('hide');});
}

3. 检查OAuth客户端配置 #

• 在谷歌云控制台中，将当前网站域名添加至授权的JavaScript来源和授权的重定向URI
• 确认client_id和apiKey配置无拼写错误
• 确保OAuth授权同意页已配置完成，测试阶段需添加测试用户，正式环境需将状态设为发布

4. 确认API已启用 #

在谷歌云控制台中，检查YouTube Data API v3是否已启用，未启用会导致请求被拒绝。

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