0

Youtube API アクセスを使用して Chrome 拡張機能を構築しています。しかし、Youtube に対する認証が得られません。最新のソースやサンプルがないようです。ここのチュートリアルでは 2010 年の chrome-oauth ライブラリを使用しています。ここの他のソースでは別のライブラリを使用しています。ブラウザ ベースの認証と API アクセスに役立つと思います。Dev Key、インストール済みアプリのクライアント ID (タイプ: Chrome)、YT API キー (Simple API Access) があります。

私の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 はコンシューマ キーとシークレットを使用しないことに注意してください。

background.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 に答える