我刚刚建立了一个插件,我需要整合Google登录。我搜索并找到了
chrome.identity
使用Google帐户对用户进行身份验证,但效果不佳。
所以我通过使用下面的代码找到了解决方案
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});
});
如果我从url变量中删除v2
,那么它总是会在id_token
的转弯处出现错误,但如果我添加v2
则会成功并返回代码。
所以现在我读了谷歌文档说现在使用client_id and client_secret
创建一个帖子请求,但我在谷歌控制台上创建了一个没有client_secret
现在该怎么办?我在这里错过了什么或做错了什么,我也遇到了一个chrome扩展Screencastify
使用谷歌登录。
任何人都可以解释他们是如何做到的吗?
答案 0 :(得分:8)
您可以参考Chrome扩展程序/应用程序的官方OAuth tutorial here。
此处还有blog tutorial:
第1步:复制库
您需要将oauth2库复制到chrome扩展根目录中,并将其复制到名为oauth2的目录中。
第2步:注入内容脚本
然后,您需要修改manifest.json文件,以在Google适配器使用的重定向网址中包含内容脚本。 &#34;匹配&#34;可以在上表中查找重定向URI:
"content_scripts": [
{
"matches": ["http://www.google.com/robots.txt*"],
"js": ["oauth2/oauth2_inject.js"],
"run_at": "document_start"
}
],
第3步:允许访问令牌网址
此外,您需要向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 sample。