Angular MSAL登出后重定向到Microsoft登录页面

Question

我目前正在学习Angular和MSAL，但无法弄清如何实现以下内容：

1. 当用户访问Web应用程序时，应该出现Microsoft登录（通过Azure AD）
2. 认证成功后，Web应用程序会出现
3. 当用户单击注销时，应注销用户
4. 注销后，应返回步骤1，因此他应再次看到Microsoft登录页面

这是我的app.module.ts文件中的内容:

    MsalModule.forRoot({
      auth: {
        clientId: '...', // This is your client ID
        authority: '...',
        // redirectUri: 'https://localhost:5001',
        postLogoutRedirectUri: '**<--THIS MAYBE? BUT WHAT URL DO I PUT HERE TO COME BACK TO THE MICROSOFT LOGIN PAGE??**'
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    }, {
      popUp: false,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        // ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],...

这是我的 app-routing.module.ts 文件：

const routes: Routes = [
  {
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
  }
];

我目前遇到的问题是：注销后，它将再次转到WebApp，然后重定向到MS登录页面。但我希望直接跳转到MS登录页面，这样用户在注销后就无法再看到WebApp的任何内容了。

我真正需要避免的是，如果用户未登录，则不允许他看到WebApp的任何内容。因此，我不想将其重定向到组件（因为那样会再次显示内容）。

- bbrinck

---

我遇到了这个确切的问题，你最终解决了吗？ - nilsi

Answer 1

我正在解决同样的问题。你需要做的是将一个页面设置为不受MsalGuard保护，并在注销后重定向到该页面。你必须定义完整的URL，如“http://localhost:4200/logout-page”。当您注销时，您将被重定向到MS页面，在那里您可以注销您的帐户，然后您将被重定向到未受保护的注销页。其他受保护的页面将立即重定向您到MS登录页面。

MsalModule.forRoot({
  auth: {
    clientId: '...', // This is your client ID
    authority: '...',
    // redirectUri: 'https://localhost:5001',
    postLogoutRedirectUri: window.location.protocol + '//' + window.location.host + '/logout-page'
  },
... rest of your configuration
}

... 这是您的新路由...

const routes: Routes = [
{
    path: '', canActivate: [MsalGuard], children: [
      {path: '', component: HomeComponent},
      {path: 'home', component: HomeComponent},
      {path: 'tools', component: ToolsComponent}
    ]
}, {
    path: 'lougout-page',
    component: LogoutPageComponent // This is your new component
}
];

实际上，你应该让你的主页无保护，并在注销后重定向到它。但是当应用程序加载时，你将失去自动重定向到登录。但是这应该由简单的 Guard 覆盖，在那里你将检查 MsalService 帐户并根据结果决定是否重定向。

- CamelD

Answer 2

您需要通过组件或服务调用 '@azure/msal-angular' 的 MsalService 中的 logout 方法。请参考下面的代码。

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

constructor(
    private msalService: MsalService
) { }

onLogout(){
    this.msalService.logout();
}

- rockey91

Answer 3

在你的 app.component.ts 文件中，添加一个函数来检查是否有已登录的用户 - 类似这样的代码：

get authenticated(): boolean {
   return this.msalService.instance.getActiveAccount() ? true : false;
}

然后，在您的onInit函数中，检查身份验证状态，并在其为false时调用MSAL登录 - 用户将被重定向到登录页面，最初和注销时都会触发登录流程。

ngOnInit() {    
   if (!this.authenticated) {
      this.msalService.instance.loginRedirect();
   }
}

- Venator

---

这在以下情况下非常有效：a）您有相对稳定的互联网连接，并且b）您不使用3G、4G或5G互联网。在Chrome检查网络选项卡中，将浏览器设置为慢速3G。您可以通过这种方式复制问题。但是，如果用户已经进行了身份验证，但由于网络不佳，此时this.authenticated()还没有得到消息，则会出现问题。因此，用户被发送回登录页面。一遍又一遍地重复。您需要循环每秒检查一次是否准备好进行身份验证。仅在大约10秒钟后再返回到登录页面。 - JackT

Answer 4

有些人提到了一些观点，但我想要补充我的情况。原帖说他们不想在自己的网络应用程序中进行重定向，而实际上并不需要这样做，但我认为这是一个好习惯。因为用户可能需要几秒钟才能真正退出登录，所以至少要通知用户他们正在被注销。

因此，如果你真的希望立即返回 Azure 的登录页面（而不必等待注销端点的成功），我建议使用以下方法：

this.msalService.logout();
this.msalService.instance.loginRedirect();

这将处理注销，但也会直接将他们弹出到登录页面。然而，可能会出现一些奇怪的问题，特别是如果在注销时出现错误，请务必彻底测试。

编辑：我个人没有测试过这个，因为我重定向到了一个注销组件，但除非有什么古怪的地方，否则这似乎是可行的。

- workaholic

---

另外提一下，我刚刚解决了一个注销登录被取消的问题。由于我们从一个错误状态发送azure令牌信息到后端终点，因此Msal拦截器在注销请求之后立即发出了一个令牌请求，导致注销请求被取消。所以请注意这类小问题。 - workaholic