我正在写一个Chrome扩展,并一直试图使用Chrome .identity. launchwebauthflow与谷歌进行身份验证。我更喜欢这个Chrome .identity.getAuthToken(它确实工作),因为getAuthToken获取当前登录到Chrome的用户的令牌-谁可能登录到多个谷歌帐户。我希望用户能够挂钩一个特定的谷歌日历到我的扩展,日历可能属于不同的用户,而不是他们已经登录到Chrome作为。
所以,我一直在尝试用chrome.identity.launchWebAuthFlow来做到这一点,并且通常在不匹配的redirect_uri周围失败。我已经尝试了可以在Google api开发人员控制台中设置的几乎所有类型的凭据。("Chrome应用程序"似乎是正确的选择,但我也尝试过Web应用程序、其他应用程序和iOS。)我试过使用chrome.extension.getURL('string')和chrome.app.getRedirectURL('string')的结果作为我的redirect_uri。
我尝试了https://stackoverflow.com/questions/40384255/oauth2-angular-chrome-extension提到的示例应用程序,但也没有能够使其工作。
我怀疑我正在尝试做一些过去被允许但现在不再被允许的事情,或者只是从来没有奏效过。
这是我的代码的一个例子,但我认为我的问题真的是在API开发控制台——我没有看到一种方法来设置一个配置,将工作的扩展:
var auth_url = 'https://accounts.google.com/o/oauth2/v2/auth';
var client_key = *[client id from API dev console]*
var auth_params = {
client_id: client_key,
redirect_uri: chrome.identity.getRedirectURL("oauth2.html")
scope: 'https://www.googleapis.com/auth/calendar'
};
auth_url += '?' + $.param(auth_params);
chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(token) { console.log(token); });
(我也尝试了https://accounts.google.com/o/oauth2/auth端点)
解决方案:
在阅读了被接受的答案后,我结束了这个:
var auth_url = 'https://accounts.google.com/o/oauth2/auth';
var client_id = '[client ID from console]';
var redirect_url = chrome.identity.getRedirectURL("oauth2.html");
var auth_params = {
client_id: client_id,
redirect_uri: redirect_url,
response_type: 'token',
scope: 'profile'
};
auth_url += '?' + $.param(auth_params);
console.log(auth_url);
chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(responseUrl) { console.log(responseUrl); });
responseUrl是我的redirect_uri与参数-所以谷歌oauth返回,而不是重定向浏览器到它-我可以从那里继续。
是的,在2019年它仍然有效。终于修好了…
manifest.json
{
"name": "Extension Name",
"description": "Description",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"oauth2": {
"client_id": "Your Client ID from Google Develpers console (Must be Web Application)",
"scopes": [
"openid", "email", "profile"
]
},
"permissions": [
"identity"
],
"key": "Your Key from Google Developer Dashboard"
}
background.js
chrome.windows.create({
'url': './content/auth/auth.html',
'width': 454,
'height': 540,
'type': 'popup'
});
auth.html
standard HTML markup that calls auth.js file
auth.js
var auth_url = 'https://accounts.google.com/o/oauth2/auth?';
var client_id = '<Client ID>'; // must be Web Application type
var redirect_url = chrome.identity.getRedirectURL(); // make sure to define Authorised redirect URIs in the Google Console such as https://<-your-extension-ID->.chromiumapp.org/
var auth_params = {
client_id: client_id,
redirect_uri: redirect_url,
response_type: 'token',
scope: 'https://mail.google.com/',
login_hint: 'real_email@gmail.com' // fake or non-existent won't work
};
const url = new URLSearchParams(Object.entries(auth_params));
url.toString();
auth_url += url;
chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(responseUrl) {
console.log(responseUrl);
});
要让Angular示例运行,我需要:
-
在Google开发者控制台中使用
https://bcgajjfnjjgadphgiodlifoaclnemcbk.chromiumapp.org/oauth2
的授权重定向URI创建我自己的Web应用程序客户端ID -
将客户端ID复制到配置中。
在该示例中获取redirectURI的调用类似于chrome.identity.getRedirectURL("oauth2")
,字符串参数根据扩展ID被附加到URL的末尾。