Angular angular-oauth2-oidc 实战

下面是一个使用 angular-oauth2-oidc 库的基础 Angular 示例，展示了如何配置和使用这个库来实现基于 OAuth 2.0 和 OpenID Connect 的用户认证。这个例子假设你已经有一个可用的认证服务器，并且已经在该服务器上注册了你的应用。

步骤 1：安装 angular-oauth2-oidc

首先，你需要通过 npm 安装 angular-oauth2-oidc。在你的 Angular 项目根目录下打开终端，执行以下命令：

npm install angular-oauth2-oidc --save

步骤 2：配置 OAuthService

在你的 Angular 应用中，需要配置 OAuthService 以使用你的认证服务器。这通常在应用的根模块或核心模块的初始化代码中完成。这里是一个配置示例：

// app.module.ts 或者 core.module.ts

import { HttpClientModule } from '@angular/common/http';
import { OAuthModule, OAuthService } from 'angular-oauth2-oidc';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    // 其他模块...
    HttpClientModule, // `OAuthService` 需要它来发起 HTTP 请求
    OAuthModule.forRoot()
  ],
  // 其他配置...
})
export class AppModule { 
  constructor(private oauthService: OAuthService) {
    this.configureOAuth();
  }

  private configureOAuth(): void {
    this.oauthService.configure({
      issuer: `https://your-auth-server.com`,
      redirectUri: window.location.origin,
      clientId: `your-client-id`,
      responseType: `code`, // 使用授权码流程
      scope: `openid profile email`, // 或者其他你需要的 scopes
      showDebugInformation: true, // 开发时可以启用调试信息
      // 更多配置选项...
    });

    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}

步骤 3：创建登录和登出功能

接下来，你需要在你的应用中添加登录和登出的功能。通常，这些功能会在一个服务中实现，然后在组件中调用。

// auth.service.ts

import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private oauthService: OAuthService) {}

  login(): void {
    this.oauthService.initCodeFlow(); // 启动授权码登录流程
  }

  logout(): void {
    this.oauthService.logOut(); // 登出
  }

  get isAuthenticated(): boolean {
    return this.oauthService.hasValidAccessToken(); // 检查访问令牌是否有效
  }
}

在你的组件中，你可以调用这些服务方法来处理用户的登录和登出：

// login.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `
    <button *ngIf="!authService.isAuthenticated" (click)="login()">Login</button>
    <button *ngIf="authService.isAuthenticated" (click)="logout()">Logout</button>
  `
})
export class LoginComponent {
  constructor(public authService: AuthService) {}

  login(): void {
    this.authService.login();
  }

  logout(): void {
    this.authService.logout();
  }
}

步骤 4：保护路由

在 Angular 中，你可以使用路由守卫（如 AuthGuard）来保护那些需要用户登录后才能访问的路由。这里是一个简单的 AuthGuard 实现示例：

// auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.authService.isAuthenticated) {
      this.authService.login(); // 如果未认证，则启动登录流程
      return false;
    }
    return true;
  }
}

然后，在你的路由配置中使用这个守卫：

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { ProtectedComponent } from './protected/protected.component';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard]
  }
  // 其他路由...
];

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

这个简单的例子展示了如何使用 angular-oauth2-oidc 在 Angular 应用中实现基本的认证流程，包括配置 OAuth 服务、处理登录和登出以及保护路由。当然，根据你的具体需求，可能还需要对这个流程进行扩展和定制。