如何在 JavaScript 中使用 oidc-client 成功进行 oidc 身份验证后保存令牌？答案

【问题标题】：How to save token after successful oidc authentication using oidc-client in JavaScript?如何在 JavaScript 中使用 oidc-client 成功进行 oidc 身份验证后保存令牌？
【发布时间】：2022-01-10 12:57:41
【问题描述】：

您好，我正在尝试使用 oidc 和 oidc-client 库成功认证后检索 id_token。您可以在下面检查我的服务定义：

import Oidc from "oidc-client";

const config = {
  authority: process.env.VUE_APP_API_URL,
  client_id: process.env.VUE_APP_OAUTH_CLIENT_ID,
  redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL,
  response_type: process.env.VUE_APP_OAUTH_RESPONSE_TYPE,
  scope: process.env.VUE_APP_OAUTH_SCOPE,
  post_logout_redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL
};

const userManager = new Oidc.UserManager(config);

const service = {
  signIn() {
    userManager.signinRedirect();
  },
  signOut() {
    userManager.signoutRedirect();
  },
};

export default service;

身份验证过程后，我从 Google 重定向到此网址：

http://localhost:8080/#id_token=mytoken&scope=openid&state=mystate&session_state=mysessionstate

我想将检索到的令牌保存在本地存储中。我首先关心的是知道我应该从哪个地方获得令牌。我可以直接从 url 获取它，也可以使用 Oidc.UserManager。直觉说我应该从 userManager 那里得到它，但我很好奇两种解决方案的优缺点是什么。第二个问题是如何捕获重定向后触发的钩子？我的意思是，如果重定向 100% 完成，我想运行一些逻辑。我尝试使用“await”和“then”函数，但是 signinRedirect 似乎在重定向完成之前完成。我知道有一些名为 signinRedirectCallback 的函数，但是不知道如何使用它来 100% 确定它在重定向完成后运行。提前感谢您的帮助。问候。

【问题讨论】：

标签： javascript openid-connect

【解决方案1】：

你应该像this code of mine一样使用UserManager。

调用signInRedirectCallback
显示之后如何继续，例如更新 UI 状态

要理解的关键点是，您需要在 SPA 加载时检查 OIDC 响应。但只有当你检测到你有一个时才真正调用signInRedirectCallback。

我相信默认使用本地存储，但有一些选项可以覆盖它，如this other configuration。

【讨论】：