npm 包 oidc-azuread 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

OIDC（OpenID Connect）是一种针对身份验证和授权的基于身份验证协议的框架。OIDC Azure AD 是一款快速简单的 OpenID Connect 应用，用于 Microsoft Azure Active Directory。

本文将会介绍如何使用 npm 包 oidc-azuread，来实现在前端应用程序中使用 Azure AD 的 OIDC 协议，以便进行认证和授权等操作。

oidc-azuread 的安装

首先，需要先安装 npm 包 oidc-azuread。使用以下命令：

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

安装完毕后，在应用程序中引入依赖。

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

初始化

引入 OIDC 客户端后，需要进行初始化，以及提供 appication Id 和 window 的配置。这里以 React 为例：

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

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

其中：

  • authority：OIDC 颁发 Token 的授权服务器。
  • client_id：是应用注册时 Azure AD 发布的应用程序 ID。
  • redirect_uri：用户成功登录并同意授权后，授权服务器将用户重定向回应用程序的 URI。
  • response_type：OIDC 用于返回 Access Token 和 Identity Token。
  • scope：用于授权的作用域，授权服务器将此作为用户同意授权的一部分返回。

登录和认证

在每次用户需要登录或认证时，调用 OIDC 客户端的 signinRedirect 函数。这将重定向用户到 OIDC 提供程序以进行登录和授权。

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

如果用户已经在 Azure AD 中登录，并且已经同意授权，授权服务器将带上 access_token 和 id_token。

获取用户信息

在登录成功后，可以使用 OIDC 客户端的 getUser 函数获取用户信息。

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

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

上述代码将返回类似这样的用户信息：

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

使用 Token

将 access_token 和 id_token 存储在本地存储（localStorage）中，以便在前端应用程序中使用。

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

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

在向服务器发起请求时，可以将该 Token 发送到服务器的 HTTP 报头中进行身份验证。

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

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

退出

当用户需要退出应用程序时，调用 OIDC 客户端的 signoutRedirect 函数。

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

示例代码

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

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

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

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

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

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

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

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

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

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

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

总结

OIDC Azure AD 包提供了快速且简单的 OIDC 客户端，可用于与 Azure Active Directory 集成。使用 oidc-azuread，可以轻松地管理用户凭据、授权和身份验证。本文详细介绍了 oidc-azuread 的安装和初始化、登录和认证、获取用户信息、使用 Token 和退出等操作。希望本文对前端开发者在使用 oidc-azuread 时有所帮助。

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

阅读全文

猜你喜欢

  • npm包gulp-extract-media-query使用教程

    介绍 gulp-extract-media-query是一个基于gulp的npm包，它可以帮助你从一个包含media query的css文件中提取出来并生成新的文件，方便你分离出来各种不同的媒体查询，...

    2 年前
  • npm包 formdata-to-object 使用教程

    在前端开发中，我们经常需要在客户端向服务器发送表单数据。这些表单数据通常以 FormData 的形式传输。但在某些情况下，我们需要在客户端使用这些表单数据，我们可能会需要将这些 FormData 转换...

    2 年前
  • npm 包 lodown-nicolelong 使用教程

    前言 lodown-nicolelong 是一个用于处理 JavaScript 数组和对象的 npm 包。它包含了各种常用的函数，例如 map、filter、reduce 等，使得我们在处理 Java...

    2 年前
  • npm 包 react-ctx-menu 使用教程

    在前端开发中，我们经常需要使用弹出菜单来提供更多的功能选项。而使用npm包react-ctx-menu可以轻松实现一个自定义的上下文菜单，可以通过鼠标右键单击或长按触摸屏来激活它。

    2 年前
  • npm 包 inter-database 使用教程

    随着互联网的不断发展和应用的不断丰富，数据存储和处理变得越来越重要。inter-database 是一款 npm 包，可以帮助前端开发者轻松进行数据交互和处理。本文将详细介绍 inter-databa...

    2 年前
  • npm 包 jimpick-dathttpd 使用教程

    什么是 jimpick-dathttpd jimpick-dathttpd 是一个基于 Node.js 的 Web 服务器，它能够从本地启动一个 p2p 网络，让用户可以上传和分享文件。

    2 年前
  • npm 包 noxtron 使用教程

    前言 在前端开发中，我们经常会需要使用各种各样的 npm 包来帮助我们完成开发任务。今天，我想要介绍的是一个非常实用的 npm 包—— noxtron。 noxtron 是一个为前端开发提供实用工具和...

    2 年前
  • npm 包 basecoat 使用教程

    前言 在当今的前端开发中，npm 包已经成为了不可或缺的一部分。npm 包通过模块化的方式，提供了丰富的功能和组件，能够快速地帮助开发者完成开发任务。其中，basecoat 是一款非常实用的 npm ...

    2 年前
  • npm 包 npm-install-webpack-plugin-steamer 使用教程

    在前端开发中，我们需要权衡代码可维护性和开发效率。npm 包是一个优秀的解决方案，可以帮助我们高效地管理项目依赖和模块，提升项目开发效率。而 npm-install-webpack-plugin-st...

    2 年前
  • npm 包 vue-slider-component-dscis 使用教程

    什么是 vue-slider-component-dscis？ vue-slider-component-dscis 是一个基于 Vue.js 的轻量级滑块组件。它支持多种类型的滑块控件，包括基本滑块...

    2 年前
  • npm 包 `eslint-config-reactivestack` 使用教程

    在前端开发中，代码规范非常重要，能够提升团队合作的效率和代码的可维护性。而 eslint 是一个非常好用的代码规范工具，在使用 eslint 的过程中，可以引入 eslint 配置包，以便于快速上手。

    2 年前
  • npm 包 goibibo-airport-data-json 使用教程

    介绍 goibibo-airport-data-json 是一个基于 Node.js 的 npm 包，它提供了全球航班机场的数据。该包的数据源是 goibibo 公司维护的一个开放接口，数据更新较快，...

    2 年前
  • npm 包 autogenapi 使用教程

    简介 在前端开发中，我们经常需要和后端进行数据交互。大多数情况下，我们会通过编写接口来实现数据传输。但是，编写接口需要对后端技术有所了解，对于前端工程师来说，这可能是比较困难的。

    2 年前
  • npm 包 generator-jhipster-ff4j 使用教程

    随着前端技术的发展，构建一个全栈应用的需求越来越高。generator-jhipster-ff4j 是一个 npm 包，它提供了快速创建全栈应用程序的工具。 在这篇文章中，我们将会介绍如何使用 gen...

    2 年前
  • npm 包 mongoose-paginate-custom 使用教程

    前言 在 Node.js 开发中，使用 Mongoose 来连接 MongoDB 数据库是很常见的场景。而在进行数据分页操作时，我们需要用到一些相应的工具。本文将介绍一个 npm 包 mongoose...

    2 年前
  • npm 包 pos-amount-formatter 使用教程

    前言 在前端开发中，我们经常需要将一些数字格式化输出。而格式化数字的方式有很多种，常见的有货币格式、百分比格式等。针对 POS 终端的交易金额格式化，可以使用 pos-amount-formatter...

    2 年前
  • npm 包 sprity-jimp 使用教程

    前言 前端开发中，优化图片是一个很重要的环节。在多张图片的合并上，sprity 是一个广受好评的工具。但是在一些情况下，sprity 的可定制性不够，难以满足开发需求。

    2 年前
  • npm 包 sine-waves 使用教程

    在前端页面中，我们经常需要添加动态的波浪效果，如何实现这样的效果呢？npm 包 sine-waves 可以帮助我们实现这个目标。本文将详细介绍 sine-waves 的使用方式，包括基础用法和高级用法...

    2 年前
  • npm 包 couchdb-creator 使用教程

    简介 couchdb-creator 是一个用于自动创建 CouchDB 数据库和设计文档的 npm 包。它提供了一种快速简便的方式，让你在 CouchDB 实例中创建多个数据库和文档。

    2 年前
  • npm 包 generator-hexin-react 使用教程

    npm 包 generator-hexin-react 使用教程 简介 generator-hexin-react 是一个通过 Yeoman 的形式生成 React 应用框架的 npm 包。

    2 年前

相关推荐

    暂无文章