简介
ignum-openid
是一个能够方便地在前端应用程序中使用 OpenID Connect(OIDC)进行身份验证的 JavaScript 库。OIDC 是一种标准化的认证和授权协议,与 OAuth 相关,拥有适合移动和 Web 应用程序的适合开发的流程。而 ignum-openid
这个 npm 包则是让我们可以在几行代码中实现 OIDC 身份验证的方便工具。
安装
使用 npm 安装:
npm install ignum-openid --save
使用
配置
首先,你需要创建一个配置对象,其中包含以下属性:
authority
:您使用 OIDC 服务提供程序的地址。client_id
:通过 OIDC 管理器申请的客户端 ID。redirect_uri
:身份验证成功后要重定向的 URI。response_type
:授权服务器要使用的响应类型的值。scope
:OIDC 流程中要请求的作用域。
下面是一个示例配置:
const config = { authority: 'https://example.com/auth/realms/test', client_id: 'my-client-id', redirect_uri: 'http://localhost:3000/callback', response_type: 'code', scope: 'openid profile email', };
初始化
你需要在你的应用程序中初始化这个包。 对于大多数应用程序,你需要先引入包,然后使用之前创建的配置对象来初始化客户端:
import OpenIDConnect from 'ignum-openid'; const oidc = new OpenIDConnect(config);
现在,oidc
实例已准备就绪,可以用于以下功能。
登录
首先,用户需要进行 OIDC 身份验证。 最常见的方法是让用户单击“登录”按钮。 btnLoginClick 函数是一个示例,当该按钮被点击时,将触发此函数:
btnLoginClick = async () => { // 调用 oidc.login() 方法,启动 OIDC 流程 await oidc.login(); };
该示例将调用 oidc.login()
方法。 更多信息请参考下一部分。
处理回调
OIDC 流程完成后,应用程序将重定向到您在配置阶段指定的回调 URL。 如果身份验证成功,将在 URL 参数中包含一个授权代码(或许多其他响应类型的参数)。
应用程序需要能够捕获响应并解码命令中包含的数据。 以下示例演示如何捕获回调并将其解码:
const result = await oidc.completeLogin(window.location.href); console.log('result', result);
completeLogin
函数将解码 URI,并返回对象,其中包含用户信息和其他相关数据。 本示例将其打印到控制台,以做进一步的操作。
验证
一旦用户已经登录并且您已经成功收到响应,您需要验证身份,这样您才能信任和使用用户的相关数据。
以下示例演示如何执行身份验证:
const isAuthenticated = await oidc.isAuthenticated(); if (isAuthenticated) { console.log('User is authenticated!'); console.log('Access token: ', oidc.accessToken); } else { console.log('User is NOT authenticated!'); }
调用 oidc.isAuthenticated()
方法将返回一个布尔值,指示用户是否已经通过 OIDC 身份验证。 如果已经验证,则可以访问 oidc.accessToken
属性以获取访问令牌。
退出
用户退出 OIDC 身份验证后,应用程序可以调用 oidc.logout()
方法以终止所有相关授权和令牌。
btnLogoutClick = async () => { await oidc.logout() }
其他功能
ignum-openid
还提供了其他一些有用的功能。
获取用户信息
OIDC 授权后,您可以使用 oidc.getUser()
方法来获取用户信息。 控制台将显示用户的名称、电子邮件和其他详细信息。
const user = await oidc.getUser(); console.log('User', user);
刷新令牌
访问令牌的寿命是有限的。 一旦过期,您需要使用 refresh_token 来获取一个新的访问令牌。以下示例演示如何刷新令牌:
const result = await oidc.refreshTokens(); console.log('result', result);
示例代码
以下是一个完整的示例代码:
-- -------------------- ---- ------- ------ ------------- ---- --------------- ----- ------ - - ---------- --------------------------------------- ---------- --------------- ------------- --------------------------------- -------------- ------- ------ ------- ------- ------- -- ----- ---- - --- ---------------------- ------------- - ----- -- -- - ----- ------------- -- -------------- - ----- -- -- - ----- -------------- -- ----- -------- -------------- - ----- ------ - ----- ----------------------------------------- --------------------- -------- - -- ------------------------- --- ------------ - -- ---- --------------- - ---- - -- ----- ----- --------------- - ----- ----------------------- -- ----------------- - ----------------- -- ----------------- ------------------- ------ -- ------------------ ----- ---- - ----- --------------- ------------------- ------ - ---- - ----------------- -- --- ----------------- - -
总结
使用 ignum-openid
npm 包,我们可以轻松地使 OIDC 身份验证变得更简单、更快捷,可以省去我们自己写复杂麻烦的 OIDC 流程。在我们的前端开发中,ignum-openid
这个 npm 包可以极大地简化我们的工作,我们只需要跟着简单的教程进行相应操作就可以完成 OIDC 身份验证。希望本文对您有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056e9881e8991b448e757b