1. 概述
@marvinosswald/angular-oauth2-oidc 是一款在 Angular 应用程序中实现 OpenID Connect 和 OAuth2 认证的 npm 包。它提供了一个易于使用和快速集成的 Angular 服务来处理与授权服务器的交互和用户信息处理。本文将详细介绍如何在您的 Angular 应用程序中使用该包。
2. 安装
您可以通过 npm 包管理器安装以下 npm 模块来获取 @marvinosswald/angular-oauth2-oidc：
npm install @marvinosswald/angular-oauth2-oidc --save
3. 配置
@marvinosswald/angular-oauth2-oidc 依赖于 ngx-auth 和 rxjs 包。使用前确保已经安装这些包。
3.1 添加模块
在您的 Angular 应用程序中，您需要添加本模块以使用 @marvinosswald/angular-oauth2-oidc：
app.module.ts
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
------ - ----------- - ---- -------------------------------------
---
-----------
-------- -
--------------
-----------------
-----------------
------------------------
----------------------
---
--
---
--
------ ----- --------- - -3.2 配置服务
在您的应用程序中，您需要配置认证服务和授权服务器配置。首先，在您的配置文件中定义用户池的 URI、客户端 ID、秘密以及授权服务器的 URI：
-- -------------------- ---- ------- ----- ----------------- ---------- - - ------- ------------------------------------- --------- ----------------- ------------ ----------------------- --------- ------------------------------------------------------- -------------- --------------------------------------------------- ------------- ------- ------ ------- ------- ----- ---------------- --------------------- ----- --
然后，在您的应用程序中，通过调用 OAuthService.setStorage(localStorage) 来设置 OAuth2 服务使用本地存储：
export class AppComponent {
constructor(private oauthService: OAuthService) {
this.oauthService.configure(authServerConfig);
this.oauthService.setStorage(localStorage);
}
}4. 使用示例
以下是一些示例代码，展示了如何集成和使用 @marvinosswald/angular-oauth2-oidc。在本节中，我将演示如何使用 httpClient 实例来处理带有 AccessToken 的请求。
4.1 处理 AccessToken
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ------------ - ---- -------------------------------------
---
-------------
------ ----- ---------- -
------------------- ----- ----------- ------- ------------- ------------- --
------- ------------- ----------- -
------ --- ---------------------------------- ------- ----------------------------------------
-
------- ------------------ ---- -
---
-
-------------- --------------- -
----- ----------- - ------------------------------------
------ -------------------------- - -------- ----------------- --------------------------------------
-
-5. 总结
本文介绍了如何在 Angular 应用程序中使用 @marvinosswald/angular-oauth2-oidc。您需要配置认证服务和授权服务器配置，并在应用程序中添加模块和服务。我还演示了如何使用 httpClient 实例来处理带有 AccessToken 的请求。如果您想了解更多关于 @marvinosswald/angular-oauth2-oidc 的信息，可以访问其官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244693