# @descope/angular-sdk 中文文档

规范地址：https://npmcn.com/package/%40descope/angular-sdk/

版本：0\.29\.1
npm 元数据更新时间：2026-11-08T15:40:08.563Z
中文译文更新时间：2026-11-12T00:56:44.354Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40descope/angular-sdk
原文对照：https://npmcn.com/package/%40descope/angular-sdk/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：234 kB，26 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：@angular/core \>=16\.0\.0，@angular/common \>=16\.0\.0
- 首次发布：2023-12-26T13:55:05.343Z
- 最新版本发布：2026-11-08T15:40:08.409Z
- 近 30 天下载量：19199（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：480（近 12 个月 183 个）

## 中文简介

用于Angular的Descope SDK为Angular上方撰写的应用程序提供了方便的Descope访问. 你可以读更多关于 [望远镜网站](https://descope.com/)。 。 。 .

## 安装

```sh
npm install @descope/angular-sdk
```

也可以使用：`pnpm add @descope/angular-sdk`、`yarn add @descope/angular-sdk`、`bun add @descope/angular-sdk`

## README

# Angular 的 SDK 望远镜

用于Angular的Descope SDK为Angular上方撰写的应用程序提供了方便的Descope访问. 你可以读更多关于 [望远镜网站](https://descope.com/)。 。 。 .

## 所需资源

-   SDK支持Angular版本16及以上.
-   望远镜 `Project ID` 用于使用SDK。 硂т [descope 控制台中的项目页面](https://app.descope.com/settings/project)。 。 。 .

## 安装 SDK

以 :

```bash
npm i --save @descope/angular-sdk
```

向您添加查看镜类型定义 `tsconfig.ts`

```
  "compilerOptions": {
    "typeRoots": ["./node_modules/@descope"],
    <other options>
  }
```

## 使用量

### NgModule - 导入 `DescopeAuthModule` 您的应用程序

`app.module.ts`

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { DescopeAuthModule } from '@descope/angular-sdk';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: '<your_project_id>'
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

### 独立模式 - 为您的应用程序配置 Descope SDK

`main.ts`

```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { DescopeAuthConfig } from '@descope/angular-sdk';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: DescopeAuthConfig, useValue: { projectId: '<your_project_id>' } }
  ]
}).catch((err) => console.error(err));
```

### 使用演示镜来渲染特定流

你用得着 **默认流量** 或者说 **提供流量 id** 直接到分镜组件

#### 1\. 默认流量

`app.component.html`

```angular2html
<descope-sign-in-flow
        (success)="onSuccess($event)"
        (error)="onError($event)"
        (ready)="onReady()"
></descope-sign-in-flow>
<!-- Optionally, you can show/hide loading indication until the flow page is ready -->
<div
  *ngIf="isLoading"
  class="loading-indicator"
  style="display: flex; justify-content: center; align-items: center;"
>
  Loading...
</div>
```

`app.component.ts`

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // Optionally, you can show/hide loading indication until the flow page is ready
  // See usage in onReady() method and the html template
  isLoading = true;

  onSuccess(e: CustomEvent) {
    console.log('SUCCESSFULLY LOGGED IN', e.detail);
  }

  onError(e: CustomEvent) {
    console.log('ERROR FROM LOG IN FLOW', e.detail);
  }

  onReady() {
    this.isLoading = false;
  }
}
```

#### 2\. 提供流量标识

```angular2html
<descope
     flowId="<your_flow_id>"
     (success)="<your_success_function>"
     (error)="<your_error_function>"
<!-- theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light"
     theme="dark"

     locale can be any supported locale which the flow's screen translated to, if not provided, the locale is taken from the browser's locale.
     locale="en"

     debug can be set to true to enable debug mode
     debug="true"

     tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant
     tenant=<tenantId>

     Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user)
     redirectUrl=<redirectUrl>

     telemetryKey=<telemtry_key>

     autoFocus can be true, false or "skipFirstScreen". Default is true.
     - true: automatically focus on the first input of each screen
     - false: do not automatically focus on screen's inputs
     - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
     autoFocus="skipFirstScreen"

    validateOnBlur can be true or false. Default is false.
     - true: Trigger input validation upon blur, in addition to the validation on submit
     - false: do not trigger input validation upon blur

    restartOnError can be true or false. Default is false.
     - true: In case of flow version mismatch, will restart the flow if the components version was not changed
     - false: Will not auto restart the flow in case of a flow version mismatch

     errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
     NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
     Example:
     errorTransformer = (error: { text: string; type: string }): string => {
         const translationMap: { [key: string]: string } = {
             SAMLStartFailed: 'Failed to start SAML flow'
         };
         return translationMap[error.type] || error.text;
     };
     ...
     errorTransformer={errorTransformer}

    form is an object the initial form context that is used in screens inputs in the flow execution.
    Used to inject predefined input values on flow start such as custom inputs, custom attributes and other inputs.
    Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.".
    NOTE: form is not required. If not provided, 'form' context key will be empty before user input.
    Example:
    form={{ email: "predefinedname@domain.com",  firstName: "test", "customAttribute.test": "aaaa", "myCustomInput": 12 }}

    client is an object the initial client context in the flow execution.
    Keys passed can be accessed in flows actions and conditions prefixed with "client.".
    NOTE: client is not required. If not provided, context key will be empty.
    Example:
    client={{ version: "1.2.0" }}

    Use a custom style name or keep empty to use the default style.
    styleId="my-awesome-style"

    Set a CSP nonce that will be used for style and script tags.
    nonce="rAnd0m"

    Sets the expected origin for OAuth popup communication when redirect URL is on different origin than the main application. Required for cross-origin OAuth popup flows.
    popupOrigin="https://auth.example.com"

    Clear screen error message on user input.
    dismissScreenErrorOnInput=true

     logger is an object describing how to log info, warn and errors.
     NOTE: logger is not required. If not provided, the logs will be printed to the console.
     Example:
     const logger = {
        info: (title: string, description: string, state: any) => {
          console.log(title, description, JSON.stringify(state));
      },
        warn: (title: string, description: string) => {
          console.warn(title);
      },
        error: (title: string, description: string) => {
          console.error('OH NOO');
      },
     }
     ...
     logger={logger}-->
></descope>
```

### `onScreenUpdate`

当出现新屏幕状态时, 并在每次呼叫后, 都会调用此功能 。 它得到以下参数:

-   `screenName`: 即将渲染的屏幕名称
-   `context`: 包含即将到来的屏幕上下文的对象。 所有服务器制作的屏幕数据都生活在 `context.data`。 。 。 .
-   `next`: 当调用时继续流执行的函数
-   `ref`: 提及去镜-wc节点

该函数可以是同步或async,并且应当返回布尔表示是否应该渲染自定义屏幕:

-   `true`: 渲染自定义屏幕
-   `false`: 渲染默认流程屏幕

> **正在中断更改( v- next) :** 服务器生成的用于直接显示的屏幕数据 `context` 现在生活在 **`context.data`** - 比如说. `context.totp` → `context.data.totp`, (中文(简体) ), `context.inboundAppApproveScopes` → `context.data.inboundAppApproveScopes`现状, `form`,和身份字段(`user` 编号 : `project` 编号 : `lastAuth`)住顶上. 见 [@ descope/ web- 组件 README](https://www.npmjs.com/package/@descope/web-component#the-context-object) 完整清单 `context.data` 字段.

此功能允许渲染自定义屏幕而不是默认的流程屏幕. 对于高度定制化的 UI 或默认屏幕未覆盖的特定逻辑来说,它可能有用

为了制作自定义屏幕,其内容应作为儿童随附 `descope` 组件

用法示例:

```javascript
function onScreenUpdate(screenName, context, next, ref) {
  if (screenName === 'My Custom Screen') {
    return true;
  }

  return false;
}
```

#### 独立模式

Sdk中的所有组件都是独立的,因此可以通过直接导入到您的组件来使用.

### 使用 `DescopeAuthService` 及其已曝光的字段`descopeSdk`, (中文(简体) ), `session$`, (中文(简体) ), `user$`访问认证状态、用户细节和公用事业

这可能有助于实施应用程序特定逻辑. 实例:

-   如果当前会话被认证, 将不同组件渲染
-   渲染用户内容
-   注销按钮

`app.component.html`

```angular2html
<p *ngIf="!isAuthenticated"> You are not logged in</p>
<button *ngIf="isAuthenticated" (click)="logout()">LOGOUT</button>
<p>User: {{userName}}</p>
```

`app.component.ts`

```ts
import { Component, OnInit } from '@angular/core';
import { DescopeAuthService } from '@descope/angular-sdk';

@Component({
  selector: 'app-home',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  isAuthenticated: boolean = false;
  userName: string = '';
  claims?: Claims;

  constructor(private authService: DescopeAuthService) {}

  ngOnInit() {
    this.authService.session$.subscribe((session) => {
      this.isAuthenticated = session.isAuthenticated;
      this.claims = session.claims;
    });
    this.authService.user$.subscribe((descopeUser) => {
      if (descopeUser.user) {
        this.userName = descopeUser.user.name ?? '';
      }
    });
  }

  logout() {
    this.authService.descopeSdk.logout();
  }
}
```

### 会话刷新

`DescopeAuthService` 提供 `refreshSession` 财务报告和审定财务报表 `refreshUser` 方法,可以触发对Descope后端的单一请求,试图刷新会话或用户。 您需要刷新会话/ 用户时可以使用 。 例如,你可以使用 `APP_INITIALIZER` 提供方试图刷新每页的会话和用户刷新 :

`app.module.ts`

```ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DescopeAuthModule, DescopeAuthService } from '@descope/angular-sdk';
import { zip } from 'rxjs';

export function initializeApp(authService: DescopeAuthService) {
  return () => zip([authService.refreshSession(), authService.refreshUser()]);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: '<your_project_id>'
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [DescopeAuthService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

#### 独立模式注释 :

你可以用同样的方法 `APP_INITIALIZER` 在独立模式下,将其添加到 `providers` 程序数组.

### 望远镜截取器

您还可以使用 `DescopeInterceptor` 尝试在 HTTP 请求中刷新会话 `401` 或者说 `403` 回应 :

`app.module.ts`

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {
  HttpClientModule,
  provideHttpClient,
  withInterceptors
} from '@angular/common/http';
import { DescopeAuthModule, descopeInterceptor } from '@descope/angular-sdk';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    DescopeAuthModule.forRoot({
      projectId: '<your_project_id>',
      pathsToIntercept: ['/protectedPath']
    })
  ],
  providers: [provideHttpClient(withInterceptors([descopeInterceptor]))],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

`DescopeInterceptor`数字 :

-   为 urls 包含其中之一的请求而配置 `pathsToIntercept`. 如果不提供,它将用于所有请求.
-   附加会话符号为 `Authorization` 页眉在 `Bearer <token>` 格式
-   如果请求得到回复 `401` 或者说 `403` 它会自动尝试刷新会话
-   如果刷新尝试成功, 它会自动重试原请求, 否则会因原错误而失败

**对于更多的 SDK 使用示例参考 [文档](https://docs.descope.com/build/guides/client_sdks/)**

### 会话令牌服务器验证( 通过会话令牌到服务器 API)

开发全存储应用程序时,通常会拥有需要有效会话符的私人服务器API:

![session-token-validation-diagram](https://docs.descope.com/static/SessionValidation-cf7b2d5d26594f96421d894273a713d8.png)

注:Descope还提供各种语言(NodeJS,Go,Python等)的服务器侧SDK. Descope的服务器SDKs有外出会话验证API,支持所描述的bellow选项. 欲了解更多会话验证,请读 [本节](https://docs.descope.com/build/guides/gettingstarted/#session-validation) 用于演示文稿文档.

通过使用 `DescopeInterceptor` 或手动添加令牌到您的请求中( 即使用 `DescopeAuthService.getSessionToken()` 帮助函数)

### 帮助函数

您还可以使用下列帮助方法: `DescopeAuthService` - 协助实施各种管理你的JWT的行动.

-   `getSessionToken()` - 获取当前会话符号.
-   `getRefreshToken()` - 获取当前刷新标志。 注:只有在刷新令牌存储于本地存储时才相关. 如果刷新符号存储在 `httpOnly` 饼干,它会返回一个空弦.
-   `isAuthenticated()` - 返回用户是否被认证布尔
-   `refreshSession` - 使用现有的有效刷新符号强制更新当前会话符号.
-   `refreshUser` - 使用现有的有效刷新令牌对当前用户强制更新.
-   `isSessionTokenExpired(token = getSessionToken())` - 检查当前会话符号是否过期 。 如果不坚持, 则提供会话符号 .
-   `isRefreshTokenExpired(token = getRefreshToken())` - 检查当前刷新符号是否过期 。 如果不坚持,则提供更新信号.
-   `getJwtRoles(token = getSessionToken(), tenant = '')` - 从现有的会话符号中获取当前角色。 提供特定租户身份证明.
-   `getJwtPermissions(token = getSessionToken(), tenant = '')` - 从现有会话符中选择当前权限。 为特定租户提供租户身份证明.
-   `getCurrentTenant(token = getSessionToken())` - 从现有的会话代号(来自 `dct` 索赔要求).

### 刷新符号生命周期

扫描器 SDK 将自动刷新即将到期的会话符号 。 这是在背景中使用刷新符号完成的,没有附加任何配置.

如果配置了Descope项目设置, 以管理 cookie 中的令牌 . 您还必须配置自定义域,并将其设置为 `baseUrl` 内 `DescopeAuthModule`。 。 。 .

### 自动刷新会话符号

扫描器 SDK 会在会话符号即将到期时自动刷新它 。 这是在背景中使用刷新符号完成的,没有附加任何配置. 如果你想禁用这种行为,你可以通过 `autoRefresh: false` 页:1 `DescopeAuthModule` 模块。 这将阻止 SDK 自动刷新会话符号 .

#### NgModule 示例 :

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DescopeAuthModule } from '@descope/angular-sdk';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: '<your_project_id>',
      autoRefresh: false
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

#### 独立模式示例 :

```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { DescopeAuthConfig } from '@descope/angular-sdk';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DescopeAuthConfig,
      useValue: {
        projectId: '<your_project_id>',
        autoRefresh: false
      }
    }
  ]
}).catch((err) => console.error(err));
```

### 望远镜警卫

`angular-sdk` 为未认证的用户提供方便的路由守护,防止其访问指定路由:

```ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProtectedComponent } from './protected/protected.component';
import { descopeAuthGuard } from '@descope/angular-sdk';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: 'step-up',
    component: ProtectedComponent,
    canActivate: [descopeAuthGuard],
    data: { descopeFallbackUrl: '/' }
  },
  { path: 'login', component: LoginComponent },
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

如果不经过认证的用户尝试访问受保护的路由,他们将被重定向到 `descopeFallbackUrl`

### 坚韧不拔

Descope存储了两个符号:会话符号和刷新符号.

-   刷新令牌或存储在本地存储中,或 `httpOnly` 饼干 这是可配置的 在Descope控制台.
-   会话代号被存储在本地存储或JS饼干中. 这种行为可以通过 `sessionTokenViaCookie` 道具装入 `DescopeAuthModule` 模块.

然而,出于安全考虑,您可以选择不在浏览器中存储令牌. 在这种情况下,你可以通过 `persistTokens: false` 页:1 `DescopeAuthModule` 模块。 这使得SDK无法在浏览器中存储符.

注释:

-   您必须配置要存储在 `httpOnly` 德望台的饼干 否则,刷新令牌将不会被存储,当页面被刷新后,用户会被登录出.
-   您仍然可以使用 `session` 观测到 `DescopeAuthService`。 。 。 .
-   会话符号饼干设定为 [`SameSite=Strict; Secure;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) 默认. 如果您需要自定义, 您可以设置 `sessionTokenViaCookie={sameSite: 'Lax', secure: false, cookieName: 'MY_COOKIE'}`。 。 。 .
    -   `sameSite` (默认 : `Strict`) – 控制会话饼干的SameSite属性.
    -   `secure` (默认 : `true`) – 如果真实, 将饼干设定为安全( 仅通过 HTTPS) .
    -   `cookieName` (默认 : `DS`) – 会话符号饼干的名称. 用于在同一域上运行多个Descope项目时避免冲突.
    -   `domain` (默认:自动检测) - 会话符号饼干的域名 。 如果没有指定,请使用来自Descope项目设置或当前域的域.

### 最后用户持久性

Descope将最后一个用户信息存储在本地存储中. 如果您想要禁用此特性, 您可以通过 `storeLastAuthenticatedUser: false` 页:1 `DescopeAuthModule` 模块。 请注意,如果这种行为被禁用,与最后认证用户相关的一些功能可能无法如预期的那样运行.

### 部件

部件是允许您曝光基于租户执行的管理特性的组件. 在某些情况下,您的客户可能需要独立执行管理行动的能力,从而减轻与您联系的必要性。 部件是一个功能,使您能够以模块化的方式将这些能力委托给客户.

重要说明:

-   要让用户能够使用部件,需要指定 `Tenant Admin` 作用.

所有部件组件接受可选 `locale` 输入。 它可以是任何支持的部件屏幕被翻译到的地方;如果不提供,则取自浏览器的地方.

```html
<user-management
  tenant="tenant-id"
  widgetId="user-management-widget"
  locale="en"
/>
```

#### 用户管理

这个 `UserManagement` 部件将允许您在您的网站上嵌入一个用户表以查看并采取行动 .

部件让你:

-   创建新用户
-   编辑已有的用户
-   激活/ 禁用已有用户
-   重置现有用户密码
-   删除已有用户的密码
-   删除已有的用户

说明:

-   自定义字段也出现在表格中.

###### 使用量

```html
<user-management tenant="tenant-id" widgetId="user-management-widget" />
```

示例 [管理用户](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/manage-users/manage-users.component.html)

#### 角色管理

这个 `RoleManagement` 部件会让您在您的站点内嵌入一个角色表以查看并采取行动 .

部件让你:

-   创建新角色
-   改变现有角色的字段
-   删除现有角色

说明:

-   这个 `Editable` 字段是由用户对角色的访问决定的 - 意思是项目级角色不能被租户级用户编辑.
-   您需要预先定义用户可以使用的权限, 这些权限不能在部件中编辑 .

###### 使用量

```html
<role-management tenant="tenant-id" widgetId="role-management-widget" />
```

示例 [管理角色](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/manage-roles/manage-roles.component.html)

#### 访问关键管理

这个 `AccessKeyManagement` 部件会让您在您的站点内嵌入一个访问密钥表, 以查看并采取行动 .

部件让你:

-   创建新访问密钥
-   激活/关闭现有访问密钥
-   删除扩展访问密钥

###### 使用量

```html
<!-- admin view: manage all tenant users' access keys -->
<access-key-management
  tenant="tenant-id"
  widgetId="access-key-management-widget"
/>

<!-- user view: mange access key for the logged-in tenant's user -->
<access-key-management
  tenant="tenant-id"
  widgetId="user-access-key-management-widget"
/>
```

示例 [管理访问密钥](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.html)

#### 审计管理

这个 `AuditManagement` 部件会让您在您的站点内嵌入一个审计表 .

###### 使用量

```html
<audit-management tenant="tenant-id" widgetId="audit-management-widget" />
```

示例 [管理审计](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/manage-audit/manage-audit.component.html)

#### 用户Profile

这个 `UserProfile` 部件允许您在您的应用程序中嵌入用户配置文件组件, 并允许登录在用户中更新其配置文件 .

部件让你:

-   更新用户配置图
-   更新用户个人信息
-   更新认证方法
-   注销

###### 使用量

```angular2html
<user-profile widgetId="user-profile-widget"
(logout)="<your_logout_function>"
/>
```

示例 [我的用户配置](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/my-user-profile/my-user-profile.component.html)

#### 应用程序门户

这个 `ApplicationsPortal` 允许您在应用程序中嵌入一个应用程序门户组件,并允许登录用户打开分配给他们的应用程序.

###### 使用量

```angular2html
<applications-portal widgetId="applications-portal-widget" />
```

示例 [我的用户配置](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app/src/app/my-applications-portal/my-applications-portal.component.html)

## OIDC 登录

Descope也支持OIDC登录. 要启用 OIDC 登录, 通过 `oidcConfig` 页:1 `DescopeAuthConfig` 配置 .

### 用 OIDC 配置

#### NG 模块

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DescopeAuthModule } from '@descope/angular-sdk';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: '<your_project_id>',
      oidcConfig: true // Enable OIDC with default settings
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

#### 独立模式

```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { DescopeAuthConfig } from '@descope/angular-sdk';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DescopeAuthConfig,
      useValue: {
        projectId: '<your_project_id>',
        oidcConfig: true // Enable OIDC with default settings
      }
    }
  ]
}).catch((err) => console.error(err));
```

#### 自定义 OIDC 配置

```ts
{
  provide: DescopeAuthConfig,
  useValue: {
    projectId: '<your_project_id>',
    oidcConfig: {
      applicationId: 'my-application-id', // optional, if not provided, the default OIDC application will be used
      redirectUri: 'https://my-app.com/redirect', // optional, if not provided, the default redirect URI will be used
      scope: 'openid profile email', // optional, if not provided, default is openid email offline_access roles descope.custom_claims
    }
  }
}
```

#### 使用输入应用程序作为 OIDC 提供者

要使用入境应用程序作为OIDC的提供者,您必须同时提供 `issuer` 财务报告和审定财务报表 `clientId` 配置选项。 这个 `issuer` 是 OIDC 权威 URL,并且 `clientId` 是您入境应用程序的客户身份 .

> **说明:** 当将一个入境应用程序配置为 OIDC 提供者时, 您必须直接从 Descope 控制台中的入境应用程序设置页面获取发行器 URL 。 发行者 URL 是您输入的应用程序配置所特有的, 无法手动构建 。 此外,您还需要从相同的入境应用程序设置中提供客户端ID.

```ts
{
  provide: DescopeAuthConfig,
  useValue: {
    projectId: '<your_project_id>',
    oidcConfig: {
      // Required: Get this from your inbound app settings page
      issuer: 'https://api.descope.com/v1/apps/P1234567890',
      // Required: Client ID from your inbound app settings
      clientId: 'your-inbound-app-client-id',
      // Optional: Custom redirect URI (defaults to current URL)
      redirectUri: 'https://my-app.com/redirect',
      // Optional: Custom scope (defaults to 'openid' when issuer is provided)
      scope: 'openid profile email',
    }
  }
}
```

使用自定义时 `issuer` 默认范围为 `'openid'` 而不是整个Descope范围。 您可以通过提供自定义来覆盖此功能 `scope` 数值.

### 使用 OIDC 登录

配置 OIDC 后,您可以使用 `oidc.loginWithRedirect` 方法从 `DescopeAuthService`数字 :

```ts
import { Component } from '@angular/core';
import { DescopeAuthService } from '@descope/angular-sdk';

@Component({
  selector: 'app-login',
  template: '<button (click)="login()">Login with OIDC</button>'
})
export class LoginComponent {
  constructor(private descopeAuthService: DescopeAuthService) {}

  login() {
    this.descopeAuthService.descopeSdk.oidc.loginWithRedirect({
      // By default, the login will redirect the user to the current URL
      // If you want to redirect the user to a different URL, you can specify it here
      redirect_uri: window.location.origin
    });
  }
}
```

### 正在完成 OIDC 登录

在用户以 OIDC 代码和状态查询参数重定向回您的应用程序后, 调用 `finishLoginIfNeed()` 以完成登录 :

```ts
import { Component, OnInit } from '@angular/core';
import { DescopeAuthService } from '@descope/angular-sdk';

@Component({
  selector: 'app-callback',
  template: '<div>Processing login...</div>'
})
export class CallbackComponent implements OnInit {
  constructor(private descopeAuthService: DescopeAuthService) {}

  async ngOnInit() {
    // This will automatically finish the login if OIDC parameters are present
    await this.descopeAuthService.descopeSdk.oidc.finishLoginIfNeed();
  }
}
```

## 代码示例

您可以在其中找到一个示例 angular app [示例文件夹](https://npmcn.com/package/%40descope/angular-sdk/projects/demo-app)。 。 。 .

### 设置

运行示例, 创建 `environment.development.ts` 文件输入 `environments` 文件夹.

```ts
import { Env } from './conifg';

export const environment: Env = {
  descopeProjectId: '<your_project_id>'
};
```

在 [望远镜控制台](https://app.descope.com/settings/project)。 。 。 .

### 运行示例

在项目根部运行以下命令来构建和运行示例 :

```bash
pnpm i && npm start
```

### 示例可选条目变量

应用软件的定制环境变量见下表:

| 信封变量 | 说明 | 默认值 |
| --- | --- | --- |
| 缩放 | 登录页面中要使用的流程 ID | **注册或注册** |
| 望远镜BaseUrl | 自定义查看镜基址 | 无 |
| 望远镜BaseStaticUrl | 自定义底盘静态 URL | 无 |
| 望远镜主题 | 流程主题 | 无 |
| 地镜 | 流动地盘 | 浏览器的语言 |
| 瞄准镜 | OAuth/SSO/ Magic Link/ 智能链接的流程重定向 URL | 无 |
| 望远镜天花板 | SSO/SAML 流动租户身份证 | 无 |
| 调试模式 | **"对"** - 启用调试器  
**假话** - 禁用流量调试器 | 无 |
| 分镜 | 升级流程 ID 以显示登录用户( 通过按钮) 。 如"上". 如果不提供按钮将隐藏 | 无 |
| 显微镜键 | **字符串** - Descope公司提供的遥测公用钥匙 | 无 |
| 望远镜后端Url | 如果您想要测试 e2e, 请使用您的测试后端应用 | 无 |

示例 `environment.development.ts` 文件 :

```ts
import { Env } from './conifg';

export const environment: Env = {
  descopeProjectId: '<your_project_id>',
  descopeBaseUrl: '<your_base_url>',
  descopeBaseStaticUrl: '<your_base_static_url>',
  descopeFlowId: 'sign-up-or-in',
  descopeDebugMode: false,
  descopeTheme: 'os',
  descopeLocale: 'en_US',
  descopeRedirectUrl: '<your_redirect_url>',
  descopeTelemetryKey: '<your_telemetry_key>',
  descopeStepUpFlowId: 'step-up',
  descopeBackendUrl: 'http://localhost:8080/protected'
};
```

## 解决问题

如果在构建应用程序时遇到警告:

```
▲ [WARNING] Module 'lodash.get' used by 'node_modules/@descope/web-component/node_modules/@descope/core-js-sdk/dist/index.esm.js' is not ESM
```

添加 `lodash.get` 允许在 `angular.json`

```json
"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "allowedCommonJsDependencies": ["lodash.get"],
            <other_options>
        }
        <other_config>
    }
    <other_config>
}
```

## 财务问题

### 我在后端更新了用户, 但用户 / 会话符不在前端更新

Descope SDK在前端缓存用户和会话符号. 如果您在后端更新用户( 例如使用Descope Management SDK/ API), 您可以调用 `me` 编号 : `refresh` 从 `descopeSdk` 成员 `DescopeAuthService` 以刷新用户和会话符号。 示例

```ts
import { DescopeAuthService } from '@descope/angular-sdk';

export class MyComponent {
  // ...
  constructor(private authService: DescopeAuthService) {}

  handleUpdateUser() {
    myBackendUpdateUser().then(() => {
      this.authService.descopeSdk.me();
      // or
      this.authService.descopeSdk.refresh();
    });
  }
}
```

## 学习更多

学习更多 请看 [视角文档和 API 参考页面](https://docs.descope.com/)。 。 。 .

## 联系我们

如果您需要帮助, 您可以发送电子邮件 [瞄准镜支持](mailto:support@descope.com)

## 许可证

Angular的SDK探测器获得许可,可在下列条件下使用: [麻省理工学院许可证协议](https://npmcn.com/package/%40descope/angular-sdk/LICENSE)。 。 。 .

## 常见问题

### @descope/angular-sdk 是什么？

用于Angular的Descope SDK为Angular上方撰写的应用程序提供了方便的Descope访问\. 你可以读更多关于 望远镜网站。 。 。 \.

### 如何安装 @descope/angular-sdk？

在项目目录运行 npm install @descope/angular-sdk，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=16\.0\.0）、@angular/common（\>=16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @descope/angular-sdk 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @descope/angular-sdk 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @descope/angular-sdk 可以商用吗？

@descope/angular-sdk 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @descope/angular-sdk 的下载量有多少？

根据 npm 官方下载统计，@descope/angular-sdk 在 2026/10/12 – 2026/11/10 这 30 天内被下载 19,199 次，日均约 640 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @descope/angular-sdk 还在维护吗？

最新版本 0\.29\.1 发布于 2026/11/08（3 天前）；至今共发布 480 个版本，其中过去 12 个月发布了 183 个；首次发布于 2023/12/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。