铬分机。带有 Youtube API v3 的 OAuth 2.0答案

【问题标题】：Chrome Ext. OAuth 2.0 with Youtube API v3铬分机。带有 Youtube API v3 的 OAuth 2.0
【发布时间】：2019-08-30 00:13:00
【问题描述】：

我正在构建一个具有 Youtube API 访问权限的 Chrome 扩展程序。但我没有得到针对 Youtube 的认证。看起来没有最新的源代码或样本。这里的Tutorial 使用了 2010 年的一些 chrome-oauth 库，这里的另一个 Source 使用了不同的库，我想它对于基于浏览器的身份验证和 API 访问很有用。我有一个开发密钥、一个已安装应用程序的客户端 ID（类型：Chrome）、YT API 密钥（简单 API 访问）。

我的 Chrome 应用使用以下清单：

{
    "name": "Youtube Chrome Ext",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Youtube Chrome Ext",
    "app": {
        "launch": {
            "local_path": "main.html",
            "container":"tab"
        }
    },

    "options_page": "settings.html",
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "tabs",
        "http://gdata.youtube.com/",
        "https://www.google.com/accounts/OAuthGetRequestToken",
        "https://www.google.com/accounts/OAuthAuthorizeToken",
        "https://www.google.com/accounts/OAuthGetAccessToken",
        "https://www.googleapis.com/auth/youtube"
    ]
}

使用以下 backgroundHandler.js 文件通过 oAuth2.0 通过 Youtube 进行身份验证：

(function(global){

    global.backgroundHandler = {

        initBackground : function(){
            var self = this;
            var oauth = ChromeExOAuth.initBackgroundPage({
                'request_url'     : 'https://www.google.com/accounts/OAuthGetRequestToken',
                'authorize_url'   : 'https://www.google.com/accounts/OAuthAuthorizeToken',
                'access_url'      : 'https://www.google.com/accounts/OAuthGetAccessToken',
                'consumer_key'    : 'anonymous',
                'consumer_secret' : 'anonymous',
                'scope'           : 'http://gdata.youtube.com',
                'app_name'        : 'YouTube Ext'
            });

            oauth.authorize(this.onAuthorized());
        },

        onAuthorized : function() {
            //I'm not authorized - no window with grant access was displayed ...
        }

    };
})(window);

document.addEventListener('DOMContentLoaded', function () {
    backgroundHandler.initBackground();
});

注意 Youtube 不使用消费者密钥和秘密。

背景.html：

   <!DOCTYPE html>
    <html>
      <head>
        <script type="text/javascript" src="js/oAuth/chrome_ex_oauthsimple.js"></script>
        <script type="text/javascript" src="js/oAuth/chrome_ex_oauth.js"></script> 
        <script type="text/javascript" src="js/handler/backgroundHandler.js"></script>
      </head>
      <body>
      </body>
    </html>

我最大的问题是以某种方式完成 OAuth 并对 Youtube 执行经过身份验证的请求。对我来说，整个 www 上没有最新的来源。

如果有人可以帮助我，我会很高兴。

BR, 我的贝克

【问题讨论】：

您是否遇到任何错误？我观察了代码，看到 v2 和 v3 的一些混合正在发生。我建议首先获取一个非 CWS 示例，以便您按顺序排列键和范围，然后查看 CWS。我们在某处有一个 JS 示例等待发布到文档站点，但它不是 Chrome 应用示例。

标签： javascript google-chrome-extension youtube-api oauth-2.0

【解决方案1】：

我做了一个小实验，并测试了这个库：

https://github.com/borismus/oauth2-extensions

我按照作者指示的步骤更改了 popup.html 和 popup.js 文件，尝试为当前用户显示 YouTube 视频推荐

popup.html：

<head>
  <title>YouTube Recommendations</title>
  <script src="oauth2/oauth2.js"></script>
  <script src="popup.js"></script>
  <style>
    #success { display: none; }
  </style>
</head>

<div id="loading">
Loading...
</div>
<div id="success">
  <ul id="activities"></ul>
</div>

popup.js：

var google = new OAuth2('google', {
  client_id: '{YOUR_CLIENT_ID}',
  client_secret: '{YOUR_CLIENT_SECRET}',
  api_scope: 'https://www.googleapis.com/auth/youtube'
});

google.authorize(function() {

  var YOUTUBE_ACTIVITIES_URL = 'https://www.googleapis.com/youtube/v3/activities?part=id%2Csnippet%2CcontentDetails&home=true&maxResults=50&key=AIzaSyCx1xab1VHU7NdT6d2_x8i3p9RIZrtgR8k';

  var loading = document.getElementById('loading');
  var success = document.getElementById('success');
  var activities = document.getElementById('activities');

  // Make an XHR that retrieve activities with YouTube Data API
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(event) {
    if (xhr.readyState == 4) {
      if(xhr.status == 200) {
        // Great success: parse response with JSON
        var activitiesResponse = JSON.parse(xhr.responseText);
        var items = activitiesResponse.items;
        for (var i=0; i<items.length; i++) {
          // Iterates over activities
          var activity = items[i];
          if ((activity.snippet.type == 'recommendation')&&(activity.contentDetails.recommendation.resourceId.videoId)){
            activities.innerHTML += '<li><a href="http://www.youtube.com/watch?v=' + activity.contentDetails.recommendation.resourceId.videoId + '" target="_blank">' + activity.snippet.title + '</a></li>';
          }
        }

        loading.style.display = 'none';
        success.style.display = 'block';

      } else {
          // Request failure: something bad happened
      }
    }
  };

  xhr.open('GET', YOUTUBE_ACTIVITIES_URL, true);

  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'OAuth ' + google.getAccessToken());

  xhr.send();

});

【讨论】：