在前端开发中，集成第三方授权登录是一个必不可少的流程。而 oauth2-oidc-client 就是一个可以简化前端应用程序和 OAuth2 / OpenID Connect 服务器之间的交互过程的 npm 包。本教程旨在介绍该包的使用方式，以及一些注意事项。
1. 安装
首先，你需要安装该 npm 包。使用以下命令进行安装：
npm install --save oauth2-oidc-client
2. 初始化客户端
在使用 oauth2-oidc-client 包之前，你需要先在身份提供者处注册你的应用，以获取一些必要的信息。随后，你可以使用以下方法初始化客户端：
-- -------------------- ---- -------
------ ---- ---- --------------
----- --------- - -----------------
----- ------------- - ---------------------
----- ------------ - --------------------
----- --------- - -------------------------------------
----- ----- - -------------
----- -------- - -
----------
--------------
-------------
----------
------
-------------- ------
--
----- --- - --- ---------------------------settings 对象中包含了客户端的各种信息，例如 client_id、client_secret、redirect_uri、authority 和 scope。同时，这里还指定了返回的响应类型为 code，代表 Authorization Code Flow。
3. 使用方法
3.1 登录
用户在前端应用程序中点击授权登录时，我们可以使用以下代码进行登录：
mgr.signinRedirect();
这段代码将重定向用户到身份提供者处进行授权登录，并在登录后跳转回我们指定的 redirect_uri。你还可以使用 mgr.signinSilent() 方法进行静默登录。
3.2 获取用户信息
在登录成功后，我们可以使用以下方法获取用户信息：
mgr.getUser().then((user) => {
console.log(user);
});getUser() 方法返回的 user 对象中包含了用户的各种信息，例如 access_token 和 id_token。
3.3 注销
当用户点击注销时，我们可以使用以下代码进行注销：
mgr.signoutRedirect();
这段代码将重定向用户到身份提供者处进行注销，并在注销成功后跳转回我们指定的 post_logout_redirect_uri。
注意事项
在使用 oauth2-oidc-client 包时，需要注意以下事项：
- 请在身份提供者处注册你的应用，获取
client_id、client_secret、redirect_uri和scope等信息。 - 请认真检查
redirect_uri和post_logout_redirect_uri是否与身份提供者处的配置相符。 - 请保护好
client_secret，避免泄露。 - 请在登录成功后，调用
getUser()方法获取用户信息，并在后续请求中带上access_token，以保持会话。 - 请在注销成功后，清除浏览器中存储的用户信息。
示例代码
-- -------------------- ---- -------
------ ---- ---- --------------
----- --------- - -----------------
----- ------------- - ---------------------
----- ------------ - --------------------
----- --------- - -------------------------------------
----- ----- - -------------
----- -------- - -
----------
--------------
-------------
----------
------
-------------- ------
--
----- --- - --- ---------------------------
------------------------- -- -
-- ----- --- ----- -
---------------------
- ---- -
------------------
-
---
----------------------------------- -- -
---------------------
---
---------------------------------- -- -
--------------------------------- -----------
---
------------------------------ -- -
----------------------
---结论
通过本教程，你学会了如何使用 oauth2-oidc-client 包进行 OAuth2/OpenID Connect 授权登录的集成。在实际使用过程中，还需要注意一些细节，请务必认真阅读说明文档，并按照规范进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f963d1de16d83a66d77