如何使用Chrome扩展程序中的谷歌创建登录

Question

我刚刚构建了一个插件,我需要在其中集成Google Login.我搜索并找到了

chrome.identity

使用谷歌帐户验证用户,但不是很好.

所以我通过使用下面的代码找到了解决方案

var manifest = 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});
    });

如果我v2从url变量中删除它然后它总是在转弯时给出错误id_token但是如果我添加v2它的成功并返回代码.

所以现在我读了谷歌文档说,现在创建一个帖子请求使用,client_id and client_secret但我Chrome浏览器创建凭证在谷歌控制台没有client_secret

那我该怎么办？有什么我错过或做错了在这里我也遇到了一个Chrome扩展Screencastify使用谷歌登录.

谁能解释他们是怎么做到的？

Answer 1

这里有针对Chrome扩展程序/应用程序的官方OAuth教程,您可以参考.

这里还有另一个博客教程:

第1步:复制库

您需要将oauth2库复制到chrome扩展根目录中,并将其复制到名为oauth2的目录中.

第2步:注入内容脚本

然后,您需要修改manifest.json文件,以在Google适配器使用的重定向URL中包含内容脚本.可以在上表中查找"匹配"重定向URI:

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

第3步:允许访问令牌URL

此外,您需要为Google的访问令牌授予网址添加权限,因为该库会对其执行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示例.