oidc-client登录后重定向

Question

我有一个 angular 2 正在运行的 asp.net 核心应用程序。我正在使用 oidc-client.js 库来处理登录。目前，如果用户已经登录并点击了指向站点的链接，那么身份验证会正确进行并且用户会被带到正确的页面。但是，如果他们没有登录，则可以正常返回到登录页面，返回带有正确 url 的站点，但最终被带到 /auth-callback 页面。那时，重定向 url 会丢失，并且在 auth-callback 之后它们会到达站点的默认路由。

我正在寻找的是 oidc-client 库中是否有任何选项可用于在 auth-callback 调用后保留正确的 url？翻阅文档和示例，没有什么让我感到惊讶。还是我必须自己把一些东西放在一起？

Answer 1

在您的客户端代码中，当您调用时，signinRedirect您可能会滥用 state 属性以及稍后使用的内容（这不是它的用途），例如new Oidc.UserManager().signinRedirect({state:window.location.href});.

然后在您的回调页面中，您可以使用它：

mgr
  .signinRedirectCallback()
  .then(function (user) {
    window.history.replaceState({}, window.document.title, window.location.origin + window.location.pathname);

    window.location = user.state || "/";
  });

Answer 2

那么，您必须在资产中创建一个单独的 html 页面来处理获取令牌并在登录重定向后存储它们

1. 在您的 openID 提供商上登录成功
2. 重定向到您的 html 静态页面
3. 例如，您的页面将获取令牌并将其存储在 localStorage 中
4. 当令牌准备好时，您的静态 html 页面将重定向到您的 Angular 应用程序根目录

您可以在/assets文件夹中创建redirect_page.html

  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.4.1/oidc-client.min.js"></script>
  <script>
   var config = {
    userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })
   };
   var mgr = new Oidc.UserManager(config);
   mgr.signinRedirectCallback().then(() => {
    window.history.replaceState({},
        window.document.title,
        window.location.origin);
        window.location = "/";
    }, error => {
    console.error(error);
   });

  </script>

并设置你的 userManager 配置

var config = {
  ...
  redirect_uri: `${clientRoot}/assets/redirect_page.html`,
}