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