# YoTest-Web-SDK **Repository Path**: yo-test-team/yo-test-web-sdk ## Basic Information - **Project Name**: YoTest-Web-SDK - **Description**: YoTest网页端（PC/H5）SDK - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: https://www.fastyotest.com - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-08-22 - **Last Updated**: 2021-10-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: Web, Captcha, yotest, SDK ## README YoTest-Web-SDK 文档 ---- Version > 基于虚拟机保护、设备特征识别和操作行为识别的新一代智能验证码，具备智能评分、抗Headless、模拟伪装、针对恶意设备自动提升验证难度等多项安全措施，帮助开发者减少恶意攻击导致的数字资产损失，强力护航业务安全。 * [仓库入口](https://gitee.com/yo-test-team/yo-test-web-sdk#%E4%BB%93%E5%BA%93%E5%85%A5%E5%8F%A3) * [兼容性](https://gitee.com/yo-test-team/yo-test-web-sdk#%E5%85%BC%E5%AE%B9%E6%80%A7) * [安装](https://gitee.com/yo-test-team/yo-test-web-sdk#%E5%AE%89%E8%A3%85) * [快速开始](https://gitee.com/yo-test-team/yo-test-web-sdk#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B) * [验证模式](https://gitee.com/yo-test-team/yo-test-web-sdk#%E9%AA%8C%E8%AF%81%E6%A8%A1%E5%BC%8F) * [API](https://gitee.com/yo-test-team/yo-test-web-sdk#api) ### 仓库入口：    ### 兼容性 > 以下兼容性根据[BrowserStack](https://live.browserstack.com/)的相关真机测试得出，仅供参考 * IE9+ * Edge 15+ * Chrome 27+ * Safari 6+ * Firefox 26+ * Android 4.4+ * iOS Safari 7+ ### 安装 > npm install yotest-web-sdk --save 或者你可以在HTML文件中引用CDN路径 ```html ``` ### 快速开始 当你使用npm进行安装后，你可以通过import直接引入 ```javascript import initYoTest from "yotest-web-sdk"; initYoTest({ accessId: "当前项目所属的accessId，可以在后台中进行获取及查看", }, (captcha)=>{ if(captcha != null){ captcha.appendTo("#captcha"); } }); ``` 如果你是通过CDN路径引入，那么你也可以轻松的使用此SDK ```html YoTest Web SDK Demo
``` ### 验证模式 * 浮动式，默认PC展现形式，移动端不支持此模式，展示为弹窗式，设置 product: "float" 时生效 ![float](./images/float.gif) ```html
... ``` * 弹窗式，设置 product: "popup" 时生效 ![popup](./images/popup.gif) ```html
... ``` * 隐藏式，设置 product: "bind" 时生效，同时需要在onReady之后自行调用 [verify](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeverify) 方法进行展现 ![bind](./images/bind.gif) ```html ``` * 自定义式，设置 product: "custom" 时生效，同时需要设置 [area](https://gitee.com/yo-test-team/yo-test-web-sdk#inityotestoption-callback) 参数 ![custom](./images/custom.gif) ```html
... ``` ### API 初始化函数 * [initYoTest(option, callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#inityotestoption-callback) Captcha实例方法 * [appendTo(selector)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeappendto) * [getValidate()](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypegetvalidate) * [reset()](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypereset) * [verify()](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeverify) * [onReady(callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeonreadycallback) * [onShow(callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeonshowcallback) * [onSuccess(callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeonsuccesscallback) * [onError(callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeonerrorcallback) * [onClose(callback)](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypeonclosecallback) * [destroy()](https://gitee.com/yo-test-team/yo-test-web-sdk#captchaprototypedestroycallback) #### initYoTest(option, callback) - `option` \ - **accessId** \ 必填，当前项目所属的accessId，可以在友验后台中进行相关获取及查看 - **product** \ 可选，默认值float，设置验证码的展现形式，其值包括浮动式（float）、弹出式（popup）、绑定式（bind）、自定义式（custom）四种，具体形式可通过 [验证模式](https://gitee.com/yo-test-team/yo-test-web-sdk#%E9%AA%8C%E8%AF%81%E6%A8%A1%E5%BC%8F) 进行选择。需要注意的是，移动端由于屏幕展现原因，是无法展现浮动式（float）的 - **area** \ 可选，仅当 product: "custom" 生效，其作用为设置验证区域。需要注意的是，请确保对应的DOM元素存在，且符合CSS Selector的规范（例如：#id、.class、tagName及其组合均为合法） - **bgColor** \ 可选，仅当 product: "custom" 生效，其设置对应验证区域的背景，支持HEX、RGB及RGBA的颜色格式 - **enforced** \ 可选，默认值false，强制每一次都进行验证，取消无感验证 - `callback` \ - **captcha**: \ 加载成功且初始化完成则返回 Captcha 实例，其具有的方法请参考下方文档说明，若加载失败，其返回为 null，请做好错误处理 - `return:` undefined 初始化 `YoTest` ，传入相关的 `option` 参数，在 `callback` 中将会得到 `YoTest` 的对应实例。 ```javascript initYoTest.default({ accessId: "", product: "custom", area: "#container", bgColor: "#ff0000", }, function(captcha) { if(captcha != null){ captcha.appendTo("#captcha"); } }); ``` #### Captcha.prototype.appendTo(selector) - selector \ 符合 CSS Selector的选择器及其组合（例如：#id、.class等） - `return`: this 用于将 Captcha 实例添加到页面之中，使其展现默认的友验按钮样式。 ```html
... ``` #### Captcha.prototype.getValidate() - `return`: \ - token \ 当前验证的凭证，需要提交给后端来进行是否通过判断 - verified \ 是否验证成功 获取当前验证结果。 ```html
... ``` #### Captcha.prototype.reset() - `return`: this 重置 Captcha 当前状态为初始化状态。 ```html
... ``` #### Captcha.prototype.onReady(callback) - callback \ 初始化成功的回调函数，无参数 - `return`: this 监听验证的初始化完成事件。 ```html
... ``` #### Captcha.prototype.onShow(callback) - callback \ 验证弹框展现的回调函数，无参数 - `return`: this 监听验证框展现的事件。 ```html
... ``` #### Captcha.prototype.onSuccess(callback) - callback \ - data \ 验证成功的相关数据 - token \ 当前验证的凭证，需要提交给后端来进行是否通过判断 - verified \ 是否验证成功 - `return`: this 验证成功的监听回调。 ```html
... ``` #### Captcha.prototype.onError(callback) - callback \ - data \ 验证错误相关数据 - code \ 错误码 - message \ 错误相关信息 - `return`: this 验证错误的监听回调。 ```html
... ``` #### Captcha.prototype.onClose(callback) - callback \ - `return`: this 验证关闭的监听回调。 ```html
... ``` #### Captcha.prototype.destroy() - `return`: null 销毁当前验证实例。 ```html
... ```