npm 包 angular-oidc-client 使用教程

在前端开发中，我们时常需要进行身份验证和授权操作。这时候一个好用的 OIDC (OpenID Connect) 客户端就显得非常重要。Angular-oidc-client 是一个能够快速集成 OpenID Connect 以及 OAuth2 授权流的客户端库。本文将详细介绍如何在 Angular 应用中使用 angular-oidc-client 包进行用户身份认证。

安装与配置

安装

首先，我们需要在 Angular 应用中引入该包。

--- ------- ------------------- ------

配置

我们需要在根模块 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-example

结论

在本文中，我们详细介绍了如何使用 angular-oidc-client 包来集成 OIDC 和 OAuth2 授权流。这些认证技术可以确保我们的应用程序安全可靠，只允许授权的用户访问。同时，我们还介绍了如何使用 AuthGuard 和 CanActivate ，来限制访问路由和实现路由的重定向。

当然，该库还支持其他 OIDC 相关的功能，如刷新令牌(token) 和 集成拓展的配置。详细可以查看官方文档。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/101968

阅读全文

猜你喜欢

  • npm 包 @oclif/tslint 使用教程

    前言 在前端开发的过程中，我们经常会使用到一些代码规范工具，如 tslint，来保证代码的风格一致，不仅有助于代码的阅读和维护，还能提高开发效率。在本篇文章中，我们将介绍一款名为 @oclif/tsl...

    5 年前
  • npm 包 @oclif/plugin-plugins 使用教程

    前言 在进行前端开发时，我们经常需要使用各种的 npm 包来完成不同的任务。而 @oclif/plugin-plugins 是一个非常实用的 npm 包，可以帮助我们更好地管理和使用其他的 npm 插...

    5 年前
  • npm 包 @oclif/parser 使用教程

    简介 @oclif/parser 是一个命令行解析器，用于解析命令行输入参数。它是一个独立的 npm 包，由 Heroku 的开源团队开发，现在已成为一个受欢迎的解析器。

    5 年前
  • npm 包 @oclif/errors 使用教程

    前言 在前端开发中，我们需要经常处理错误信息。而 npm 上的 @oclif/errors package 提供了一种简单有效的处理错误信息的方式。在本文中，我们将介绍如何使用 @oclif/erro...

    5 年前
  • npm包 @jvmn/upload-rsync使用教程

    本教程将介绍npm包@jvmn/upload-rsync的使用方法。该包是用于将文件上传到远程服务器的工具。它可以通过rsync协议安全地传输文件，并且可以进行增量上传，提高上传效率。

    5 年前
  • npm 包 @fredfogerty/js-util 使用教程

    在前端开发中，经常需要使用 JavaScript 工具类函数，而这些函数有时候需要自己手写，这是比较费时费力的一件事情。为了提高开发效率，前端工程师会选择使用别人开发好的工具类函数，而 npm 上的各...

    5 年前
  • npm 包 @fredfogerty/js-cli 使用教程

    如果您是前端开发人员，您一定会用到 JavaScript 命令行工具。他们可以简化工作流程，提高效率。npm 包 @fredfogerty/js-cli 就是这样一款引人注目的工具，它可以帮助我们快速...

    5 年前
  • npm 包 @bluecadet/cadet 使用教程

    简介 @bluecadet/cadet 是一个轻量且易于使用的前端动画库，它提供了许多不同的动画效果和选项来帮助前端开发人员快速创建交互性和具有美感的用户界面。 该npm包使用面向对象编程方式实现，基...

    5 年前
  • npm 包 @bluecadet/bcdb 使用教程

    简介 @bluecadet/bcdb 是 Bluecadet 公司开发的一个脚手架工具，主要用于创建和管理 Bluecadet 项目的本地数据库使用。BCDB 是基于 MongoDB 和 Mongoo...

    5 年前
  • npm 包 @additive/colt 使用教程

    前言 在前端开发中，常常需要使用到颜色值。但是，在实际操作中，使用原生的颜色值并不能满足开发者对颜色的需求。因此，本文介绍一个npm包，@additive/colt，它可以方便地生成各种复杂的颜色值。

    5 年前
  • npm 包 ypackr 使用教程

    简介 ypackr 是一个用于前端项目构建的 npm 包，它支持自动化的打包、压缩、格式化、单元测试等功能，可大幅提高前端项目开发效率，是不可或缺的工具之一。本文将详细介绍如何使用 ypackr，包括...

    5 年前
  • npm 包 svn-resolver 使用教程

    简介 svn-resolver 是一个 npm 包，用于从 SVN 仓库中获取文件内容。它依赖于 svn、svn-info 和 shelljs 包。主要用于前端项目需要依赖与后端某个库，而该库代码管理...

    5 年前
  • npm 包 svn-release 使用教程

    前言 在开发前端项目的过程中，我们常常需要使用 SVN 进行版本管理。但是，当我们需要将代码更新到线上环境时，就需要手动打包、上传、解压缩等一系列操作，非常繁琐。而 svn-release 就是一款可...

    5 年前
  • npm 包 fis-project-compiler 使用教程

    前言 fis-project-compiler 是一款在前端开发中非常实用的 npm 包，它能帮助我们快速编译打包静态资源文件，提升前端开发效率。本文将结合实际案例，详细介绍 fis-project-...

    5 年前
  • npm 包 bmpackr 使用教程

    介绍 babel 是很多前端项目必备的工具，它能将 ES6 及以上版本的代码转换成 ES5 及以下版本。但是 babel 只是一个转换工具，我们还需要 webpack 的帮助进行打包。

    5 年前
  • npm 包 grunt-git-newer 使用教程

    在前端开发中，我们常常需要进行代码管理和版本控制。而 git 是目前最流行的版本控制系统之一，能够有效地协同开发和管理代码。 而对于基于 git 的项目，我们需要实现自动化打包、编译等操作，以提高开发...

    5 年前
  • npm 包 simpl-schema 使用教程

    简介 simpl-schema 是一个能够快速创建和验证数据模式的 npm 包。它使用简单的模式对象语法，支持客户端和服务器端使用。本文将介绍如何使用 simpl-schema 来创建和验证数据模式。

    5 年前
  • npm 包 @jkhong/devutils 使用教程

    介绍 @jkhong/devutils 是一个非常实用的 npm 包，它提供了一系列常用的前端开发工具函数，可以大大提升前端开发效率。 该 npm 包包含了以下几类工具函数： 字符串处理函数 数组处...

    5 年前
  • npm 包 collect-stream 使用教程

    如果你是前端开发者，那么你一定知道 npm。npm（node package manager）是世界上最大的软件注册表，也是开发者分享和发现一切代码的主要平台。npm 包 collect-stream...

    5 年前
  • npm 包 latest-version 使用教程

    简介 npm 是一个 Node.js 包管理器，而 latest-version 是 npm 上的一个模块，用来获取指定模块的最新稳定版本号。在前端开发中，我们需要不断地更新依赖包，而 latest-...

    5 年前

相关推荐

    暂无文章