auth0-angular

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Auth0 Angular Integration

Auth0 Angular 集成

Add authentication to Angular applications using @auth0/auth0-angular.

使用@auth0/auth0-angular为Angular应用添加认证功能。

Prerequisites

前置条件

Angular 13+ application
Auth0 account and application configured
If you don't have Auth0 set up yet, use the
```
auth0-quickstart
```
skill first

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

When NOT to Use

不适用于以下场景

AngularJS (1.x) - This SDK requires Angular 13+, use legacy solutions for AngularJS
Mobile applications - Use
```
auth0-react-native
```
for React Native or native SDKs for Ionic
Backend APIs - Use JWT validation middleware for your server language

AngularJS (1.x) - 该SDK要求Angular 13+，AngularJS请使用旧版解决方案
移动应用 - React Native请使用
```
auth0-react-native
```
，Ionic请使用原生SDK
后端API - 请为你的服务端语言使用JWT验证中间件

Quick Start Workflow

快速开始流程

1. Install SDK

1. 安装SDK

bash

npm install @auth0/auth0-angular

bash

npm install @auth0/auth0-angular

2. Configure Environment

2. 配置环境

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.

For manual setup:

Update

src/environments/environment.ts

typescript

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

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

手动设置：

Update

src/environments/environment.ts

typescript

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

3. Configure Auth Module

3. 配置Auth模块

For standalone components (Angular 14+):

Update

src/app/app.config.ts

typescript

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
    })
  ]
};

For NgModule-based apps:

Update

src/app/app.module.ts

typescript

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

独立组件（Angular 14+）：

更新

src/app/app.config.ts

typescript

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

typescript

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. Add Authentication UI

4. 添加认证UI

Update

src/app/app.component.ts

typescript

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 } });
  }
}

更新

src/app/app.component.ts

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>加载中...</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>欢迎回来，{{ user.name }}！</h2>
          <button (click)="logout()">登出</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="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. Test Authentication

5. 测试认证功能

Start your dev server and test the login flow:

bash

ng serve

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

bash

ng serve

Detailed Documentation

详细文档

Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
Integration Guide - Protected routes with guards, HTTP interceptors, error handling
API Reference - Complete SDK API, configuration options, services reference, testing strategies

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

Common Mistakes

常见错误

Mistake	Fix
Forgot to add redirect URI in Auth0 Dashboard	Add your application URL (e.g., `http://localhost:4200` , `https://app.example.com` ) to Allowed Callback URLs in Auth0 Dashboard
Not configuring AuthModule properly	Must call `AuthModule.forRoot()` in NgModule or `provideAuth0()` in standalone config
Accessing auth before initialization	Use `isLoading$` observable to wait for SDK initialization
Storing tokens manually	Never manually store tokens - SDK handles secure storage automatically
Missing HTTP interceptor	Use `authHttpInterceptorFn` or `AuthHttpInterceptor` to attach tokens to API calls
Route guard not protecting routes	Apply `AuthGuard` (or `authGuardFn` ) to protected routes in routing config

错误	修复方案
忘记在Auth0控制台添加重定向URI	将你的应用URL（例如 `http://localhost:4200` 、 `https://app.example.com` ）添加到Auth0控制台的“允许回调URL”中
AuthModule配置不正确	必须在NgModule中调用 `AuthModule.forRoot()` ，或在独立配置中调用 `provideAuth0()`
在初始化前访问认证服务	使用 `isLoading$` 可观察对象等待SDK初始化完成
手动存储令牌	切勿手动存储令牌 - SDK会自动处理安全存储
缺少HTTP拦截器	使用 `authHttpInterceptorFn` 或 `AuthHttpInterceptor` 将令牌附加到API请求中
路由守卫未保护路由	在路由配置中为受保护路由应用 `AuthGuard` （或 `authGuardFn` ）

Related Skills

Quick Reference

快速参考

Core Services:

```
AuthService
```
- Main authentication service
```
isAuthenticated$
```
- Observable check if user is logged in
```
user$
```
- Observable user profile information
```
loginWithRedirect()
```
- Initiate login
```
logout()
```
- Log out user
```
getAccessTokenSilently()
```
- Get access token for API calls

Common Use Cases:

Login/Logout buttons → See Step 4 above
Protected routes with guards → Integration Guide
HTTP interceptors for API calls → Integration Guide
Error handling → Integration Guide

核心服务：

```
AuthService
```
- 主要认证服务
```
isAuthenticated$
```
- 检查用户是否已登录的可观察对象
```
user$
```
- 用户资料信息的可观察对象
```
loginWithRedirect()
```
- 发起登录
```
logout()
```
- 登出用户
```
getAccessTokenSilently()
```
- 获取用于API调用的访问令牌

常见使用场景：

登录/登出按钮 → 请参见上方步骤4
使用守卫保护路由 → 集成指南
用于API调用的HTTP拦截器 → 集成指南
错误处理 → 集成指南

auth0-angular

Original

Translation

Auth0 Angular Integration

Auth0 Angular 集成

Prerequisites

前置条件

When NOT to Use

不适用于以下场景

Quick Start Workflow

快速开始流程

1. Install SDK

1. 安装SDK

2. Configure Environment

2. 配置环境

3. Configure Auth Module

3. 配置Auth模块

4. Add Authentication UI

4. 添加认证UI

5. Test Authentication

5. 测试认证功能

Detailed Documentation

详细文档

Common Mistakes

常见错误

Related Skills

相关技能

Quick Reference

快速参考

References

参考链接