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

    目录

    在进行低价秒杀时需要做一个人机校验防止机器抢购，如下图～
    在这里插入图片描述
    此时可以使用创蓝的图文滑动验证码来实现～

    [1] 准备工作

    在创蓝云智官网注册 -> 登录 -> 认证 -> 激活产品 -> 使用

    产品激活之后可以在“已激活产品”列表查看，每个产品格式如下
    在这里插入图片描述

    点击使用可以进行一些账户配置，如服务器IP地址、余额提醒等等。。。。
    在这里插入图片描述

    [2]使用1
    (1) 引入验证码js
    <script src="https://captcha.253.com/Captcha.js">script>

    • 1
    (2) 定义button引入js
    <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
  • 相关阅读:
    资源分享（课设、说明书、资源）不定期更新
    CF1556B Take Your Places!
    linux 系统安装 or-tools 并在c++ 项目中使用
    计算机考研 | 2020年 | 计算机组成原理真题
    做推特群发群推“三不要怕”
    mysql查询json字符串内容
    WeakMap 弱引用 不会被GC所考量
    单调队列代码模板
    C语言-流程控制
    详解基于机器学习的恶意代码检测技术
  • 原文地址：https://blog.csdn.net/qq_43260366/article/details/132555642