认证:集成共享用户上下文

本文档概述了在应用程序消费者体中使用 Auth0 和 Angular 跨微前端共享身份验证状态(例如当前用户上下文)的过程。

概述

在微前端架构中,通常会有跨应用程序的不同部分共享上下文信息(如当前用户的资料)的需求。本文档描述了如何使用 @auth0/auth0-angular 实现无缝的身份验证状态共享,这是一个方便与 Auth0(身份管理提供商)集成的软件包。

前提条件

在继续之前,请确保你已经拥有:

  • 对 Angular 和微前端概念的基本了解。
  • Auth0 账户以及在 Auth0 的管理仪表板 上注册的 Web 应用程序。
  • 已设置 Module Federation 的 Angular 应用程序。

逐步指南

第 1 步:安装 Auth0 包

通过 npm 安装 @auth0/auth0-angular,以便在你的 Angular 应用程序中使用 Auth0 进行认证:

npm i @auth0/auth0-angular

第 2 步:注册应用程序

  1. 访问 Auth0 的管理仪表板 并注册你的单页面应用程序 (SPA)。
  2. 记下注册后提供的 domainclientId
  3. 将你的应用程序 URL(例如,http://localhost:4200)添加到允许的回调 URL 部分。

第 3 步:导入 AuthModule

@auth0/auth0-angular 导入 AuthModule 到消费者应用程序和微前端(一个或多个)的 AppModule 中。

app.module.ts
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: 'YOUR_AUTH0_DOMAIN',
      clientId: 'YOUR_AUTH0_CLIENT_ID'
    }),
    // other imports...
  ],
  // other module properties...
})
export class AppModule { }

替换 YOUR_AUTH0_DOMAINYOUR_AUTH0_CLIENT_ID 为从你的 Auth0 应用程序设置中获取的实际值。

第 4 步:实现登录功能

在你的消费者应用程序中,使用 AuthService 来实现登录功能。

projects/shell/src/app/home/home.component.ts
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  user$ = this.auth.user$;

  constructor(private auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }
}

第 5 步:显示用户信息

在消费者应用程序的主页组件中,显示已登录用户的名称。

projects/shell/src/app/home/home.component.html
<h1>Welcome!</h1>

<p *ngIf="user$ | async as user">
    User: {{user.name}}
</p>

<div>
    <button (click)="login()" mat-flat-button color="primary">Login</button>
</div>

第 6 步:在微前端中使用 AuthService

在你的微前端组件中,同样可以使用 AuthService 来访问当前用户的信息。

address.component.ts
import { AuthService } from '@auth0/auth0-angular';
import { FormBuilder } from '@angular/forms';
import { take } from 'rxjs/operators';

@Component({
  // component metadata...
})
export class AddressComponent {
  // component properties...
  constructor(
    private auth: AuthService,
    private fb: FormBuilder) {
    this.auth.user$.pipe(take(1)).subscribe(user => {
      if (!user) return;
      // Use user information to pre-fill form, etc.
    });
  }
  // other component methods...
}

第 7 步:为共享认证配置模块联邦

确保 @auth0/auth0-angular 包在你的消费者应用程序和微前端之间共享,以维护单一的认证状态。

// In webpack.config.js of both shell and micro frontends

module.exports = {
  // existing configuration...
  shared: share({
    "@auth0/auth0-angular": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    // other shared packages...
  })
};

这种配置确保了 AuthService 的单一实例在整个应用程序中被使用,便于实现共享的认证状态。

结论

遵循这些步骤,你可以在 Angular 应用程序的微前端之间实现无缝的认证状态共享。这种设置不仅简化了用户上下文的管理,而且通过在应用程序的模块化组件之间保持一致的认证状态,还增强了整体的用户体验。