前言
随着 Web 应用不断普及，越来越多的网站需要用户进行登录授权，OAuth2 协议也成为了很多网站的首选授权方式。而在开发一个 OAuth2 授权登录按钮时，我们需要处理授权的流程，并且需要生成相应的链接以及获取 access_token，这个过程会比较繁琐。因此，我们可以使用 npm 包 bz-oauth2-button 来快速集成 OAuth2 授权登录按钮。
安装
首先，我们需要在项目中安装 bz-oauth2-button 这个 npm 包。打开终端，进入项目所在的目录，执行下面的命令：
npm install bz-oauth2-button --save
使用教程
1. 引入文件
在项目中使用 bz-oauth2-button，我们需要引入对应的文件。对于 React 项目，我们需要在组件中引入：
import OAuthButton from 'bz-oauth2-button';
对于非 React 项目，我们可以在 HTML 文件中引入：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ ------------
----- ---------------- ---------------------------------
-------
------
------- -------------------------- ---- ---------------
------- ----------------------------------------
-------
-------2. 创建 OAuth2Button 实例
我们可以在组件中创建一个 OAuth2Button 实例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- -------------------
----- --------------- ------- --------- -
------------------- -
----- ------ - --- ------------------------ ---------------- ----------------
-------------------------------
-
-------- -
------ -
-----
------- ----------------------- ---- ---------------
------
--
-
-或者在纯 JavaScript 项目中创建一个 OAuth2Button 实例：
const button = new OAuthButton('client_id', 'client_secret', 'redirect_uri');
button.render('.oauth-button');OAuth2Button 的构造函数接受三个参数：client_id、client_secret，以及 redirect_uri，这些参数都是在 OAuth2 服务提供商中申请的。render 方法接受一个 CSS 选择器作为参数，表示将按钮渲染到哪个元素中。
3. 处理授权流程
当用户点击授权按钮后，OAuthButton 将会生成授权链接，并且在用户完成认证后将会重定向到指定的 redirect_uri 中，这个过程完全由 OAuthButton 来处理。
当用户成功授权，并且重定向到 redirect_uri 后，我们需要获取 URL 中的 code 参数，这个参数将在后面的请求中使用。对于 React 项目，我们可以使用 React Router 处理路由，从而获取 URL 中的参数：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- -------------------
----- --------------- ------- --------- -
------------------- -
----- ------ - --- ------------------------ ---------------- ----------------
-------------------------------
-- ---------
----- - ------- - - -----------
-------------------------- -- -
-- - ---- ----------
-----------------------------------
---
-
-------- -
------ -
-----
------- ----------------------- ---- ---------------
------
--
-
-在这个示例中，我们使用 onAuthorized 方法来处理授权成功的回调，获取 URL 中的参数，并将参数传递到目标页面中。
对于非 React 项目，我们可以手动获取 URL 中的参数：
const button = new OAuthButton('client_id', 'client_secret', 'redirect_uri');
button.render('.oauth-button');
// 处理授权成功的回调
button.onAuthorized((code) => {
// 拿到 code，可以在这里进行后续的操作
console.log(code);
});4. 请求 access_token
在获取授权码后，我们需要使用这个授权码请求 access_token。当我们使用 bz-oauth2-button 时，我们可以使用 requestAccessToken 方法来向 OAuth2 服务提供商请求 access_token：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- -------------------
----- --------------- ------- --------- -
------------------ -
-------------
---------- - -
------------- -----
--
-
----- ------------------- -
----- ------ - --- ------------------------ ---------------- ----------------
-------------------------------
----- - -------- -------- - - -----------
----- ------------ - --- ---------------------------------
----- ---- - -------------------------
-- ------ -
--- -
----- ------------ - ----- --------------------------------
--------------- ------------ ---
- ----- ------- -
---------------------
-
-
-
-------- -
----- - ------------ - - -----------
------ -
-----
------- ----------------------- ---- ---------------
------------- -- ----------- ------ ---------------------
------
--
-
-在这个示例中，我们使用 requestAccessToken 方法来向 OAuth2 服务提供商请求 access_token。如果授权码有效，并且 access_token 请求成功，我们会更新 React 组件的状态，并将 access_token 渲染到页面中。
示例代码
你可以在 GitHub 仓库 中查看完整的示例代码。
指导意义
使用 npm 包 bz-oauth2-button，我们可以快速集成 OAuth2 授权登录按钮，并且分离授权流程和获取 access_token 过程。这样既能够让我们的应用更加简洁，同时也提高了安全性，避免了因为错误的操作而导致安全隐患。希望这篇教程能够帮助你快速集成 OAuth2 授权登录按钮，在开发中提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5754