基于虚拟机保护、设备特征识别和操作行为识别的新一代智能验证码,具备智能评分、抗 Headless、模拟伪装、针对恶意设备自动提升验证难度等多项安全措施,帮助开发者减少恶意攻击导致的数字资产损失,强力护航业务安全。
- 小程序基础库 >= 1.6.4
npm install yotest-miniprogram-sdk --save
安装完成后,请点击微信开发者工具的导航菜单中的 工具 -> 构建npm
进行 node_modules 的构建。
友验小程序SDK依赖了微信小程序的WebView组件的相关能力,因此若需要成功使用此SDK,需要提前满足三个能力:
- 小程序基础库 >= 1.6.4;
- 已绑定业务域名;
- index.html已放置在对应域名的URL路径之下,并且可以通过URL正常访问;
第一步,请确认自己的小程序基础库 >= 1.6.4,如图所示。
第二步,绑定业务域名,其步骤如下图所示,更为详细的步骤请参考微信小程序官方文档。
第三步,下载本项目的index.html,并将其上传到你项目所属的服务器、CDN或OSS服务上,若能通过绑定的 业务域名
正常访问,则预备工作完成^_^,接下来就可以顺利的进行SDK接入啦!
第一步,使用 npm 安装友验小程序组件。
> npm init
> npm install yotest-miniprogram-sdk --save
第二步,通过微信开发者工具的导航菜单中的 工具 -> 构建npm
进行 node_modules 的构建。
第三步,在项目的 app.json
中引入友验小程序组件。
{
// ...
"usingComponents": {
"yotest": "./miniprogram_npm/yotest-miniprogram-sdk/yotest/yotest",
"yotest-webview": "./miniprogram_npm/yotest-miniprogram-sdk/yotest-webview/yotest-webview"
},
// ...
}
第四步,创建验证页面,并引入 yotest-webview
组件,此处需要绑定微信小程序的 业务域名
,请参考预备工作(重要)。
<!-- pages/verify/verify.wxml -->
<!-- 此处加载的URL需要绑定业务域名,请参考文档中的预备工作 -->
<yotest-webview url="https://your.domain.com/index.html"></yotest-webview>
第五步,在业务页面引入 yotest
组件,并设置 accessId
、pageRoute
、bindsuccess
、binderror
等属性及回调函数。
<!-- pages/index/index.wxml -->
<view class="container">
<yotest
id="captcha"
accessId="your accessId"
pageRoute="../verify/verify"
bindsuccess="onVerifySuccessHandler"
binderror="onVerifyErrorHandler"
>
</yotest>
<button bindtap="onButtonTapHandler">开始验证</button>
</view>
在 JavaScript 文件中监听相关的成功或失败的事件,获取对应的验证凭证或错误信息。
/** pages/index/index.js */
Page({
onButtonTapHandler() {
this.selectComponent("#captcha").verify();
},
onVerifySuccessHandler({ detail }) {
// 验证成功,获取token及verified交给后端进行二次验证
const { token, verified } = detail;
console.log(">>>>>>>>>", token, verified);
},
onVerifyErrorHandler(event) {
// 验证失败,获取错误码及信息
const { code, message } = detail;
console.log(">>>>>>>>>", code, message);
},
});
组件属性
组件方法
组件事件
必填,当前项目所属的 accessId,可以在友验后台中进行相关获取及查看(此属性仅支持 yotest
组件)。
<yotest id="#captcha"
accessId="your accessId"
pageRoute="verify route in app.json">
</yotest>
必填,yotest-webview
组件所在 Page 的路径,请确保对应的 Page 在 app.json
中已被注册(此属性仅支持 yotest
组件)。
<yotest id="#captcha"
accessId="your accessId"
pageRoute="verify route in app.json">
</yotest>
必填,注册的域名对应的 HTML 地址,此域名需要在小程序后台进行 业务域名
绑定,域名绑定相关操作请参考预备工作(重要),对应 HTML 内容请参考index.html(此属性仅支持 yotest-webview
组件)。
<yotest-webview url="https://your.domain.com/index.html"></yotest>
return:
null
调用此 API 可以呼出验证界面并要求验证。
<!-- index.wxml -->
<yotest id="#captcha"
accessId="your accessId"
pageRoute="verify route in app.json">
</yotest>
<button bindtap="onTapHandler">开始验证</button>
/** index.js */
Page({
onTapHandler() {
this.selectComponent("#captcha").verify();
},
});
监听验证成功的事件。
<!-- index.wxml -->
<yotest id="captcha"
accessId="your accessId"
pageRoute="../verify/verify"
bindsuccess="onVerifySuccessHandler">
</yotest>
<button bindtap="onButtonTapHandler">开始验证</button>
/** index.js */
Page({
onButtonTapHandler() {
this.selectComponent("#captcha").verify();
},
onVerifySuccessHandler({ detail }) {
// 验证成功,获取token及verified交给后端进行二次验证
const { token, verified } = detail;
console.log(">>>>>>>>>", token, verified);
},
});
监听验证错误的事件。
<!-- index.wxml -->
<yotest id="captcha"
accessId="your accessId"
pageRoute="../verify/verify"
binderror="onVerifyErrorHandler">
</yotest>
<button bindtap="onButtonTapHandler">开始验证</button>
/** index.js */
Page({
onButtonTapHandler() {
this.selectComponent("#captcha").verify();
},
onVerifyErrorHandler(event) {
// 验证失败,获取错误码及信息
const { code, message } = detail;
console.log(">>>>>>>>>", code, message);
},
});