认证:集成共享用户上下文
本文档概述了在应用程序消费者体中使用 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 步:注册应用程序
- 访问 Auth0 的管理仪表板 并注册你的单页面应用程序 (SPA)。
- 记下注册后提供的
domain
和 clientId
。
- 将你的应用程序 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_DOMAIN
和 YOUR_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 应用程序的微前端之间实现无缝的认证状态共享。这种设置不仅简化了用户上下文的管理,而且通过在应用程序的模块化组件之间保持一致的认证状态,还增强了整体的用户体验。