下面是一个使用 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 服务、处理登录和登出以及保护路由。当然，根据你的具体需求，可能还需要对这个流程进行扩展和定制。
