配合滑塊圖片驗證的JS來了，一行js引入即可實現

Z_Laravel發表於2023-01-14
JS

介紹

滑塊、旋轉、點選等圖片驗證的前端js，引入一行js即可方便快捷使用
後端api請閱讀部落格 滑塊驗證圖片

倉庫地址

gitee
github

覺得不錯的話，點個星星，謝謝大家

演示

滑塊前端演示 kkokk.github.io/captcha/

安裝教程

  1. 直接引入js
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>圖片驗證DEMO</title>
    </head>
    <body>
        <button type="button" onclick="captcha()">
            驗證
        </button>
    </body>
</html>
<script type="text/javascript" src="./slider/slider.js"></script>

使用說明

  1. 滑塊驗證

    <script type="text/javascript">
    function captcha(){
        // 根據 poster 獲取驗證引數
        var res = {
             title: '',
             sliderBg: './slider/img/slider.png',
             sliderKey: '1212',
             sliderY: 46
        };
        sliderStart(res,
        function(sliderKey, sliderX, sliderSuccess, sliderError){
            // sliderKey // 驗證key
            // sliderX // 驗證x軸距離
            // ...呼叫驗證介面

            // 模擬呼叫驗證介面
            const check = () => {
                  const leeway = 5 // 誤差值
                  const value = 208 // 正確值
                  if(value >= (sliderX - leeway) && value <= (sliderX + leeway)){
                      // 成功呼叫該方法
                      sliderSuccess()
                  } else {
                      // 錯誤呼叫該方法
                      // 模擬呼叫獲取驗證引數介面
                      getSliderOption(sliderError)
                  }
            }
            setTimeout(function(){
                check()
            }, 1000)
        },
        function(refresh){
            // 重新整理
            // ... 需要呼叫重新整理介面 重新獲取圖片引數

            // 模擬呼叫獲取驗證引數介面
            setTimeout(function(){
                getSliderOption(refresh)
            }, 1000)

        })
    }

    // 獲取驗證引數介面
    function getSliderOption(callback){
        const res = {
            sliderBg: './slider/img/slider.png', 
            sliderKey: '1212', 
            sliderY: 46
        }
        callback(res)
    }
</script>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章