简单实现一个滑动拼图验证码

效果展示

前端代码

<script src="captcha.js?appid=xxx"></script>
<script>
kg.captcha({
    // 绑定元素,验证框显示区域
    bind: "#captchaBox",

    // 验证成功事务处理
    success: function(e) {
        console.log(e);
    },

    // 验证失败事务处理
    failure: function(e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function(e) {
        console.log(e);
    }
});
</script>

<div id="captchaBox">载入中 ...</div>

后端验证代码

<?php
include "public/KgCaptchaSDK.php";

// 填写你的 AppId,在应用管理中获取
$appId = "appId";

// 填写你的 AppSecret,在应用管理中获取
$appSecret = "appSecret";

$request = new kgCaptcha($appId, $appSecret);
// 填写应用服务域名,在应用管理中获取
$request->appCdn = "https://cdn.kgcaptcha.com";

// 前端验证成功后颁发的 token,有效期为两分钟
$request->token = $_POST["kgCaptchaToken"];

// 当安全策略中的防控等级为3时必须填写
$request->userId = "kgCaptchaDemo";

// 请求超时时间,秒
$request->connectTimeout = 10;

$requestResult = $request->sendRequest();
if ($requestResult->code === 0) {
    // 验签成功逻辑处理
    echo "验证通过";
} else {
    // 验签失败逻辑处理
    echo "验证失败,错误代码:{$requestResult->code}, 错误信息:{$requestResult->msg}";
}

相关链接

SDK 开源地址:github.com/KgCaptcha,顺便做了一个演示:www.kgcaptcha.com/demo/

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!