Chrome Ext。使用Youtube API v3的OAuth 2.0

我正在構建一個使用Youtube API訪問的Chrome擴展程序。但我沒有得到對Youtube的認證。它看起來像沒有最新的來源或樣本。這裏的Tutorial使用了一些從2010年開始的chrome-oauth庫，其他Source這裏使用了不同的lib，我猜它對基於瀏覽器的Auth & API訪問很有用。我有一個開發密鑰，已安裝應用程序的客戶端ID（類型：Chrome），YT API密鑰（簡單API訪問）。Chrome Ext。使用Youtube API v3的OAuth 2.0

我的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 authentificated請求。看起來對於我來說，整個www是最新的，沒有任何信息來源。

如果有人能幫助我，我會很高興。

BR， mybecks

來源

2013-02-14 mybecks

您是否遇到了任何錯誤？我仔細觀察了代碼，發現v2和v3正在進行混合。我建議先得到一個非CWS示例，然後按順序查找關鍵字和範圍，然後查看CWS。我們有一個JS示例正在等待發布到文檔站點，但它不是Chrome應用程序示例。 – 2013-02-14 15:19:25

我做了一個小實驗，我測試了這個庫：

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

我接着筆者指示的步驟，我改變了popup.html和彈出。 js文件，試圖表明當前用戶

popup.html YouTube視頻的建議：

個

<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-16 23:38:51

Chrome Ext。使用Youtube API v3的OAuth 2.0

回答

相關問題