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

<body>
  <div id="app">div>
  <button style="position: absolute;top: -999999999999999999px;opacity: 0;" id="CaptchaEl" data-appid="CaptchaAppId" data-cbfn="callback" type="button" >QYbutton>
  <script>
    window.callback = function(res){
      console.log('res', res)
    }
  script>
body>
1
2
3
4
5
6
7
8
9

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('请重新尝试')
}
1
2
3
4
5
6

(4) 校验之后的回调

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

[3] 使用2

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

(1) 引入验证码js

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

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

<body>
  <div id="app">div>
  <button style="position: absolute;top: -999999999999999999px;opacity: 0;" id="CaptchaEl" type="button" >QYbutton>
  <script>
    var captcha = new Captcha('CaptchaAppId', callback, {});
    document.getElementById('CaptchaEl').onclick = function(){
      captcha.show();
    }
    function callback(res){
      console.log('res', res)
    }
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

const dom = document.getElementById('CaptchaEl')
if (dom) {
  dom.click()
} else {
  Toast.fail('请重新尝试')
}
1
2
3
4
5
6

(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')
  }
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相关阅读:
alibaba.fastjson的使用（六） -- JavaBean==》Json字符串、JSONObject、JSONArray
[附源码]计算机毕业设计JAVA小锅米线点餐管理系统
5年自动化测试，终于进字节跳动了，年薪30w其实也并非触不可及
AI应用开发之路-准备：发起一个开源小项目 DashScope SDK for .NET
[附源码]java毕业设计万科电子商城
三西格玛和六西格玛区别是什么？优思学院用一幅图告诉你
Docker安装/使用Redis（可用/详细）
[附源码]SSM计算机毕业设计基于ssm的电子网上商城JAVA
使用Windbg动态调试排查软件启动不了的问题
JS函数function

原文地址：https://blog.csdn.net/qq_43260366/article/details/132555642

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

目录

[1] 准备工作

[2]使用1

(1) 引入验证码js

(2) 定义button引入js

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

(4) 校验之后的回调

[3] 使用2

(1) 引入验证码js

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

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

(4) 校验之后的回调