chrome.identity.launchWebAuthFlow 可以用于针对 Google API 进行身份验证吗？

Question

我正在编写一个 Chrome 扩展程序，并一直在尝试使用 chrome.identity.launchWebAuthFlow 与 Google 进行身份验证。我更喜欢 chrome.identity.getAuthToken （它确实有效），因为 getAuthToken 获取当前登录到 Chrome 的用户的令牌——他们可能登录到多个 Google 帐户。我希望用户能够将特定的 Google 日历连接到我的扩展程序，并且该日历可能属于与他们登录 Chrome 不同的用户。

所以，我一直在尝试使用 chrome.identity.launchWebAuthFlow 来做到这一点，但通常会在不匹配的 redirect_uri 问题上失败。我已经尝试了您可以在 Google API 开发人员控制台中设置的几乎所有类型的凭据。（“Chrome 应用程序”似乎是正确的，但我也尝试过 Web 应用程序、其他和 iOS。）我尝试使用 chrome.extension.getURL('string') 和 chrome.app.getRedirectURL 的结果('string') 作为我的 redirect_uri。

我尝试了/sf/ask/2826897881/引用的示例应用程序，但也无法使其正常工作。

我怀疑我正在尝试做一些曾经被允许但不再允许的事情，或者只是从未奏效。

这是我的代码示例，但我认为我的问题确实出在 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 返回了它，而不是将浏览器重定向到它——我可以从那里继续。

Answer 1

是的，2019年它仍然有效。终于可以工作了...

清单.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"
}

背景.js

chrome.windows.create({
    'url': './content/auth/auth.html',
    'width': 454,
    'height': 540,
    'type': 'popup'
});

验证.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);
});

Answer 2

为了运行Angular 示例，我需要：

1. 在 Google 开发者控制台中创建我自己的 Web 应用程序客户端 ID，授权重定向 URI 为https://bcgajjfnjjgadphgiodlifoaclnemcbk.chromiumapp.org/oauth2

2. 将该客户端 ID 复制到示例的 config.json 文件中。

该示例中对 get redirectURI 的调用类似于chrome.identity.getRedirectURL("oauth2")，字符串参数根据扩展 ID 附加到 URL 的末尾。