如何侦听 MSAL-Angular 令牌重新身份验证请求？

Question

因此，我的 Angular 项目中的 MSAL-ANGULAR 部件可以正常工作。 问题出在我将会话打开一段时间并且 MSAL 在令牌可能过期时向 Azure AD 调用重新身份验证请求时。 这会自动重定向到 Azure AD 进行验证，如果启动路径不是 Azure 中的注册路径，则会失败（例如 localhost:1000/登录会成功，但 localhost:1000/订单不会）。

理想情况下，我不必在 Azure AD 中指定每个路径排列，因此我认为我会拦截身份验证重定向，重定向到默认 URL，然后启动身份验证过程。 这是我最初的想法：

我认为身份验证层中的以下代码将为此设置一个钩子，即

import { MsalService, BroadcastService } from '@azure/msal-angular';

broadcast.subscribe("msal:loginSuccess",
  () => {
  ...
}
this.broadcast.subscribe("msal:loginFailure",
  () => {
  ...
});

但它看起来并没有击中那一块，而是挂钩在 app.routing 中：

import { MsalGuard } from "@azure/msal-angular";

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [MsalGuard] },
  { path: 'orders', component: OrdersComponent, canActivate: [MsalGuard] },
];

任何想法将不胜感激。

Answer 1

好吧，事实证明你可以破解系统——你需要做的就是在 Azure Active Directory 的清单中使用通配符。

IE

1/ 登录https://portal.azure.com

2/ 转到 Azure 活动目录

3/ 前往应用注册

4/ 选择你的应用

5/ 打开清单并设置以下内容：

"replyUrlsWithType": [
    {
        "url": "https://localhost:1000/*",
        "type": "Web"
    }
],

6/ 保存...然后瞧。 这会强制 Azure AD 接受来自该域的所有 URI

注意： Azure 门户会主动阻止通配符匹配...但您可以通过清单绕过它；）

Answer 2

我知道您已经解决了您的问题，但您的问题从未得到正确回答。 经过长时间的研究，我终于找到了一种监听 MSAL-Angular 令牌重新认证请求的正确方法。

下面的订阅监听每个 HTTP 请求并在您的 AccessToken 正确且未过期时发出事件，例如“msal:acquireTokenStart”。

如果您的 AccessToken 不正确并且确实过期了，则还有另一个事件使用 RefreshToken 从网络获取新的 AccessToken：“msal:acquireTokenFromNetworkStart”。

如果两个令牌都错误或被删除，则发出“msal:acquireTokenFailure”。 这些发射可用于例如重定向或注销用户。

 this.msalBroadcastService.msalSubject$.subscribe({
      next: (msalSubject) => {
        if (msalSubject.eventType === 'msal:acquireTokenFailure') {
          // Do something when acquiring of the token fails
        }
       }
      },
    });

上面的代码在 ngOnInit 里面。 不要忘记导入 MsalBroadcastService 并将其注入到构造函数中。