在前端开发中，我们经常需要使用 OAuth 来进行用户认证和授权。然而，OAuth 的实现是比较复杂的，需要我们花费大量时间和精力去实现。如果有一款能够简化 OAuth 实现的 npm 包，那么对于我们来说将会非常方便。今天，我们就来介绍一款这样的 npm 包，它的名字是 ng2-handy-oauth。
简介
ng2-handy-oauth 是一款用于 Angular2+ 构建的 OAuth2.0 客户端包装器，可以极大地简化前端认证和授权过程。它提供了易于使用的服务和模块，可以帮助我们轻松地实现 OAuth2.0 的流程。
安装
首先，我们需要安装该 npm 包。在终端中执行以下命令：
--- ------- --------------- ------
使用
在使用 ng2-handy-oauth 之前，需要我们先配置相应的 OAuth2.0 服务提供商。这里以 Google 的 OAuth2.0 服务为例。
配置
在 Google 开发者控制台中，创建一个 OAuth2.0 的客户端 ID，选择应用类型为 Web 应用，并将 “授权回调 URI” 设置为你的应用的登录页面地址，如 “http://localhost:4200/signin”（当然，这个地址需要与你的应用实际地址一致）。保存客户端 ID 和客户端密钥。
在应用中，我们需要配置 ng2-handy-oauth 来使用我们的 OAuth2.0 服务提供商。打开 app.module.ts 文件，将以下代码添加到文件中：
------ - -------- - ---- ----------------
------ - ---------------- - ---- ------------------
-----------
-------- -
-- ---
--------------------------
--------- ----------------------
------------- --------------------------
--------- ---------
------------------ -----------------------------------------------
-------------- --------------------------------------
------------ -------------------------------
------ ------- --------
--
--
-- ---
--
------ ----- --------- - -这里，我们将 Google OAuth2.0 的相关参数配置到了 ng2-handy-oauth 中，并将其引入到我们的 AppModule 中。
登录
当我们需要登录时，我们可以在组件中调用 OAuthService 的 login() 方法。这里，我们以 HomeComponent 组件中的例子来说明。
首先，在 HomeComponent 组件中导入 OAuthService：
------ - --------- - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
-- ---
------------------- ------------- ------------- --
------- -
-------------------------------------- -- -
-- -----------
---------------------------
---
-
-- ---
-在 login() 方法中，我们调用 OAuthService 的 login() 方法，并通过订阅其返回值来判断登录是否成功。当登录成功后，我们使用 Angular 的路由机制跳转到首页。
注销
当我们需要退出登录时，我们可以调用 OAuthService 的 logout() 方法。这里，我们以 HeaderComponent 组件中的例子来说明。
首先，在 HeaderComponent 组件中导入 OAuthService：
------ - --------- - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- -
-- ---
------------------- ------------- ------------- --
-------- -
---------------------------
-- ------------
----------------------------------
-
-- ---
-在 logout() 方法中，我们调用 OAuthService 的 logout() 方法，并使用 Angular 的路由机制跳转到登录页面。
示例代码
完成以上配置之后，我们就可以使用 ng2-handy-oauth 来实现整个 OAuth2.0 的流程了。以下是完整的 HomeComponent 和 HeaderComponent 的示例代码：
HomeComponent：
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - ------------ - ---- ------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
-- ---
------------------- ------------- ------------- ------- ------- ------- --
------- -
-------------------------------------- -- -
-- -----------
---------------------------
---
-
-- ---
-HeaderComponent：
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - ------------ - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- -
-- ---
------------------- ------------- ------------- ------- ------- ------- --
-------- -
---------------------------
-- ------------
----------------------------------
-
-- ---
-总结
通过本文，我们了解了如何使用 ng2-handy-oauth 这个 npm 包来简化 OAuth2.0 的实现。首先，我们需要在开发者控制台中创建 OAuth2.0 客户端 ID，并配置相关参数到 ng2-handy-oauth 中。随后，我们就可以在应用中调用 OAuthService 的 login() 和 logout() 方法来实现登录和注销 OAuth2.0。这个过程非常简单，让我们避免了复杂且花费大量时间和精力的 OAuth2.0 的实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671181e8991b448e3573