node.js - 从 Google JWT 到使用 React 和 Node.js 访问和刷新 token

Question

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

1. 用户使用 @react-oauth/google 包中的 GoogleLogin 组件登录 google
2. 在用户登录并允许我的应用程序访问某些 Google API(例如 Google Calendar)后，我想将登录过程中生成的 JWT 发送到 Node.js 后端
3. 我想从此 JWT“提取”访问和刷新 token (以某种方式对其进行解码？)
4. 我想以持久的方式存储 token ，以便我可以随时访问用户的日历

我设法使用 react-google-login 包中的 GoogleLogin 完成了这项工作，它为您提供了一个可以在后端交换 token 的代码。但是这个库最近已被弃用(当我尝试使用此按钮登录时出现此错误:idpiframe_initialization_failed)。我不知道如何使用这个库。

这是我用来登录的代码:

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

这是我在登录成功时得到的对象:

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

我不确定这是获取访问和刷新 token 以在后端使用的正确方法，或者是否有使用新的 Google Identity Services SDK 的更好方法。

Answer 1

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

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

1. access_token 和 refresh_token 是Implicit Flow with response_type=token 和Authorization code flow with response_type=code 的一部分> 如 OIDC 1.0 Core spec 中所定义.
2. JWT(包含在从 Google 服务器返回的 JSON 对象的“凭据”字段中)是具有 response_type=id_token 的隐式流。

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

I want to "extract" access and refresh tokens from this JWT (decoding it in some way?)

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

I want to store the tokens persistently so that I can access the user's calendar whenever I want

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

1. 使用授权代码流和 response_type=code 获取代码。
2. 使用 code 通过向 https://oauth2.googleapis.com/token 发出 POST 请求来获取 refresh_token。 (响应也将包含 access_token。忽略它。)或者您也可以使用 google-api-nodejs-client图书馆。
3. 安全地存储刷新 token 。
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"
}

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