在前端开发中，我们时常需要进行身份验证和授权操作。这时候一个好用的 OIDC (OpenID Connect) 客户端就显得非常重要。Angular-oidc-client 是一个能够快速集成 OpenID Connect 以及 OAuth2 授权流的客户端库。本文将详细介绍如何在 Angular 应用中使用 angular-oidc-client 包进行用户身份认证。
安装与配置
安装
首先，我们需要在 Angular 应用中引入该包。
npm install angular-oidc-client --save
配置
我们需要在根模块 AppModule 中配置该模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
-- -- ------------------- --
------ - ------------------ - ---- ----------------------
-- -- -------- ------
----- ------------- - -
----------- -----------------------------------------------------------------------------
---------- -----------------
-------------- --------- -------
------ ------- ---------
------------------------- -----------------------
--
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-----------------
-- -- -------------------- --
-----------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -需要注意的是，该模块依赖 HttpClientModule。另外，需要在 providers 中添加 OidcSecurityService。我们还可以在 OidcSecurityModule 的 forRoot 方法中传递一些参数，具体含义如下：
- config_url: 配置 OIDC 的地址
- client_id: 应用程序注册的 ID
- response_type: 授权请求的响应类型
- scope: 请求的范围
- post_logout_redirect_uri: 退出登录后返回的 URI
- forbidden_route: 身份验证失败时的路由
- unauthorized_route: 授权失败时的路由
使用
关于使用，我们有以下几个重要的概念：OidcSecurityService、AuthGuard、CanActivate。
OidcSecurityService
在组件中，我们可以通过 OidcSecurityService 访问相关的 OIDC 验证，例如登录和注销。官方文档列出了该服务可用的一些方法：
- checkAuth(): 检查当前是否已登录
- getToken(): 返回授权令牌
- authorize(): 启动 OIDC 授权流
- logoff(): 注销登录
例如，在一个组件中，我们可以实现以下可重复使用的方法：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------- - ---- ----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
-------------- --------
------------------- -------------------- -------------------- -
------------------ - ------
-
----------- ---- -
----------------------------------------------------- -- ------------------ - ------
-
------- -
-------------------------------------
-
-------- -
----------------------------------
-
-AuthGuard
AuthGuard 可以用于限制某些路由的访问，只允许已认证用户访问。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- ----------- - ---- ------------------
------ - ------------------- - ---- ----------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- ------- -------------------- -------------------- --
------------- -
-- -------------------------------------------- -
------ -----
-
---------------------------------
------ ------
-
-当需要保护某个路由时，可在路由模块中使用：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- -------------- ------------ ----------- -- - ----- -------- ---------- -------------- -- - ----- ----- ---------- -------------- ------------ ----------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
CanActivate
CanActivate 可以用于允许或阻止路由导航。例如，我们希望当用户未登录时，跳转到登录页面：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------------------- ------------ -------------------- ------- - ---- ------------------
------ - ---------- - ---- -------
------ - ------------------- - ---- ----------------------
-------------
----------- ------
--
------ ----- ---------------- ---------- ----------- -
------------------- -------------------- -------------------- --
------------
------ -----------------------
------ -------------------
--
------------------ - -------- - --------------- - -------- - ------- - ------- -
-- -------------------------------------------- -
------ -----
- ---- -
-------------------- - ------------------------------
------ ------
-
-
-需要注意的是，在部署到生产环境时，该路由将不再有效，因此我们需要将 URL 更改为环境特定的路径。
示例代码
示例代码可在我的 GitHub 仓库中找到：
结论
在本文中，我们详细介绍了如何使用 angular-oidc-client 包来集成 OIDC 和 OAuth2 授权流。这些认证技术可以确保我们的应用程序安全可靠，只允许授权的用户访问。同时，我们还介绍了如何使用 AuthGuard 和 CanActivate ，来限制访问路由和实现路由的重定向。
当然，该库还支持其他 OIDC 相关的功能，如刷新令牌(token) 和 集成拓展的配置。详细可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101968