如何在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扩展中使用谷歌创建登录

回答

相关问题