auth0-angular

用途

auth0-angular 用于向 Angular 单页应用（SPA）添加 Auth0 认证能力，基于官方 SDK @auth0/auth0-angular。它适合需要在 Angular 项目中实现登录、登出、受保护路由以及向 API 附带访问令牌的场景。

前置条件

Angular 13+ 应用
已配置的 Auth0 账号与应用
若尚未完成 Auth0 配置，资料建议先使用 auth0-quickstart 技能

不适用场景

AngularJS（1.x）：此 SDK 要求 Angular 13+，AngularJS 需使用旧方案
移动应用：React Native 使用 auth0-react-native，Ionic 使用原生 SDK
后端 API：应使用对应服务端语言的 JWT 校验中间件

主要能力

登录/登出：通过 loginWithRedirect() 和 logout() 实现
状态与用户信息：通过 isAuthenticated$、user$ 等 Observable 获取
路由守卫：可用 AuthGuard 或 authGuardFn 保护路由
HTTP 拦截器：可用 authHttpInterceptorFn 自动附加令牌，或用 getAccessTokenSilently() 手动获取
安全存储：SDK 自动处理令牌安全存储，无需手动保存

使用方式（快速流程）

安装 SDK：

npm install @auth0/auth0-angular

配置环境变量（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
    }
  }
};

配置认证模块。独立组件（Angular 14+）在 src/app/app.config.ts 中使用 provideAuth0()：

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 中使用 AuthModule.forRoot()：

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 {}

添加认证界面（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 } });
  }
}

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

ng serve

常见错误与修复

未在 Auth0 Dashboard 添加重定向 URI：将应用地址（如 http://localhost:4200、https://app.example.com）加入 Allowed Callback URLs
未正确配置 AuthModule：NgModule 中需调用 AuthModule.forRoot()，独立配置中需使用 provideAuth0()
在初始化前访问 auth：使用 isLoading$ observable 等待 SDK 初始化
手动存储令牌：不应手动存储，SDK 会自动安全存储
未向 API 发送令牌：使用 authHttpInterceptorFn 自动附加，或用 getAccessTokenSilently() 手动控制
路由守卫未保护路由：在路由配置中为受保护路由应用 AuthGuard 或 authGuardFn

快速参考

核心服务与常用成员：AuthService（主认证服务）、isAuthenticated$（是否已登录）、user$（用户资料）、loginWithRedirect()（发起登录）、logout()（登出）、getAccessTokenSilently()（手动获取访问令牌）。

更详细内容（自动化安装脚本、守卫与拦截器、错误处理、完整 API、测试策略等）见文档中的 Setup Guide、Integration Guide 与 API Reference。

限制

资料明确本 SDK 仅适用于 Angular 13+ 的 SPA，不适用于 AngularJS 1.x、移动应用和后端 API。关于收费、价格、具体版本号、平台支持范围等更多信息，资料中暂未提供。

技能介绍

用途