auth0-angular

Auth0 Angular 集成

使用 @auth0/auth0-angular 为 Angular 应用添加身份验证。

---

前置条件

• Angular 13+ 应用
• 已配置的 Auth0 账户和应用
• 如果尚未设置 Auth0，请先使用 auth0-quickstart 技能

不适用场景

• AngularJS（1.x）——此 SDK 需要 Angular 13+，AngularJS 请使用旧版解决方案
• 移动应用——React Native 请使用 auth0-react-native，Ionic 请使用原生 SDK
• 后端 API——请使用适用于服务器语言的 JWT 验证中间件

---

快速入门工作流

1. 安装 SDK

npm install @auth0/auth0-angular

2. 配置环境

使用 Auth0 CLI 自动设置，请参阅设置指南，获取完整脚本。

手动设置：

更新 src/environments/environment.ts：

export const environment = {
  production: false,
  auth0: {
    domain: 'your-tenant.auth0.com',
    clientId: 'your-client-id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  }
};

3. 配置身份验证模块

对于独立组件（Angular 14+）：

更新 src/app/app.config.ts：

import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
};

对于基于 NgModule 的应用：

更新 src/app/app.module.ts：

import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
})
export class AppModule {}

4. 添加身份验证 UI

更新 src/app/app.component.ts：

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>Loading...</p>
    </div>

    <ng-template #loaded>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <div *ngIf="auth.user$ | async as user">
          <img [src]="user.picture" [alt]="user.name" />
          <h2>Welcome, {{ user.name }}!</h2>
          <button (click)="logout()">Logout</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="login()">Login</button>
      </ng-template>
    </ng-template>
  `
})
export class AppComponent {
  constructor(public auth: AuthService) {}

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

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. 测试身份验证

启动开发服务器并测试登录流程：

ng serve

---

详细文档

• 设置指南——自动设置脚本（Bash/PowerShell）、CLI 命令和手动配置
• 集成指南——使用守卫保护路由、HTTP 拦截器和错误处理
• API 参考——完整的 SDK API、配置选项、服务参考和测试策略

---

常见错误

错误	修正方法
忘记在 Auth0 Dashboard 中添加重定向 URI	在 Auth0 Dashboard 的 Allowed Callback URLs 中添加应用 URL（例如，http://localhost:4200、https://app.example.com）
未正确配置 AuthModule	必须在 NgModule 中调用 AuthModule.forRoot()，或在独立配置中调用 provideAuth0()
初始化完成前访问身份验证信息	使用 isLoading$ 可观察对象等待 SDK 初始化
手动存储令牌	切勿手动存储令牌——SDK 会自动安全地处理存储
未向 API 发送令牌	使用 authHttpInterceptorFn 自动附加令牌，或使用 getAccessTokenSilently() 手动控制——请参阅集成指南
路由守卫未保护路由	在路由配置中为受保护的路由应用 AuthGuard（或 authGuardFn）

---

相关技能

• auth0-quickstart - Auth0 基本设置
• auth0-migration - 从其他身份验证提供商迁移
• auth0-mfa - 添加多重身份验证
• auth0-cli - 在终端中管理 Auth0 资源

---

快速参考

核心服务：

• AuthService - 主要身份验证服务
• isAuthenticated$ - 检查用户是否已登录的可观察对象
• user$ - 用户个人资料信息的可观察对象
• loginWithRedirect() - 发起登录
• logout() - 退出用户登录
• getAccessTokenSilently() - 手动获取访问令牌（HTTP 拦截器的替代方案）

常见用例：

• 登录/退出按钮 → 请参阅上方的第 4 步
• 使用守卫保护路由 → 集成指南
• 调用受保护的 API → 集成指南
• 错误处理 → 集成指南

---

参考资料

• Auth0 Angular SDK 文档
• Auth0 Angular 快速入门
• SDK GitHub 仓库