在 Chrome 扩展程序中使用 Facebook 图表答案

【问题标题】：Using Facebook graph in Chrome Extensions在 Chrome 扩展程序中使用 Facebook 图表
【发布时间】：2011-12-22 19:32:44
【问题描述】：

我正在尝试在 Chrome 扩展程序中使用 Facebook 图表，但在使用访问令牌获得权限时遇到问题。我的扩展文件夹有一个带有以下代码的 background.html 文件：

function displayUser(user) {
       var userName = document.getElementById('userName');
       var greetingText = document.createTextNode('Greetings, ' + user.name + '.');
       userName.appendChild(greetingText);
    }

    var appID = "XXXXX";
    if (window.location.hash.length == 0) {
      var path = 'https://www.facebook.com/dialog/oauth?';
      var queryParams = ['client_id=' + appID,'redirect_uri=https://www.facebook.com/connect/login_success.html', 'response_type=token'];
      var query = queryParams.join('&');
      var url = path + query;
      window.open(url);
    } else {
      var accessToken = window.location.hash.substring(1);
      var path = "https://graph.facebook.com/me?";

      var queryParams = [accessToken, 'callback=displayUser'];
      var query = queryParams.join('&');
      var url = path + query;

   // use jsonp to call the graph
       var script = document.createElement('script');
       script.src = url;
       document.body.appendChild(script);        
     }

当我运行扩展程序时，它会打开一个带有应用授权的新选项卡。当我接受它时，它只是说“成功”，这个标签的网址是这样的：

https://www.facebook.com/connect/login_success.html#access_token=AAABtoJwdQQgBAP8KK6QYmlQ1CJOSjQxWjXoa7qgUthF507BGPgLeWEplB87fZBpDZBZBd7CKoIWb4Fa3S2laBuZAUf795p1N3QZDZD&expires_in=5549

那么现在如何在 background.html 中使用此访问令牌并关闭该授权选项卡？

【问题讨论】：

标签： facebook google-chrome authorization oauth-2.0

【解决方案1】：

你应该注意（在扩展代码中）标签页的变化，像这样的成功 url

chrome.tabs.onUpdated.addListener(onTabUpdated);

然后是处理函数：

function onTabUpdated(tabId, changeInfo, tab) {
  if (changeInfo.url && changeInfo.url.indexOf(SUCCESS_URL) == 0) {
     // extract access token from url

提取函数：

function accessTokenFromSuccessURL(url) {
var hashSplit = url.split('#');
if (hashSplit.length > 1) {
  var paramsArray = hashSplit[1].split('&');
  for (var i = 0; i < paramsArray.length; i++) {
    var paramTuple = paramsArray[i].split('=');
    if (paramTuple.length > 1 && paramTuple[0] == 'access_token')
      return paramTuple[1];
  }
}
return null;

}

【讨论】：

【解决方案2】：

根据redirect_uri=https://www.facebook.com/connect/login_success.html 判断，我假设您正在构建桌面或客户端应用程序。

尝试添加var RedirectURI = window.location; 并将 queryParams 数组中的重定向 URI 更改为 redirect_uri= RedirectURI 如果需要，您可以将http://localhost 添加到https://developers.facebook.com/apps 中的站点 URL 条目

获取令牌后，它会重定向到您的上一个页面，并将授权令牌添加为哈希值，该哈希值由代码中的else { } 块自动处理。

【讨论】：