从 Google JWT 到使用 React 和 Node.js 访问和刷新令牌

Question

我有一个 MERN 应用程序，我想在我的应用程序中获得以下行为：

1. 用户使用@react-oauth/google package 中的GoogleLogin组件通过 google 登录
2. 在用户登录并授予我的应用程序访问某些 Google API（例如 Google 日历）的权限后，我想将登录过程生成的 JWT 发送到 Node.js 后端
3. 我想从这个 JWT 中“提取”访问和刷新令牌（以某种方式对其进行解码？）
4. 我想以持久的方式存储令牌，以便我可以随时访问用户的日历

我设法通过react-google-login package 中的GoogleLogin完成了这项工作，它为您提供了一个可以在后端交换令牌的代码。 但是这个库最近已被弃用（当我尝试使用此按钮登录时，我收到此错误： idpiframe_initialization_failed ）。 我不知道如何使用这个库了。

这是我用来登录的代码：

<GoogleOAuthProvider clientId={"MY_CLIENT_ID"}>
       <GoogleLogin
            onSuccess={this.onSuccess}
            onFailure={this.onFailure}
       />
</GoogleOAuthProvider>;

这是我登录成功时得到的object：

{
   clientId: "MY_CLIENT_ID"
   credential: "JWT_string"
   select_by: "btn"
}

我不确定这是为了获取访问和刷新令牌以在后端使用的正确方法，或者是否有更好的方法来使用新的 Google 身份服务 SDK。

Answer 1

真是巧合，我目前正在写博客来解释 OIDC，OAuth。 和新的谷歌身份服务，不知何故我看到了这个问题。

让我先给出一个 TLDR 版本来解释不同的response_type 。

1. access_token和refresh_token是具有 response_type=token 的隐式流和具有 response_type=code 的授权代码流的一部分，如OIDC 1.0 核心规范中所定义。
2. JWT（包含在返回的 JSON object 来自 Google 服务器的“凭据”字段中）是具有 response_type=id_token 的隐式流。

如果您想使用不同的身份验证方法，这是一个小的演示链接。

我想从这个 JWT 中“提取”访问和刷新令牌（以某种方式对其进行解码？）

我不这么认为。 因为id_token从来就不是为了这个目的。

我想永久存储令牌，以便我可以随时访问用户的日历

我建议不要使用id_token ，因为您需要access_token和refresh_token 。 您可以考虑以下流程：

1. 使用带有response_type=code的授权代码流来获取code 。
2. 使用code通过向https://oauth2.googleapis.com/token发出 POST 请求来获取refresh_token 。 （响应也将包含 access_token。忽略它。）或者您也可以使用google-api-nodejs-client库。
3. 安全地存储刷新令牌。
4. 使用以下 BODY 向https://www.googleapis.com/oauth2/v4/token发出POST请求以获取access_token 。

{
    "grant_type": "refresh_token",
    "refresh_token": "YOUR_REFRESH_TOKEN",
    "client_id": "YOUR_VALUE.apps.googleusercontent.com",
    "client_secret": "YOUT_SECRET_VALUE"
}

如果有帮助，请告诉我。 干杯。