在前端开发中，我们经常需要实现 OAuth 授权的功能。OAuth 是开放式授权协议，允许资源的拥有者授权第三方应用访问其资源。在使用 OAuth 授权时，我们通常会使用第三方平台提供的 SDK 或者 API 进行开发，而 oauth-open 就是一个便捷的 npm 包，用于在浏览器端进行 OAuth 授权。
安装
使用 npm 安装 oauth-open：
--- ------- ----------
使用方法
oauth-open 的使用非常简单。我们只需要 import 依赖包，然后调用 open 函数即可：
------ ----- ---- -------------
------------
--------- -----------
--------- -----------------
------------ --------------------
-------------- ----------------------------------------------
------ --------
--
-------- -- -
-- --------
--------------------- -----------------------------------------
--
-------------- -- -
-- --------
---------------------
---在 open 函数中，我们需要传入以下参数：
- provider：OAuth 服务提供商，例如 facebook、google、github 等。
- clientId：OAuth 应用的客户端 ID。
- redirectUri：OAuth 授权成功后的回调地址。
- authorization：OAuth 授权页面的链接。
- scope：OAuth 授权的权限范围。
在调用 open 函数之后，oauth-open 会自动打开一个新的浏览器窗口，跳转到第三方授权页面。用户完成授权流程之后，会自动跳转到 redirectUri 的地址，并将授权成功的信息保存在 oauth-open 中，这样我们就可以从 oauth-open 中获取 access token 等信息。
示例
下面我们以获取 GitHub 用户信息为例，来介绍 oauth-open 的具体使用方法。
首先，在我们的应用中创建一个“登录 GitHub”按钮：
------- --------------------------- ---------------
在 JavaScript 中，我们监听该按钮的点击事件，并在按钮被点击时调用 open 函数，以发起 OAuth 授权请求：
------ ----- ---- -------------
----- --------------- - ----------------------
----- --------- - -----------------
----- ------------ - --------------------
----- ----------------- - -------------------------------------------
----- ----- - -------
----- ----------- - -----------------------------------------
------------------------------------- -- -- -
------------
--------- ---------
--------- ----------
------------ -------------
-------------- ------------------
------ ------
--
-------- -- -
-- --------
----- ----------- - --------------------------------------
------------------------------------ -
-------- -
-------------- ------ ----------------
--
--
---------------- -- ----------------
------------ -- -
------------------- ------- ------
---
--
-------------- -- -
-- --------
---------------------
---
---在授权成功后，我们获取 GitHub 用户的 access token，并使用该 token 发起请求获取用户信息。由于 GitHub API 的访问需要使用该 token，所以我们需要将 token 添加到请求头中（具体的 API 访问方式可以参考 GitHub API 文档）。
总结
oauth-open 提供了便捷的方法在浏览器端进行 OAuth 授权，使得我们可以快速开发应用程序，从第三方应用程序中获取用户数据。在使用 oauth-open 时，我们需要注意保护用户数据安全，避免泄露用户的 access token 等敏感信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f963d1de16d83a66d2a