0

我正在构建一个具有 Youtube API 访问权限的 Chrome 扩展程序。但我没有得到针对 Youtube 的认证。看起来没有最新的源代码或样本。此处的教程使用 2010 年的一些 chrome-oauth 库，此处的另一个源使用不同的库，我猜它对基于浏览器的身份验证和 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，迈贝克

4

1 回答 1

0

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

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();

});
于 2013-02-16T23:38:51.477 回答