如何在Chrome擴展中使用谷歌創建登錄

我剛剛構建了一個插件，我需要在其中集成Google登錄。我搜索並找到了如何在Chrome擴展中使用谷歌創建登錄

chrome.identity

使用Google帳戶對用戶進行身份驗證但該功能無法正常工作。

所以我跨越溶液來通過以下

變種清單此代碼= chrome.runtime.getManifest（）;

var clientId = encodeURIComponent(manifest.oauth2.client_id); 
    var scopes = encodeURIComponent(manifest.oauth2.scopes.join(' ')); 
    var redirectUri = encodeURIComponent('urn:ietf:wg:oauth:2.0:oob:auto'); 

    var url = 'https://accounts.google.com/o/oauth2/v2/auth' + 
       '?client_id=' + clientId + 
       '&response_type=code' + 
       '&redirect_uri=' + redirectUri + 
       '&scope=' + scopes; 

    var RESULT_PREFIX = ['Success', 'Denied', 'Error']; 
    chrome.tabs.create({'url': 'about:blank'}, function(authenticationTab) { 
     chrome.tabs.onUpdated.addListener(function googleAuthorizationHook(tabId, changeInfo, tab) { 
      if (tabId === authenticationTab.id) { 

       var titleParts = tab.title.split(' ', 2); 

       var result = titleParts[0]; 
       if (titleParts.length == 2 && RESULT_PREFIX.indexOf(result) >= 0) { 
        chrome.tabs.onUpdated.removeListener(googleAuthorizationHook); 
        chrome.tabs.remove(tabId); 

        var response = titleParts[1]; 
        switch (result) { 
         case 'Success': 
          // Example: id_token=<YOUR_BELOVED_ID_TOKEN>&authuser=0&hd=<SOME.DOMAIN.PL>&session_state=<SESSION_SATE>&prompt=<PROMPT> 
          console.log("suc:"+response); 
         break; 
         case 'Denied': 
          // Example: error_subtype=access_denied&error=immediate_failed 
          console.log("denied:"+response); 
         break; 
         case 'Error': 
          // Example: 400 (OAuth2 Error)!!1 
          console.log("error:"+response); 
         break; 
        } 
       } 
      } 
     }); 

     chrome.tabs.update(authenticationTab.id, {'url': url}); 
    });

，其中，如果我從url變量刪除v2那麼它總是給誤差與id_token轉，但如果我添加v2那麼它的成功並返回代碼。

所以現在我讀谷歌文檔，其中說，現在使用client_id and client_secret創建一個POST請求，但我的Chrome應用創建谷歌控制檯上的證書不具有client_secret

現在我該怎麼辦？有什麼我錯過了或在這裏做錯了，我也遇到了鉻擴展Screencastify使用谷歌登錄之一。

任何人都可以解釋他們是如何做到的嗎？

來源

2017-07-07 Kushal Jain

您可以參考的Chrome擴展程序/應用程序有官方OAuth tutorial here。

還有另一種blog tutorial這裏：

步驟1：將庫

您將需要的oauth2庫複製到您的瀏覽器擴展程序根到一個名爲的oauth2目錄。

第2步：注射內容腳本

然後，你需要修改你的manifest.json文件，包括由谷歌適配器使用的重定向URL內容腳本。該「匹配」重定向URI可以在表中查找上面：

"content_scripts": [ 
    { 
    "matches": ["http://www.google.com/robots.txt*"], 
    "js": ["oauth2/oauth2_inject.js"], 
    "run_at": "document_start" 
    } 
],

3步：允許訪問令牌URL

此外，您將需要一個權限添加到谷歌的訪問令牌授予網址，因爲圖書館會做XHR反對它。訪問令牌URI也可以在上表中查找。

"permissions": [ 
    "https://accounts.google.com/o/oauth2/token" 
]

第4步：包括的OAuth 2.0庫

其次，在擴展的代碼，你應該包括的OAuth 2.0庫：

<script src="/oauth2/oauth2.js"></script>

第5步：配置的OAuth 2。0端點

並通過從註冊頁面提供clientId，clientSecret和apiScopes來配置您的OAuth 2連接。 authorize（）方法可以爲用戶創建一個新的彈出窗口，以授予您對OAuth2端點的擴展訪問權限。

var googleAuth = new OAuth2('google', { 
    client_id: '17755888930840', 
    client_secret: 'b4a5741bd3d6de6ac591c7b0e279c9f', 
    api_scope: 'https://www.googleapis.com/auth/tasks' 
}); 

googleAuth.authorize(function() { 
    // Ready for action 
});

第6步：使用訪問令牌

現在，您的用戶通過auth.getAccessToken（）有一個訪問令牌，你可以通過添加的accessToken作爲請求頭請求保護的數據

xhr.setRequestHeader('Authorization', 'OAuth ' + myAuth.getAccessToken())

或通過將其作爲URL的部分（取決於在服務器上執行）：

myUrl + '?oauth_token=' + myAuth.getAccessToken();

注意：如果您有多個您想要授權的OAuth 2.0端點，您也可以這樣做！只需注入內容腳本併爲您想要授權的所有提供者添加權限。

這裏是實際使用這些概念的github sample。

來源

2017-07-08 14:56:50 noogui

如何在Chrome擴展中使用谷歌創建登錄

回答

相關問題