Angular2OidcClient 开源项目教程

41 0 0

Angular2OidcClient 开源项目教程

Angular2OidcClientA simple demonstration of using IdentityModel/oidc-client with angular 2项目地址:https://gitcode.com/gh_mirrors/an/Angular2OidcClient

项目介绍

Angular2OidcClient 是一个专为 Angular 应用设计的 OpenID Connect 客户端库，由 jmurphzyo 开发维护。这个库简化了在 Angular 应用中集成 OAuth2 和 OpenID Connect 协议的过程，使得开发者能够轻松实现单点登录（SSO）和其他安全认证需求。它基于 Angular 的 DI（Dependency Injection）系统，并且提供了现代web应用所需的身份验证功能。

项目快速启动

安装

首先，确保你的开发环境已经配置好了Angular CLI。然后，在终端运行以下命令来安装Angular2OidcClient：

npm install angular-oauth2-oidc --save

配置

在你的 app.module.ts 文件中导入 OAuthModule 并进行初始化：


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { OAuthModule } from 'angular-oauth2-oidc';
 
@NgModule({
  declarations: [
    AppComponent,
    // 其他组件声明
  ],
  imports: [
    BrowserModule,
    OAuthModule.forRoot({
      // 在这里配置你的OIDC服务端信息，例如：
      issuer: 'http://your-oidc-server/auth/realms/master',
      client_id: 'your-client-id',
      redirect_uri: window.location.origin + '/callback',
      scope: 'openid email profile',
    }),
    // 其他模块导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用示例

在你的组件中使用认证服务：


import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
 
@Component({
  selector: 'app-root',
  template: `
    <button (click)="login()">Login</button>
    <button *ngIf="oauthService.hasValidIdToken()" (click)="logout()">Logout</button>
  `,
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {}
 
  login() {
    this.oauthService.initLoginFlow();
  }
 
  logout() {
    this.oauthService.logOut();
  }
}