npm 包 oidc-azuread 使用教程-JavaScript中文网-JavaScript教程资源分享门户

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

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

oidc-azuread 的安装

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

$ npm install oidc-azuread

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

import { OidcClient } from '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 提供程序以进行登录和授权。

const login = async () => {
    await oidcClient.signinRedirect();
}

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

获取用户信息

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

const getUserInfo = async () => {
    const user = await oidcClient.getUser();

    console.log(user);
}

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

{
  "name": "John Doe",
  "email": "john.doe@example.com",
  "sub": "1234567890",
  "profile": {
    "phone_number": "+1 222 333 444"
  }
}

使用 Token

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

const storeTokens = async () => {
    const accessToken = await oidcClient.getAccessToken();
    const idToken = await oidcClient.getIdToken();

    localStorage.setItem('access_token', accessToken);
    localStorage.setItem('id_token', idToken);
}

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

const headers = {
    'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
};

fetch('https://your.api.endpoint', {
    headers,
});

退出

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

const logout = async () => {
    await oidcClient.signoutRedirect();
}

示例代码

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

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

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

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

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

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

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

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

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

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

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

总结

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

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055c2581e8991b448d9c33