Angular 8应用集成Azure SSO使用redirect登录方式报错如何解决

以下是经过验证可解决该问题的排查修复步骤：

• 校验Azure后台重定向URI配置：Azure AD应用注册页的重定向URI必须和代码内msalConfig配置项的redirectUri完全一致，协议、域名、端口、路径、末尾斜杠都要完全匹配，本地调试、预发、生产环境的不同重定向地址需要分别添加到Azure后台的允许列表中。
• 正确配置回调路由：redirect模式登录完成后Azure会跳转到指定回调地址，该地址对应的路由必须绑定MsalRedirectComponent，且不能给该路由添加自定义登录校验守卫，避免回调逻辑未完成就被二次重定向打断。
  路由配置参考代码：

  import { MsalRedirectComponent } from '@azure/msal-angular';
  
  const appRoutes: Routes = [
    // 其他业务路由
    {
      path: 'azure-sso-callback',
      component: MsalRedirectComponent
    }
  ];
  

• 手动处理redirect回调响应：在应用根组件或者回调组件的初始化逻辑中调用handleRedirectPromise()处理Azure返回的登录凭证，低版本msal-angular需要手动包裹Angular zone避免状态更新异常。
  回调处理参考代码：

  import { Component, NgZone, OnInit } from '@angular/core';
  import { MsalService } from '@azure/msal-angular';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    constructor(private msalService: MsalService, private ngZone: NgZone) {}
  
    ngOnInit(): void {
      this.msalService.handleRedirectPromise()
        .then(authResponse => {
          this.ngZone.run(() => {
            if (authResponse?.account) {
              this.msalService.instance.setActiveAccount(authResponse.account);
              // 补充登录成功后的业务逻辑
            }
          });
        })
        .catch(error => {
          console.error('SSO重定向回调处理失败: ', error);
        });
    }
  }
  

• 校验依赖包版本兼容：Angular 8仅适配1.x版本的@azure/msal-angular，使用2.x及以上版本会出现不可预期的redirect逻辑异常，可执行以下命令安装匹配版本：

  npm install @azure/msal-angular@1.1.2 @azure/msal-browser@2.38.0 --save
  

• 检查浏览器存储配置：redirect模式默认使用sessionStorage存储登录状态，不要将存储介质修改为跨域受限的localStorage，同时测试时关闭浏览器的第三方Cookie拦截规则，隐私模式下的存储限制也可能导致该问题。

内容的提问来源于stack exchange，提问作者userName27