简介
lux-oauth2 是一个基于 OAuth2 协议的认证授权库，用于前端应用程序。它支持多种 OAuth2 的授权方式，同时也支持自定义的授权方式。
lux-oauth2 的目标是方便快速地在应用程序中实现 OAuth2 认证授权。它的设计思路就是不让开发者过多关注 OAuth2 协议的细节，开发者只需配置好对应的参数即可使用。同时 lux-oauth2 也提供了很好的灵活性，让开发者自定义一些行为，从而适应不同的需求。
安装
在你的项目中使用 npm 进行安装：
npm install lux-oauth2 --save
使用
lux-oauth2 提供了一个 OAuth2 的客户端对象 OAuth2Client，通过实例化 OAuth2Client 对象，可以完成 OAuth2 协议的认证和授权。
配置
在实例化 OAuth2Client 对象的时候，需要传入一个配置对象。
-- -------------------- ---- ------- ------ - ------------ - ---- ------------- ----- ------ - --- -------------- --------- ----------------------------- --------- ----------------- ------------- --------------------- ------------ --------------------------------- ------ ------- ------- ------- ---
上面配置对象中各个属性的含义如下：
endpoint：OAuth2 认证服务器的地址。clientId：你在 OAuth2 认证服务器上注册的客户端 ID。clientSecret：你在 OAuth2 认证服务器上注册的客户端密钥。redirectUri：认证服务器授权后，将用户重定向回你的应用程序的地址。scope：授权请求需要的权限范围。
认证
在应用程序开始 OAuth2 认证之前，需要先构建认证授权 URL，然后将用户重定向到这个 URL。
const authorizeUrl = client.authUrl({
responseType: 'code',
state: 'random-state-string',
});
window.location.href = authorizeUrl;上述代码中，authUrl 方法用于构建认证授权 URL，返回一个 URL 字符串，其中包含了许多参数，OAuth2 认证服务器将根据这些参数来识别需要认证授权的客户端以及需要认证授权的用户，接下来用户将在认证服务器进行登录授权操作。
在完成登录授权之后，认证服务器将在 redirectUri 指定的地址上返回一个授权码。
http://localhost:3000/callback?code=AUTHORIZATION_CODE&state=RANDOM_STATE_STRING
我们需要从这个 URL 中获取到 code 参数。
const { code } = new URLSearchParams(window.location.search);
// 或者是
const params = new URLSearchParams(window.location.search);
const code = params.get('code');得到 code 参数后，我们就可以通过 OAuth2Client#requestToken 方法来请求访问令牌。
client.requestToken({ grantType: 'authorization_code', code })
.then(({ accessToken }) => console.log(`Access token: ${accessToken}`))
.catch((err) => console.error(err));这里我们使用 requestToken 方法来请求访问令牌，注意需要传入 grantType 和 code 参数。授权成功后，会返回一个包含访问令牌的对象，我们可以通过访问令牌来访问受保护的资源。
访问令牌
在得到访问令牌之后，我们就可以使用该令牌来访问受保护的资源，比如获取用户信息。
const userInfo = await client.getUserInfo(accessToken); console.log(userInfo);
上述代码中，getUserInfo 方法用于获取当前授权用户的用户信息，它需要传入访问令牌，如果访问令牌有效，则返回用户信息对象。
自定义配置
OAuth2Client 对象提供了一些自定义的配置方法，用于增强 OAuth2 的灵活性。
取消授权
const { revoked } = await client.revokeToken({ token: accessToken });
console.log(`Revoked: ${revoked}`);上述代码中，revokeToken 方法用于取消访问令牌，它需要传入访问令牌，取消成功后，将返回一个包含 revoked: true 属性的对象。
刷新访问令牌
client.refreshToken({ grantType: 'refresh_token', refreshToken })
.then(({ accessToken }) => console.log(`New access token: ${accessToken}`))
.catch((err) => console.error(err));上述代码中，refreshToken 方法用于刷新访问令牌，它需要传入 grantType 和 refreshToken 参数，刷新成功后，将返回一个包含新访问令牌的对象。
判断访问令牌是否过期
const expired = client.isAccessTokenExpired(accessToken);
console.log(`Access token is expired: ${expired}`);上面代码中，isAccessTokenExpired 方法用于判断访问令牌是否过期，如果访问令牌过期，则返回 true，否则返回 false。
示例代码
下面是一个完整的示例代码。
-- -------------------- ---- -------
------ - ------------ - ---- -------------
----- ------ - --- --------------
--------- -----------------------------
--------- -----------------
------------- ---------------------
------------ ---------------------------------
------ ------- ------- -------
---
-- ----
----- ------------ - ----------------
------------- -------
------ ----------------------
---
-------------------- - -------------
-- ------
----- - ---- - - --- ----------------------------------------
--------------------- ---------- --------------------- ---- --
-------- ----------- -- -- -
------------------- ------ -----------------
-- ----------
----- ------- - -----------------------------------------
------------------- ----- -- -------- -------------
-- ------
-------------------------------
---------------- -- ----------------------
------------ -- --------------------
-- ------
--------------------- ---------- ---------------- ------------ --
-------- ----------- -- -- ---------------- ------ ------ -----------------
------------ -- --------------------
-- ----
-------------------- ------ ----------- --
-------- ------- -- -- --------------------- -------------
------------ -- --------------------
--
------------ -- --------------------总结
lux-oauth2 是一个非常实用的 OAuth2 认证授权库，它提供了丰富的 API，让开发者可以快速方便地在前端应用程序中实现 OAuth2 认证授权。同时，它也提供了很好的灵活性，可以让开发者自定义一些行为，从而适应不同的需求。通过学习和使用 lux-oauth2 库，不仅可以深入理解 OAuth2 协议，还可以提高开发效率和代码质量，非常值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3c7