更新记录

1.0.1(2021-11-05) 下载此版本

修改v3.js引入方式

1.0.0(2021-08-16) 下载此版本

2021-8-16 首次提交


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.22 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

什么是v-sms?

由智能人机验证服务商VAPTCHA提供的短信接口,与其他短信接口相比,v-sms具有以下优势:

  1. 价格补贴 价格低至2.8分/条,远低于市场价
  2. 三网通道直连,到达率高,延时低。
  3. 短信签名自定义,不支持金融、游戏等违规短信
  4. 注册即赠送30条测试短信,用完自行充值使用,已充值短信永不过期。
  5. 提供验证码代生成接口,无需自己写相关逻辑代码。

接入流程:

1.登录VAPTCHA官网-开通短信-获取smsid 、smskey 2.若需使用自定义模板,提交审核即可,签名内容要求合规即可,暂时无需实名认证。

准备工作

登录vaptcha用户后台创建验证单元并获取vid、短信接口smsidsmskey(组件必选属性值)。

引入插件

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

(如果是编辑器版本2.6.0以上的,可略过此步。)

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

基本用法

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

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

<template>  
    <view>
        <button @click="showVaptcha()">获取短信验证码</button>
        <vaptcha-sms
        v-if="isShowVaptcha" 
        :vid="vid" 
        :scene="0" 
        :lang="lang" 
        :area="area"  
        :smsid="smsid"
        :smskey="smskey"
        :templateid="templateid"
        :countrycode="countrycode"
        :phone="phone"
        :data="data"
        v-on:receive="handleMessage"
        ></vaptcha-sms>
    </view>  
</template>  
    export default { 
        data(){
            return {
                vid: '',//验证单元vid,登录vaptcha用户后台创建
                lang: 'zh-CN',
                area: 'cn',
                isShowVaptcha: false,//控制组件的显示与隐藏
                smsid: "",
                smskey: "",
                templateid: "0",
                countrycode:"86",
                phone: "",
                data: ["_vcode", "APP登录"],
            }
        },
        methods: {  
            showVaptcha(){
                this.isShowVaptcha = true
            },
            handleMessage(res){
                this.isShowVaptcha = false
                console.log(res)
            }

后端代码部署

属性说明

属性名 类型 说明
vid String 必选,验证单元vid,登录vaptcha官网创建后获取
scene Number 可选,场景值,默认值:0
lang String 可选,语言,可选值auto,zh-CN,en,zh-TW,jp,默认值:zh-CN
area String 可选,验证节点区域,可选值 auto,sea,na,cn,默认值:cn
url String 必选, 例:https://XXX/view.html(自己服务器的地址)
smsid String 必选, 短信账户 id
smskey String 必选, 短信账户 key
templateid String 模板 id
countrycode String 可选,国别码,默认值:86
phone String 必选, 手机号
data Array 必选, 填入数据用于替换模板中的对应位置的变量

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

更多资料

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

需要获取cookie的读写权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的VAPTCHA SDK会采集用于验证的必要数据,详情可参考https://www.vaptcha.com/document/protocol.html#隐私政策

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

标准版会在验证页底部展示来自百度、google等广告联盟的随机广告,企业版无广告。

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问