# @fusionauth/angular-sdk 中文文档
规范地址：https://npmcn.com/package/%40fusionauth/angular-sdk/
版本：2\.1\.0
npm 元数据更新时间：2026-08-05T19:13:37.264Z
中文译文更新时间：2026-11-15T18:41:10.694Z
软件包许可：Apache
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40fusionauth/angular-sdk
原文对照：https://npmcn.com/package/%40fusionauth/angular-sdk/?lang=original
项目主页：https://github.com/FusionAuth/fusionauth-javascript-sdk#readme
源码仓库：https://github.com/FusionAuth/fusionauth-javascript-sdk
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：180 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@angular/common \>=22\.0\.0，@angular/core \>=22\.0\.0
- 首次发布：2023-04-07T22:45:53.968Z
- 最新版本发布：2026-08-05T19:13:36.817Z
- 近 30 天下载量：31286（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 2 个）
## 中文简介
Angular 应用程序中使用 FusionAuth 的 SDK .
## 安装
```sh
npm install @fusionauth/angular-sdk
```
也可以使用：`pnpm add @fusionauth/angular-sdk`、`yarn add @fusionauth/angular-sdk`、`bun add @fusionauth/angular-sdk`
## README
Angular 应用程序中使用 FusionAuth 的 SDK .
# 目录
- [概览](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-overview)
- [开始](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-getting-started)
- [快速启动](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-quickstart)
- [安装](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-installation)
- [使用量](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-usage)
- [融合服务](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-fusionauthservice)
- [预建按钮](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-pre-built-buttons)
- [状态参数](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-state-parameter)
- [安全部门改革](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-ssr)
- [DPOP 模式](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-dpop-mode)
- [已知问题](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-known-issues)
- [文档](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-documentation)
- [释放](https://npmcn.com/package/%40fusionauth/angular-sdk/#readme-releases)
# 概览
这个 SDK 帮助管理您的 Angular app 的认证状态, 并提供登录, 注册和登录用户的功能 。 也可以被配置为自动管理您刷新符 .
您的用户将被发送到 FusionAuth 的主题主机登录页面和 然后登录。 之后,它们会被送回你的Angular应用程序.
认证成功后, 以下安全, HTTP 唯一的 cookie 将设置 :
- `app.at` - 一个奥奥特人 [访问 脚本](https://fusionauth.io/docs/v1/tech/oauth/tokens#access-token)
- `app.rt` - 一个 [刷新 脚本](https://fusionauth.io/docs/v1/tech/oauth/tokens#refresh-token) 用于获得新的 `app.at`。只有在 在您的 FusionAuth 实例中启用了刷新符号 .
访问令牌可以提交API,以授权请求和 刷新符可以用来获取新的访问符.
与这个SDK有两种互动方式:
1. 通过托管执行 OAuth 令牌交换并满足 [fusionAuth Web SDKs的服务器代码要求](https://github.com/FusionAuth/fusionauth-javascript-sdk-express#server-code-requirements)。 。 。 .
2. 通过使用您 FusionAuth 实例中托管的服务器, 即不写入您的服务器代码 .
如果您正在托管自己的服务器, 请查看 [服务器代码要求](https://github.com/FusionAuth/fusionauth-javascript-sdk-express#server-code-requirements)。 。 。 .
您可以使用此库对抗 FusionAuth 或任何 OIDC 版本 符合要求的身份服务器 .
## 开始
如果您是Angular开发新手, 您可能想要从快速启动指南开始 。 如果您已经熟悉角开发, 请跳到安装区域 .
### 快速启动
见 [FusionAuth 角快速启动](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) 用于使用 FusionAuth 和 Angular 的完整教程.
### 安装
国家预防机制:
```bash
npm install @fusionauth/angular-sdk
```
亚伦:
```bash
yarn add @fusionauth/angular-sdk
```
### 配置同源元素模块
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { FusionAuthModule } from '@fusionauth/angular-sdk';
@NgModule({
declarations: [],
imports: [
FusionAuthModule.forRoot({
clientId: '', // Your FusionAuth client ID
serverUrl: '', // The base URL of the server that performs the token exchange
redirectUri: '', // The URI that the user is directed to after the login/register/logout action
shouldAutoRefresh: true // option to configure the SDK to automatically handle token refresh. Defaults to false if not specified here.
// useDpop: true, // Opt-in to DPoP mode. See "DPoP Mode" below. Defaults to false.
}),
],
providers: [],
bootstrap: []
})
export class AppModule { }
```
## 使用量
### 融合服务
注射器 `FusionAuthService` class 提供了组件可以订阅的可观察属性.
注意,您也可以使用不可观察 `getUserInfo` 方法,如果您想要执行您的观测数据.
```typescript
class AppComponent implements OnInit, OnDestroy {
private fusionAuthService: FusionAuthService = inject(FusionAuthService);
isLoggedIn: boolean = this.fusionAuthService.isLoggedIn();
userInfo: UserInfo | null = null;
isGettingUserInfo: boolean = false;
subscription?: Subscription;
ngOnInit(): void {
if (this.isLoggedIn) {
this.subscription = this.fusionAuthService
.getUserInfoObservable({
onBegin: () => (this.isGettingUserInfo = true),
onDone: () => (this.isGettingUserInfo = false),
})
.subscribe({
next: (userInfo) => (this.userInfo = userInfo),
error: (error) => console.error(error),
});
}
}
ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
}
```
### 预建按钮
有三个预设的按钮被配置用于执行 登录/登录/登记。 它们可以放在你的应用程序的任何地方 没错.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
template: ``,
styleUrls: []
})
export class LoginComponent {}
@Component({
selector: 'app-logout',
template: ``,
styleUrls: []
})
export class LogoutComponent {}
@Component({
selector: 'app-register',
template: ``,
styleUrls: []
})
export class RegisterComponent {}
```
#### 状态参数
这个 `startLogin` 财务报告和审定财务报表 `startRegistration` 函数都接受可选字符串 调用参数 `state`。登录和注册组件也可以通过 状态作为输入。 传入函数调用时的状态会被响应 返回状态查询参数 `redirectUri` 打开 页:1 `FusionAuthConfig` 用于初始化 `FusionAuthModule`尽管你可能 传递您想要用于状态参数的任何值, 它常被用来表示 在重新定向到登录或注册之前,该用户在哪个页面上,以便 用户可以在成功认证后返回该位置.
#### 安全部门改革
SDK支持使用SSR的Angular应用. 不需要额外的配置 .
### DPOP 模式
默认情况下,SDK会调用HttpOnly cookie中存储符号的Hosted后端(`useDpop: false`,默认值). 在DPoP模式下,SDK转而直接调用FusionAuth端点,并绑定到浏览器中生成的私人密钥上. 通过设置启用 `useDpop: true` 打开 `FusionAuthConfig`数字 :
```typescript
FusionAuthModule.forRoot({
clientId: '',
serverUrl: '',
redirectUri: '',
useDpop: true, // Opt-in to DPoP mode.
dpopTokenStorage: 'localStorage', // 'localStorage' (default, persists across reloads) or 'memory'.
}),
```
何时 `useDpop: true`, (中文(简体) ), `FusionAuthService` 额外暴露 `dpopFetch()`, (中文(简体) ), `generateProof()`,以及 `getAccessToken()`。如果调用此选项,这些选项会丢出描述性错误 `useDpop` 未启用.
```typescript
class AppComponent {
private fusionAuthService: FusionAuthService = inject(FusionAuthService);
async callApi() {
// Recommended — handles attaching DPoP headers (and nonce retries) automatically.
const response = await this.fusionAuthService.dpopFetch('https://api.example.com/data', { method: 'GET' });
// For axios or other HTTP libraries that can't use dpopFetch.
const accessToken = this.fusionAuthService.getAccessToken();
const proof = await this.fusionAuthService.generateProof('https://api.example.com/data', 'GET', accessToken ?? undefined);
// axios.get('https://api.example.com/data', {
// headers: { Authorization: `DPoP ${accessToken}`, DPoP: proof }
// });
}
}
```
### 已知问题
无.
## 文档
[完整的图书馆文件](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs)
在此读取中使用回击代码 。 这个readme包含在FusionAuth网站中,回击者以那里最好的光来显示代码.
## 释放
为了向国家预防机制发布消息,在GitHub上发布消息。 这将会自动向 GitHub 发布发行.
## 常见问题
### @fusionauth/angular-sdk 是什么？
Angular 应用程序中使用 FusionAuth 的 SDK \.
### 如何安装 @fusionauth/angular-sdk？
在项目目录运行 npm install @fusionauth/angular-sdk，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=22\.0\.0）、@angular/core（\>=22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @fusionauth/angular-sdk 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @fusionauth/angular-sdk 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @fusionauth/angular-sdk 可以商用吗？
@fusionauth/angular-sdk 使用 Apache 许可。声明的许可为 Apache，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。
### @fusionauth/angular-sdk 的下载量有多少？
根据 npm 官方下载统计，@fusionauth/angular-sdk 在 2026/10/16 – 2026/11/14 这 30 天内被下载 31,286 次，日均约 1,043 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @fusionauth/angular-sdk 还在维护吗？
最新版本 2\.1\.0 发布于 2026/08/06（3 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 2 个；首次发布于 2023/04/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。