简介
async-oauth-popup 是一个基于 Promise的小型库，用来处理 OAuth 授权过程中的弹窗问题。由于当前浏览器对 popup 窗口访问内容的安全限制越来越严格，很多开发者都会遇到“OAuth window closed by user”这样的问题。这时，async-oauth-popup 就能帮到你。
安装
你可以通过 npm 进行安装：
npm install async-oauth-popup --save
使用方法
async-oauth-popup 主要提供了三个方法：
- popupOpen：打开 OAuth 授权的弹窗。
- popupPostMessage：在弹窗中发送一个 PostMessage 消息。
- popupClose：关闭弹窗。
popupOpen
popupOpen 方法用于打开 OAuth 授权的弹窗，函数定义如下：
function popupOpen(url: string, {name, specs?, replace = true}: PopupOptions = {}): Promise<Window>其中 url 为授权页面的链接，PopupOptions 为弹窗的选项，包括弹窗的名称（name）、弹窗的参数（specs）以及是否替代打开。
示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- --------------------
--------------------------------- - ----- -------- ------ ---------------------- --
-------------- -- -
-------------------- --------
--
---------------- -- -
-----------------------
---popupPostMessage
popupPostMessage 方法用于在弹窗中发送一个 PostMessage 消息，函数定义如下：
function popupPostMessage(message: any, targetWindow: Window, targetOrigin: string): Promise<Event>
其中，message 为要发送的消息，targetWindow 是要发送消息的窗口对象，targetOrigin 是接收消息的窗口的 URL。
示例代码如下：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
------------------ ------ -------- -- ------- ----
------------- -- -
--------------------- -------
--
---------------- -- -
-----------------------
---popupClose
popupClose 方法用于关闭弹窗，函数定义如下：
function popupClose(targetWindow: Window): Promise<void>
示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------------------
-------- -- -
--------------------
--
---------------- -- -
-----------------------
---总结
在处理 OAuth 授权的过程中，popup 弹窗的问题一直是个头疼的问题。通过使用 async-oauth-popup，我们可以轻松地解决这个问题。
通过本篇文章的介绍，我们了解了 async-oauth-popup 的安装方法、使用方法以及示例代码，相信大家都已经掌握了如何使用 async-oauth-popup 处理 OAuth 授权弹窗的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839ec