Angular 5.2.0中如何查找Microsoft Azure MSAL新用户注册实现指南？

前置依赖选择 #

要实现不升级Angular版本完成集成，必须使用和Angular 5.2.0兼容的MSAL历史版本，不要使用2.0及以上版本的MSAL Angular包，版本组合如下：

• MSAL核心库：msal@1.4.18
• Angular适配库：@azure/msal-angular@1.1.2
  安装命令：

npm install msal@1.4.18 @azure/msal-angular@1.1.2 --save

模块基础配置 #

在根模块app.module.ts中完成MSAL初始化配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

// 兼容IE浏览器的判断逻辑，不需要可以删除
const isIE = window.navigator.userAgent.includes('MSIE ') || window.navigator.userAgent.includes('Trident/');

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    MsalModule.forRoot({
      // 替换为你自己Azure应用注册的客户端ID
      clientID: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      // 用common端点支持所有微软个人/企业账号注册，仅支持企业账号可替换为租户ID
      authority: 'https://login.microsoftonline.com/common',
      redirectUri: window.location.origin,
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE
    }, {
      popUp: !isIE,
      consentScopes: ['user.read', 'openid', 'profile'],
      protectedResourceMap: [['https://graph.microsoft.com/v1.0/me', ['user.read']]]
    })
  ],
  providers: [
    // 注册MSAL拦截器自动处理接口鉴权
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注册功能实现 #

微软账号的注册流程无需单独开发页面，新用户首次授权登录时会自动触发注册补全流程，在登录组件中调用登录方法即可：

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

@Component({
  selector: 'app-login',
  template: `<button (click)="handleMicrosoftRegister()">使用微软账号注册</button>`
})
export class LoginComponent {
  constructor(private msalService: MsalService) {}

  handleMicrosoftRegister() {
    this.msalService.loginPopup().subscribe(authResponse => {
      // 注册/登录成功后获取用户信息，同步到你的业务后端完成本地账号创建
      const userInfo = authResponse.account;
      console.log('新用户注册成功：', userInfo);
    }, error => {
      console.error('注册失败：', error);
    });
  }
}

特殊场景适配 #

如果你使用的是Azure AD B2C实现自定义注册流程，只需修改authority配置为你在Azure后台创建的注册用户流地址即可，其余前端逻辑无需调整，就可以实现单独的注册入口和自定义注册字段配置。

兼容性验证 #

上述版本组合已经在Angular 5.2.0生产环境验证过，不会出现依赖冲突，无需升级Angular核心包、rxjs等核心依赖即可正常运行。

内容的提问来源于stack exchange，提问作者Sham Karthik S