插件_创蓝图文滑动验证码

乖女子@@@

已于 2023-09-06 18:45:09 修改

阅读量197

点赞数

分类专栏： # 插件文章标签： javascript

于 2023-09-06 18:40:38 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/132555642

版权

插件专栏收录该内容

11 篇文章 0 订阅

订阅专栏

data-appid=“CaptchaAppId”
CaptchaAppId是在激活产品时对接对方技术时获取的，用于验证滑块验证码是否正确。
- 当点击该按钮时，若是CaptchaAppId正确则图形弹框被调起；
- 当点击该按钮时，若是CaptchaAppId错误则Captcha.js不做任何校验–返回结果永远是校验成功
data-cbfn=“callback”
在全局声明一个回调函数，函数名与此处的callback属性值一致，在校验结束后Captcha会自动调用该函数，函数的返回值如下

(3)在恰当的时机调起验证图

const dom = document.getElementById('CaptchaEl')
if (dom) {
  dom.click()
} else {
  Toast.fail('请重新尝试')
}

(4) 校验之后的回调

created () {
  window.addEventListener('message', (res) => {
    const obj = JSON.parse(res.data || '{"message":"{"type":1}"}').message
    if (obj.type === 3) {
      // 表示验证成功 
    }
  })
}

[3] 使用2

可以通过客户端引入步骤一步一步进行～

(1) 引入验证码js

<script src="https://captcha.253.com/Captcha.js"></script>

(2) 定义Captcha构造函数引入js

<body>
  <div id="app"></div>
  <button style="position: absolute;top: -999999999999999999px;opacity: 0;" id="CaptchaEl" type="button" >QY</button>
  <script>
    var captcha = new Captcha('CaptchaAppId', callback, {});
    document.getElementById('CaptchaEl').onclick = function(){
      captcha.show();
    }
    function callback(res){
      console.log('res', res)
    }
  </script>
</body>

构造函数Captcha
```
Captcha('CaptchaAppId', callback, {})
```
- CaptchaAppId是在激活产品时对接对方技术时获取的，用于验证滑块验证码是否正确。
- callback ：回调函数，函数返回值如下
实例化对象的方法如下

(3)在恰当的时机调起验证图

按钮点击时调用实例化对象的show方法

const dom = document.getElementById('CaptchaEl')
if (dom) {
  dom.click()
} else {
  Toast.fail('请重新尝试')
}

(4) 校验之后的回调

created () {
window.addEventListener('message', (res) => {
  if(!res){
    return
  }
  try{
    const data = JSON.parse(res.data)
    if ( data.message.type == 3){
      console.log('成功')
    }
  }catch(err){
    console.log('err')
  }
})
},