如何获得刷新令牌，而使用谷歌API JS客户端

Question

我一直在尝试实现一个应用程序，需要用户授予访问谷歌分析。我一直在遵循这个教程:

https://developers.google.com/analytics/solutions/articles/hello-analytics-api

其他地方的AngularJs代码也使用了相同的函数l

https://gist.github.com/jakemmarsh/5809963

我的问题是，auth工作得很好，但它没有返回一个refresh_token。它从不返回refresh_token。我已经在网上尝试了所有可能的方法。1. 第一次，2. 使用提示=强迫等等。但是似乎没有返回refresh_token。我猜这部分是被客户跳过了。

我需要知道如何在用户第一次授予访问权限时获得refresh_token，以便我可以保存它

Answer 1

它没有按照设计返回刷新令牌。你提到的教程和代码使用的是Google api Client Library for JavaScript。此库使用OAuth 2.0客户端流来发出需要授权的请求。

正如OAuth 2.0授权框架所说:

隐式授权类型用于获取访问令牌(它不支持发布刷新令牌)，并且针对已知操作特定重定向URI的公共客户端进行了优化。这些客户端通常在浏览器中使用脚本语言(如JavaScript)实现。

事实上，授权码流是唯一发出刷新令牌的流，Google在以下场景中支持该流:Web服务器应用程序、已安装应用程序和有限输入设备上的应用程序，但不支持客户端(JavaScript)应用程序或服务帐户。

所以你不会以这种方式获得刷新标记

Answer 2

不确定这是否是正确的方式，但我能够使用以下代码获得刷新令牌:

window.gapi.client.init({
  apiKey: this.GOOGLE.API_KEY,
  clientId: this.GOOGLE.CLIENT_ID,
  discoveryDocs: DISCOVERY_DOCS,
  scope: SCOPES
}).then(()=>{
  const authInstance = window.gapi.auth2.getAuthInstance();
  authInstance.grantOfflineAccess()
   .then((res) => {
      console.log(res);
      this.data.refreshToken = res.code;
   });
});

Answer 3

;设置查询参数为response_type='code'和access_type='offline'

我通过做"服务器"流授权来解决这个问题。基本上，您通过重定向用户来做与"隐式"流程相同的事情，但将response_type从token更改为> code(也设置access_type=offline)。这将为您提供一个授权代码，然后您可以使用该代码POST到Exchange code for access token and ID token部分中记录的Google OAuth服务。

我使用一个包去验证令牌。您也可以通过其他方式获得此令牌。为你的google登录安装一个npm包。查看这个npm包

在GoogleLogin函数中增加scope和flow来获取认证码

import { GoogleLogin } from '@react-oauth/google';
<GoogleLogin
  scope: 'https://mail.google.com/',
  flow: 'auth-code',
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
/>;

成功响应如下所示:

{
  authuser: "0",
  code: "********KAjJZmv4xLvbAIHeySg",
  hd: "myalice.ai",
  prompt: "consent",
}

这里我们只需要代码部分。

生成刷新和访问令牌:

在有效载荷内发送从响应中获得的代码。

let payload = {
  grant_type: 'authorization_code',
  code: "********KAjJZmv4xLvbAIHeySg",
  client_id: '******.googleusercontent.com',
  client_secret: 'GOCS*******m5Qzg',
  redirect_uri: 'http://localhost:3000',
};
axios
  .post(`https://oauth2.googleapis.com/token`, payload, {
    headers: {
      'Content-Type': 'application/json;',
    },
  })
  .then((res: any) => {
    return res.data;
  })
  .then((response: any) => {
    console.log('refresh token: ', response);
  })
  .catch((err) => console.log('err: ', err));

您将得到如下响应:

{
    access_token: "********KAjJZmv4xLvbAIHey",
    expires_in: 3599,
    id_token: "***************VeM7cfmgbvVIg",
    refresh_token: "***************VeM7cfmgbvVIg",
    scope: "https://www.googleapis.com/auth/gmail.readonly openid 
            .....
            .....
            https://mail.google.com/",
    token_type: "Bearer",
}

保存刷新和访问令牌。现在您可以使用刷新令牌来生成新的访问令牌了!这里有一篇文章介绍如何将它集成到react应用程序中。