在前端开发中，常常需要使用后端提供的 API 接口，而验证码是常见的一种安全控制。由于验证码的特殊性，我们很难自己去实现，所以需要调用第三方验证码服务来解决这个问题。
gt3-sdk 就是一个提供验证码服务的 npm 包，包含了前端和后端 SDK，本文主要介绍前端 SDK 的使用方法。
什么是 gt3-sdk
gt3-sdk 是一个提供极验验证码的 npm 包，它提供了默认配置和多场景自定义配置功能，还支持国际化。
如何使用 gt3-sdk
安装 gt3-sdk 包
在终端中执行以下命令安装 gt3-sdk 包:
npm install gt3-sdk
加载 gt3-sdk
在你的 HTML 文件中引入 gt3-sdk 的 JS 文件:
<script src="node_modules/gt3-sdk/index.js"></script>
调用 gt3-sdk
现在你可以使用 gt3-sdk 了。以下是一个例子：
-- -------------------- ---- -------
-- ------- --
-- ---------------
--- ------ - --- ----------------
-- ------- --
-- ----------------
--- ------ - --- ---------------
--- -
--- ------- -- --
---------- ------------ -- ----------
--
-------- -------- -- ----
------ ------- -- ----
---
-- ------- --
-- ----------------
-------------------------------------------------------- ---------- -
--------------
---
-- ------- --
-- --------------------------------------------------
-------- ------------------------ -
----------------------
-- ----------------------
-
-- ------- --
-- -------------------------------------
---- ------------ ------------------ -----------------------------------API 介绍
gt3Sdk([options])
构造函数中的参数 options 是可选的。
- options.gt
这个属性是必须的，这里需要设置由极验后台分配的公钥和 challenge 数据。它的格式如下：
{
id: '极验公钥',
challenge: '极验验证的数据流水号'
}- options.product
默认值为 'popup'，可选值包括 'float', 'embed' 和 'popup'。'popup' 将弹出验证窗口，'float' 将以浮动形式展现验证码，'embed' 将在指定的元素内展现。弹出窗口是默认形式。
- options.width
该属性是必须的，因为验证码盒子在浮动、嵌入和弹出式场景中具有不同的宽度。默认情况下，浮动和嵌入宽度为 100%。默认情况下，弹窗的宽度为 420 像素。
gt3Sdk.show()
该方法将展示极验验证码。
gt3Sdk.onReady(callback)
该方法可以用来检测验证码是否可用。
gt3Sdk.onReady(function() {
console.log('gt3-sdk 初始化成功');
});gt3Sdk.onClose(callback)
验证码窗口关闭时调用的回调函数。
它的格式如下：
function onClose(captchaObj) {
console.log('验证码窗口关闭了');
}gt3Sdk.onError(callback)
在发生错误时调用的回调函数。
它的格式如下：
function onError(captchaObj) {
console.log('发生错误了');
}gt3Sdk.getValidate()
应该在用户通过指定的交互方法完成验证之后调用此方法。这将返回交互式验证结果字符串。
gt3Sdk.getVersion()
获取 SDK 的版本。
gt3Sdk.setStatus(status)
这个方法允许开发人员在验证码加载过程中更改验证码的状态，以便对其进行更好的管理。
它可以是：
- 'ready' - 指示用户可以与验证码进行交互。
- 'success' - 指示用户已成功完成验证。
- 'fail' - 指示用户已完成验证，但未通过验证。
- 'error' - 指示在验证码加载和/或交互的过程中发生了错误。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
---- ------- ---- ---
--------- -----
----- ----------
------
----- ----------------
----- ---------------
---------------------------- ------------------ ------------------ ------------------
-------------- ----------
-------
----- ---- -
------- --
-------- --
-
---- -
-------- ---- -----
----------------- --------
------ -----
-------------- ----
------- --------
---------- -----
------- -----
-------- -----
-
-------- -
----------- -------
-
--------
-------
------
------- ------------------------
---- ------------ ------------------ -----------------------------------
------- ---------------------------------------------
--------
--- ------ - --- ---------------
--- -
--- ----------------------------------- -- -----------
---------- ------------------------------------- -- ---------------
--
-------- --------
------ -------
---
-------------------------------------------------------- ---------- -
--------------
---
-------- ------------------------ -
----------------------
-- ------------------- --------------------------------------------------- -
-
---------
-------
-------总结
在本文中，我们介绍了 gt3-sdk 的安装、加载、调用和 API，希望本文对于使用 gt3-sdk 库提供了参考和指导。同时，本文的技术成分也希望能够为读者提供帮助和灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005572c81e8991b448d41ef