身份验证是每个 Web 应用程序的关键组成部分之一。它可以确保只有授权的用户才能访问应用程序的资源。OAuth 2.0 是一种常见的身份验证机制，它为应用程序提供了现代化、安全和可扩展的身份验证方案。在本文中，我们将学习如何使用 Angular 在应用程序中实现 OAuth 2.0 身份验证。
什么是 OAuth 2.0？
OAuth 2.0 是一种开放标准的授权协议，用于在不向第三方公开用户凭据的情况下授权第三方应用程序访问其受保护的资源。本质上，OAuth 2.0 是建立在 SSL/TLS 协议之上的授权协议。
在 OAuth 2.0 中，资源所有者（即用户）可以授权第三方应用程序（即客户端）访问其受保护的资源。通过此授权，客户端可以在用户授权的情况下访问资源 server，而不是需要用户名和密码。
OAuth 2.0 协议涉及四个关键角色：
- 资源所有者（Resource Owner）：可以访问受保护的资源（如用户）。
- 客户端（Client）：试图访问受保护资源的应用程序，它需要访问资源 server。
- 授权服务器（Authorization Server）：负责验证用户的身份，并颁发访问令牌（Access Token）。
- 资源服务器（Resource Server）：保存着需要受保护的资源，可以通过访问令牌授权客户端的访问。
在 Angular 应用程序中实现 OAuth 2.0 身份验证的步骤
现在，我们将深入研究如何在 Angular 应用程序中实现 OAuth 2.0 身份验证。这里我们将使用 angular-oauth2-oidc 这个类库来实现。
1. 安装所需的依赖
首先，需要安装 angular-oauth2-oidc 依赖：
npm install angular-oauth2-oidc --save
2. 配置 OAuth 管理器
要配置 OAuth 管理器，请在 app.module.ts 中导入 OAuthModule 和 OAuthStorage：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ ------------ - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
---------------------
--
---------- -
- -------- ------------- --------- ------------ -
--
---------- --------------
--
------ ----- --------- - -在这个示例代码中，我们将 OAuthModule 注入了 app.module.ts，并设置了 storage 的类型为 localStorage，以在本地存储中保持认证令牌。
3. 配置 OAuthService
在 app.component.ts 中，可以配置 OAuthService：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- --------------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------------- ------------- --
---------- -
-----------------------------
------- ------------------------------
------------ ---------------------- - -----------------
--------- ----------
------ ------- ------- -------
--------------------- -----
---
---------------------------------------- - --- ------------------------
-----------------------------------------------------
-
------- -
-------------------------------------
-
-------- -
---------------------------
-
--- ---------- -
--- ------ - --------------------------------------
-- --------- ------ -----
------ ---------------------
-
-在这个示例代码中，可以在 ngOnInit 中配置 OAuthService。其中，issuer 是认证服务器的 URL。clientId 是用于标识客户端的唯一字符串。redirectUri 是 OAuth 认证完成后的回调URL，必须与你在授权服务器中注册的redirectURI相同。scope 定义了应用程序需要访问的资源。tokenValidationHandler 属性是处理令牌验证的函数。
4. 添加路由守卫
使用路由守卫可以确保用户必须先登录，然后才能访问受保护的路由。 要添加路由守卫，请使用以下示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
------ - ------------ - ---- ----------------------
-------------
---------- - ------
--
------ ----- --------- ---------- ----------- -
------------------- ------------- ------------- ------- ------- ------- --
-------------- ------- -
-- ----------------------------------------- -
------ -----
-
---------------------------------
------ ------
-
-5. 创建 login 和 logout 按钮
在 app.component.html 中，可以创建 login 和 logout 按钮：
-- -------------------- ---- -------
---- ------------------
---- ---------------
------ ----- -------
----
----
-- -----------------------
-----
----
-- --------------------- -------------------------------------------------
-----
----
-- ------------------- -----------------------------------------------
-----
--- ----------------- ------------------
-----
-----
--- ---------------- -------------------
------
-----
--- ------------------------- -- -------- -------
-----
------
-------------------------------
------6. 防止跨站点请求伪造
最后一步是防止跨站点请求伪造（Cross-Site Request Forgery，CSRF）。在 app.module.ts 中添加 HttpClientXsrfModule.withOptions 和配置 CsrfXSRFHeaderName 选项：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- -------------------- - ---- -----------------------
------ - ------------ ------------ - ---- ----------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------------
------ - ------------- - ---- ------------------------
------ - ---------------- - ---- ------------------------------
------ - -------------- - ---- --------------------------
------ - --------- - ---- ---------------
-----------
------------- -
-------------
--------------
-----------------
--------------
--
-------- -
--------------
-----------------
----------------------
-----------------
----------------------------------
----------- ------------- -- ---------
----------- --------------- -- ---------
--
--
---------- -
- -------- ------------- --------- ------------ --
---------
--
---------- --------------
--
------ ----- --------- - -在以上示例代码中，我们使用 HttpClientXsrfModule.withOptions 防止 CSRF 攻击，其中借助了 XsrfCookieExtractor 和 XsrfHeaderName。
结论
至此，我们已经学习了如何在 Angular 应用程序中使用 angular-oauth2-oidc 实现 OAuth 2.0 身份验证的各个步骤。我们已经覆盖了从安装依赖到实际实施 OAuth 2.0 的所有必要步骤。通过熟练掌握这些步骤，您可以轻松地为您的应用程序添加 OAuth 2.0 身份验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67766e7b6d66e0f9aa241467