Angular 应用程序中使用 FusionAuth 的 SDK .

目录

• 概览
• 开始
• 快速启动
• 安装
• 使用量
• 融合服务
• 预建按钮
• 状态参数
• 安全部门改革
• DPOP 模式
• 已知问题
• 文档
• 释放

概览

这个 SDK 帮助管理您的 Angular app 的认证状态, 并提供登录, 注册和登录用户的功能 。 也可以被配置为自动管理您刷新符 .

您的用户将被发送到 FusionAuth 的主题主机登录页面和 然后登录。 之后,它们会被送回你的Angular应用程序.

认证成功后, 以下安全, HTTP 唯一的 cookie 将设置 :

• app.at - 一个奥奥特人 访问 脚本

• app.rt - 一个 刷新 脚本 用于获得新的 app.at。只有在 在您的 FusionAuth 实例中启用了刷新符号 .

访问令牌可以提交API,以授权请求和 刷新符可以用来获取新的访问符.

与这个SDK有两种互动方式:

1. 通过托管执行 OAuth 令牌交换并满足 fusionAuth Web SDKs的服务器代码要求。 。 。 .
2. 通过使用您 FusionAuth 实例中托管的服务器, 即不写入您的服务器代码 .

如果您正在托管自己的服务器, 请查看 服务器代码要求。 。 。 .

您可以使用此库对抗 FusionAuth 或任何 OIDC 版本 符合要求的身份服务器 .

开始

如果您是Angular开发新手, 您可能想要从快速启动指南开始 。 如果您已经熟悉角开发, 请跳到安装区域 .

快速启动

见 FusionAuth 角快速启动 用于使用 FusionAuth 和 Angular 的完整教程.

安装

国家预防机制:

npm install @fusionauth/angular-sdk

亚伦:

yarn add @fusionauth/angular-sdk

配置同源元素模块

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 方法,如果您想要执行您的观测数据.

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

预建按钮

有三个预设的按钮被配置用于执行 登录/登录/登记。 它们可以放在你的应用程序的任何地方 没错.

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

@Component({
  selector: 'app-login',
  template: `<fa-login></fa-login>`,
  styleUrls: []
})
export class LoginComponent {}

@Component({
  selector: 'app-logout',
  template: `<fa-logout></fa-logout>`,
  styleUrls: []
})
export class LogoutComponent {}

@Component({
  selector: 'app-register',
  template: `<fa-register></fa-register>`,
  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数字 :

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 未启用.

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

已知问题

无.

文档

完整的图书馆文件

在此读取中使用回击代码 。 这个readme包含在FusionAuth网站中,回击者以那里最好的光来显示代码.

释放

为了向国家预防机制发布消息,在GitHub上发布消息。 这将会自动向 GitHub 发布发行.