Angular 11：Msal Angular V2 包中的问题

问题描述

我已将我的 angular 项目从 v8 升级到 v11。 我已将 @azure/msal-angular 包从 V1 升级到 V2（2.0.0-beta.3）。 我遵循了 https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app 上给出的示例。

在 Azure 门户上完成的配置在早期版本中运行良好。这是一个 SSO 应用程序，没有登录按钮。

1. 应用模块

   const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || 
    window.navigator.userAgent.indexOf("Trident/") > -1;  
   
    export function loggerCallback(logLevel: LogLevel,message: string) {
      console.log(message);
    }
   
    export function MSALInstanceFactory(): IPublicclientApplication {
     return new PublicclientApplication({
      auth: {
             clientId: environment.clientId,authority: 
             `https://login.microsoftonline.com/${environment.tenantName}`,redirectUri: environment.redirectUrl
            },cache: {
             cacheLocation: browserCacheLocation.LocalStorage,storeAuthStateInCookie: isIE,},system: {
      loggerOptions: {
                loggerCallback,logLevel: LogLevel.Info,piiLoggingEnabled: false
               }
         }
      });
    }
   
    export function MSALInterceptorConfigFactory(): 
     MsalInterceptorConfiguration {
        const protectedResourceMap = new Map<string,Array<string>>();
        protectedResourceMap.set(`${environment.clientId}`,[`${environment.scopeUrl}`]);
   
     return {
        interactionType: InteractionType.Redirect,protectedResourceMap
      };
    }
   
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
      return {
        interactionType: InteractionType.Redirect,authRequest: {
          scopes: [`${environment.scopeUrl}`]
       },};
     }
   
    providers: [
    {
      provide: HTTP_INTERCEPTORS,useClass: MsalInterceptor,multi: true
    },{
      provide: MSAL_INSTANCE,useFactory: MSALInstanceFactory
    },{
      provide: MSAL_GUARD_CONfig,useFactory: MSALGuardConfigFactory
    },{
      provide: MSAL_INTERCEPTOR_CONfig,useFactory: MSALInterceptorConfigFactory
    },

应用程序组件

ngOnInit(){

this.msalbroadcastService.inProgress$
  .pipe(
    filter((status: InteractionStatus) => status === InteractionStatus.None),takeuntil(this._destroying$)
  )
  .subscribe(() => {
    this.checkAccount();
  }); 
}



setLogindisplay() { 
    this.logindisplay = this.authService.instance.getAllAccounts().length > 0;

  }

  checkAccount() {
    this.loggedIn = this.authService.instance.getAllAccounts().length > 0;
  }

  checkAndSetActiveAccount() { 
    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  login() {
    if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
      if (this.msalGuardConfig.authRequest) {
        this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
          .subscribe((response: AuthenticationResult) => {
            this.authService.instance.setActiveAccount(response.account);
          });
      } else {
        this.authService.loginPopup()
          .subscribe((response: AuthenticationResult) => {
            this.authService.instance.setActiveAccount(response.account);
          });
      }
    } else {
      if (this.msalGuardConfig.authRequest) {
        this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
      } else {
        this.authService.loginRedirect();
      }
    }
  }

环境

scopeUrl: "api://xxxxxxx-xxxx-xxxx-a247-6023a95xxxxx/api",clientId: "b4f868f3-xxxx-xxxx-xxxx-4d44f053ff29",tenantName: "83993965-xxxx-xxxx-xxxx-d8259608fd30",scope: "user.read",appUrl: "http://localhost:4300/",location: "localStorage",graphUrl: "https://graph.microsoft.com/v1.0/me"

但是现在相同的配置不适用于升级后的 msal 包。 我收到以下错误

http 发布调用：

https://login.microsoftonline.com/83993965-e753-xxxx-xxxx-d825960xxxx/oauth2/v2.0/token

错误响应：

error_codes: [7000218]
error_description: "AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.
↵Trace ID: f0843107-bd57-4d08-b92e-15a873724e00
↵Correlation ID: 1764d345-xxxx-xxx-xxxx-20a9fda5bcb6
↵Timestamp: 2021-04-14 12:58:22Z"
error_uri: "https://login.microsoftonline.com/error?code=7000218"

感谢任何帮助

解决方法

如果您在 Angular 项目中从 msal V1 升级到 V2。您必须在 Azure AD 中执行相同操作。我删除了 Azure 目录中当前的 Azure APP Id，并按照下面 MS 文档中提到的过程为 MSAL 2.0 创建了一个新的 App ID。

注册 Azure AD 并设置 allowPublicClient= true https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration

注意：使用模板“单页应用程序”创建新的应用程序 ID。检查清单中 redirectUri 的类型是“Spa”而不是“Web”。如果存在“Web”，则将其删除。