更新记录

1.1.1（2021-11-05）

修改v3.js引入方式

1.1.0（2021-09-03）

2021-09-03 首次提交

平台兼容性

什么是设备校验？

VAPTCHA会给每个提交验证的用户颁发一个唯一的设备指纹，此设备指纹是完全虚拟的无法被破解，只要设备不变指纹也不会变化，设备校验是在人机验证的过程中完成的，无需更多代码部署即可调用此接口，设备校验可以用于以下场景：

.免密登录 用户只要在当前设备成功登录账号后以后都可以直接登录账号。

.节约短信成本 无需每次都通过短信来验证设备和身份，VAPTCHA设备校验目前是完全免费的。

.PC端本机校验 目前市面上的本机校验都是利用电信基站的加密校验原理，成本高昂，而且无法对PC进行校验，利用VAPTCHA设备校验可以对已登记的任何联网设备进行校验。

详细参考官网文档

准备工作

登录vaptcha用户后台创建验证单元并获取vid、短信接口smsid及smskey（组件必选属性值）。

引入插件

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

（如果是编辑器版本2.6.0以上的，可略过此步。）

import vaptchaSms from '@/components/vaptcha-device/vaptcha-device.vue'
export default { 
    components:{
        vaptchaSms
    }
}

基本用法

1.将/components/vaptcha-v3/www/v3.js 和 /components/vaptcha-v3/www/view.html 两个文件上传到自己的服务器。

2.在 template 中使用组件，通过方法打开手势验证码，需用变量控制组件的显示与隐藏。

<template>  
    <view>
        <vaptcha-device
        v-if="isShowVaptcha" 
        :vid="vid" 
        :scene="scene" 
        :lang="lang" 
        :area="area"  
        :url="url"
        v-on:receive="handleMessage"
        ></vaptcha-device>
    </view>  
</template>  

    export default {
        data(){
            return {
                vid: '',
                lang: 'zh-CN',
                area: 'auto',
                scene: 0,
                url: 'https://XXX/view.html',//改成自己的服务器地址
                isShowVaptcha: false,
                status:'',
                token: '',
                server: ''
            }
        },
        created() {

        },
        methods: {  
            showWebView(){
                this.isShowVaptcha = true
            },
            handleMessage(res){
                this.isShowVaptcha = false
                this.status = res.signal
                this.token = res.data.token
                this.server = res.data.server
                if(res.signal === 'pass'){
                    console.log('验证通过')
                    // 获取token和server提交到后端校验设备
                    // 接口文档  https://www.vaptcha.com/document/install.html#%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3

                }
                if(res.signal === 'cancel'){
                    console.log('取消验证')
                }
                if(res.signal === 'error'){
                    console.log('请求超时')
                }
            }
        }  
    } 

后端代码部署

属性说明

发送短信验证码的接口文档

更多资料

vaptcha官网：https://www.vaptcha.com/