一千萬個為什麽

搜索

Google Chrome擴展程序+使用Facebook + Parse登錄

我試圖建立一個谷歌瀏覽器擴展,用例要求用戶可以通過Facebook登錄並通過帖子分享到他們的Facebook墻上。

正確的應用程序流程將如下所示:

  1. 用戶點擊谷歌瀏覽器擴展程序 - 召喚擴展頁面
  2. 用戶點擊擴展頁面上的“使用Facebook登錄”(或在新標簽頁中),用戶就可以在Facebook上看到“批準應用程序”
  3. 用戶批準應用
  4. 用戶被引導至一個新頁面,感謝他們安裝並處理所有需要的用戶信息,或者將用戶發送回Google Chrome擴展程序(更好的方式)
  5. 如果用戶未返回到Google Chrome瀏覽器擴展程序,應該告訴他們這樣做,但此時如何將數據提供給Google Chrome擴展程序?
  6. 用戶打開Goog​​le Chrome擴展程序,他們現在應該看到“Hi John”或類似的代碼,而不是“使用Facebook登錄”
  7. 用戶不能發帖到Facebook

我的主要小公司正在使用Facebook登錄,並將數據恢復到擴展。

我創建了一個Facebook應用程序,完成了大部分特定於應用程序的編碼,我試圖保持應用程序只是JavaScript(但如果沒有其他方式,我可以在PHP中添加),嘗試使用標準的Facebook JavaScript,並嘗試使用Facebook的桌面客戶端。

任何人都經歷過這種連接Google Chrome擴展程序和Facebook登錄的過程嗎?

作為最後一點,我試圖和Parse一起為這個項目工作,所以如果你有任何額外的負擔,那也會很棒!


A good example of what I'm trying to accomplish is similar to what Any.do https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon

最佳答案

最近我有這種問題;)。這有點復雜,但我會盡量以最簡單的方式解釋它。

Put somewhere in your extension (maybe options page) link "login with facebook" that redirects to: https://www.facebook.com/dialog/oauth?client_id=&response_type=token&scope=&redirect_uri=http://www.facebook.com/connect/login_success.html

當有人點擊此鏈接時,會被要求提供權限等(臉書頁面)。如果有人同意,該頁面將會載入 http://www.facebook.com/connect/login_success.html 參數 access_tokenexpires_in 地址。

現在,背景頁面應該有這樣的腳本:

var successURL = 'www.facebook.com/connect/login_success.html';

function onFacebookLogin(){
  if (!localStorage.getItem('accessToken')) {
    chrome.tabs.query({}, function(tabs) {//get all tabs from every window
      for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].url.indexOf(successURL) !== -1) {
         //below you get string like this: access_token=...&expires_in=...
          var params = tabs[i].url.split('#')[1];

         //in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
          var accessToken = params.split('&')[0];
          accessToken = accessToken.split('=')[1];

          localStorage.setItem('accessToken', accessToken);
          chrome.tabs.remove(tabs[i].id);
        }
      }
    });
  }
}

chrome.tabs.onUpdated.addListener(onFacebookLogin);

這就是你如何從Facebook獲取訪問令牌。現在您可以向 https://graph.facebook.com 發送請求。

希望我幫忙;)

轉載註明原文: Google Chrome擴展程序+使用Facebook + Parse登錄