0

目标 -我正在使用angular 8 中的 @azure/msal-angular和msal库实现 azureAD 身份验证。

问题 -使用 pathlocationstrategy 时一切正常，但使用 hashlocationstrategy 时，@azure/msal-angular 库的回调没有被调用。

代码流 - 用户单击 HomeComponent 中的登录按钮 -> 用户被重定向到微软的登录页面 -> 用户输入凭据 -> 成功登录后，用户被重定向到msalLandingComponent主组件（在 appcomponent 的 routeroutlet 中呈现），其中回调（this._msalService .handleRedirectCallback) 应该执行。

代码

环境.ts

export const environment = {
  production: false,
  clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  authority: 'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxxxx/',
  redirectUrl: 'http://localhost:4200/#/msal-landing'  
};

还尝试将 redirectUrl 作为 http://localhost:4200/

应用程序路由.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent }

{ 路径：'msal-landing'，组件：MsalLandingComponent }

];

HomeComponent - 用户单击调用 onButtonClick() 的登录按钮

home.component.html

<input type="button" value="Login" (click)="onButtonClick()" />

home.component.ts

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private _msalService: MsalService) { }

  ngOnInit() {
    this._msalService.handleRedirectCallback((error,tokenInfo) => {
      
    });
  }  

 onButtonClick()
  {
      this._msalService.loginRedirect();
  }

}
MsalLandingComponent - 用户在成功登录时被重定向到该组件

msal-landing.component.ts

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-msal-landing',
  templateUrl: './msal-landing.component.html',
  styleUrls: ['./msal-landing.component.css']
})
export class MsalLandingComponent implements OnInit {

  constructor(private _msalService: MsalService) { }

  ngOnInit() {
    this._msalService.handleRedirectCallback((error,tokenInfo) => {
      
    });
  }  

}

问题描述

用于将用户重定向到微软的登录页面

onButtonClick()
  {
      this._msalService.loginRedirect();
  }

被调用，登录后用户被重定向到重定向 url，在 ngOnInit 下面的代码应该执行

 ngOnInit() {
    this._msalService.handleRedirectCallback((error,tokenInfo) => {
      
    });
  }

但是在使用 hashlocationstrategy 时不会调用此回调。

附加信息 我认为在应用注册期间无法在天蓝色中设置 redirectUrl。

因此，我们没有将重定向 url 设置为“http://localhost:4200/#/msal-landing”，而是将其设置为“http://localhost:4200/”。这样就调用了 home 组件。

我已经通过将 msal-landing.component.ts 的 ngOnInIt 移动到 home.component.ts 来更新上述代码，并删除了 MsalLandingComponent。

但在这种情况下，也不会调用 handleRedirectCallback。仅当将此代码放入 app.compnent.ts 的 ngOnInIt() 时才会调用它。无法理解为什么它在根组件中被调用，它是 appComponent 而不是在 homeComponent 中。

4

0 回答 0