Angular Auth OIDC Client 使用教程

34 0 0

Angular Auth OIDC Client 使用教程

angular-auth-oidc-clientdamienbod/angular-auth-oidc-client: 是一个用于 Angular 的 OpenID Connect 身份验证客户端库。适合对 Angular 和身份验证有兴趣的人，特别是想为自己的 Angular 应用添加 OpenID Connect 身份验证功能的人。特点是提供了一个简洁易用的客户端库，可以方便地与 Angular 应用集成，支持多种 OpenID Connect 身份提供商，具有高可扩展性和易用性。项目地址:https://gitcode.com/gh_mirrors/an/angular-auth-oidc-client

项目介绍

angular-auth-oidc-client 是一个用于 Angular 应用的 OpenID Connect 客户端库，它帮助开发者实现与支持 OpenID Connect 协议的身份提供者（如 Auth0、IdentityServer 等）的安全认证和授权。该库提供了丰富的功能，包括自动刷新令牌、静默刷新、多种配置选项等，使得在 Angular 应用中集成 OpenID Connect 变得简单高效。

项目快速启动

安装

首先，使用 npm 安装 angular-auth-oidc-client：

npm install angular-auth-oidc-client

配置

在 Angular 项目中，首先需要在 app.module.ts 中进行配置：


import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AuthModule.forRoot({
      config: {
        authority: 'https://your-oidc-provider.com',
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: 'your-client-id',
        scope: 'openid profile email',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用

在组件中使用认证服务：


import { OidcSecurityService } from 'angular-auth-oidc-client';
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'app';
 
  constructor(public oidcSecurityService: OidcSecurityService) {}
 
  ngOnInit() {
    this.oidcSecurityService.checkAuth().subscribe((isAuthenticated) => {
      console.log('isAuthenticated', isAuthenticated);
    });
  }
 
  login() {
    this.oidcSecurityService.authorize();
  }
 
  logout() {
    this.oidcSecurityService.logoff();
  }
}