使用 OAuth 2.0 和客户端 ID 从 Google chrome 扩展获取辅助 ID 的身份验证令牌答案

【问题标题】：Getting the Auth Token for the secondary Id from Google chrome extension using OAuth 2.0 & Client ID使用 OAuth 2.0 和客户端 ID 从 Google chrome 扩展获取辅助 ID 的身份验证令牌
【发布时间】：2017-05-05 22:35:20
【问题描述】：

我对开发 chrome 扩展相当陌生，尤其是 chrome 扩展中的用户身份验证部分。我正在关注 Google Developer 文档中的 User Identity 示例。

该示例运行良好。我能够为 chrome 应用程序生成客户端 ID，在我的情况下为 Gmail API 添加 API 的范围。最后通过在manifest.json 中添加identitypermission 来获得Auth Token，如下所示

"oauth2": {
    "client_id": "MY CLIENT ID",
    "scopes": [
      "https://www.googleapis.com/auth/gmail.readonly",
      "https://www.googleapis.com/auth/gmail.modify"
    ]
  }

我的 app.js 是一个 content_script，它具有以下代码。

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
    /* With which I can use xhr requests to get data from Gmail API */
      console.log('Access Token : '+token);
});

现在，我得到的这个令牌给了我登录 chrome 的用户的结果。含义假设我有一个电子邮件地址为 user_a@gmail.com 的 UserA，并且我已将此日志用于 chrome 浏览器。

问题

如何获取关联账户或二级账户？例如，假设一个用户博客从 chrome 浏览器进入 Gmail。是否可以访问当前登录的特定用户的 Gmail API？

我在这里尝试了几件事。

gapi.auth.authorize({
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': true
          }, 
          function(authResult){//do something});

在上述场景中，客户端 ID 和范围是使用 chrome.runtime.getManifest(); 从 manifest.json 获取的。

此方法使用来自google api 的client.js 并利用gapi 变量。
在这种情况下，我获得了生成客户端 ID 的用户的访问令牌，甚至没有 chrome 应用程序用户。
此外，当我打开隐身模式并访问此插件时，我仍然获得相同用户的访问令牌。

补充说明

我使用 Web OAuth 2 客户端 ID 尝试了相同的 gapi.auth.authorize()。它工作得很好。我的意思是每当执行此授权时，它都会获取当前登录用户的数据，或者它要求用户登录并进行身份验证。如何在 chrome 扩展中实现相同的功能？如果我在这里遗漏了什么，请告诉我。

【问题讨论】：

我自己一直在尝试寻找答案。这里缺乏帮助令人沮丧。查看documentation，看起来您可以指定帐户ID，但问题是如何获取该帐户ID。有getAccounts Method，但它在开发频道中，所以没有多大帮助。 :(
我一直在拼命地寻找答案。我尝试了很多很多方法。 launchWebAuthFlow()、gapi、chrome.identity、xhr 请求等。NOTHING 已成功。文档很糟糕，互联网上严重缺乏这方面的信息。如果有人对此有任何信息，PRETTY PRETTY PLEASE 分享！！！
@Morfie：到目前为止运气好吗？我也为此开了一个赏金。让我们看看能不能得到一些指点。
其实是的。让我发布一些更新。我现在不能这样做（正在修复某些东西，但我会添加提醒以更新它。）

标签： javascript google-chrome-extension oauth

【解决方案1】：

http://developer.streak.com/2014/10/how-to-use-gmail-api-in-chrome-extension.html

是我最近在后台页面上实现的与 Gmail API 配合使用的完整解决方案。

内容脚本正在调用弹出窗口来授权使用生成的 URL 和简单的服务器端点来存储刷新令牌。

$.oauthpopup = function (options) {
options.windowName = options.windowName || 'ConnectWithOAuth'; // should not include space for IE

var left = (screen.width / 2) - (800 / 2);
var top = (screen.height / 2) - (500 / 1.4);

options.windowOptions = options.windowOptions || 'location=0,status=0,width=800,height=500,left=' + left + ',top=' + top;
options.callback = options.callback || function () {
    window.location.reload();
};
var that = this;

debug('oauthpopup open separate _oauthWindow');
that._oauthWindow = window.open(options.path, options.windowName, options.windowOptions);
};

$.oauthpopup({
            path: 'https://accounts.google.com/o/oauth2/auth?' +
            'access_type=offline' +
            '&approval_prompt=force' +
            '&client_id=' + clientID +
            '&redirect_uri=' + callBackUrl +
            '&response_type=code' +
            '&scope=https://mail.google.com/ email profile' +
            '&state=' + login.timyoUUID +
            '&user_id=' + login.user_email,
            callback: function () {
                // do callback stuff
            },
        });

callBackUrl 用于在服务器上存储刷新令牌。

这是我如何为每个 gapi 请求设置访问令牌的示例

export function setTokenForGAPI(accessToken) {
return getGAPIClient()
    .then(() => {
        const isSameToken = (currentAccessToken === accessToken);
        const noToken = ((accessToken === undefined) || (accessToken === ''));
        if (isSameToken || noToken) return;

        gapi.auth.setToken({
            access_token: accessToken,
        });

        currentAccessToken = accessToken;
    })
    .catch(function (e) {
        console.log('error in setTokenForGAPI', e);
    });
}
export function getEmailsByThreadIds(accessToken, ids) {
    return setTokenForGAPI(accessToken)
        .then(groupedThreadDetailsRequests(ids))
        .then(processEmailDetailsResponse);
}

【讨论】：

我已经在做这个过程了。我遇到的问题是我能够为登录 Chrome 的用户 A 获取 OAuth 令牌。我想为通过 gmail 登录的用户 B 获取 Oauth 令牌。
@Sumuga 我已经从 gmail 端的内容脚本为两个用户完成了身份验证收到刷新令牌并获取访问令牌后，我将其设置在 gapi 中。我在答案中提供了代码 sn-p。

【解决方案2】：

我最终的处理方式是这样的（总结）：

在页面层中，加载时，我将消息沿堆栈向下发送到背景层。
我使用launchWebAuthFlow() 到https://accounts.google.com/o/oauth2/auth 来获取帐户的access_token。
我使用 access_token 对 https://www.googleapis.com/oauth2/v4/token 进行了 AJAX 调用以获取刷新令牌。

当用户通过右上角的头像按钮更改他们正在使用的帐户时，此过程会再次触发，因为它是由 onLoad 为扩展的页面层启动的。

上面没有描述的东西是缓存和错误处理，这是非常重要的。

【讨论】：

【解决方案3】：

截至目前，在 Google Chrome 稳定版（版本 63）中使用受支持的 API 是不可能的。但是，在 Dev 频道中，很可能在未来的版本中，以下内容将是可能的：

chrome.identity.getAccounts(function(accounts) {
    // accounts is a list of accounts.
    chrome.identity.getAuthToken({ 'interactive': true, 'account': accounts[0] }, function(token) {
        /* With which i can use xhr requests to get data from gmail api */
          console.log('Access Token : '+token);
    });
});

见the documentation for getAccounts()。

编辑：在此期间可能起作用的是注册the onSigninChanged event。

【讨论】：