关于html:滑动拼图验证码拼出完美画面

61次阅读

共计 1091 个字符,预计需要花费 3 分钟才能阅读完成。

前言

在当今的数字时代,随着网络安全问题的日益突出,人们对于账户平安的需要也越来越迫切。而滑动拼图验证码作为一种翻新的验证形式,正逐步受到宽广用户的青睐和利用。

滑动拼图验证码不仅可能无效抵挡自动化攻打,更能够锤炼玩家的观察力和急躁。通过挪动拼图块,实现完满的画面重组,既考验了你的目力,也挑战了你的智力。

PHP 代码

<?php
include "KgCaptchaSDK.php";
// 填写你的 AppId,在利用治理中获取
$appId = "appId";
// 填写你的 AppSecret,在利用治理中获取
$appSecret = "appSecret";
$request = new kgCaptcha($appId, $appSecret);
// 填写应用服务域名,在利用治理中获取
$request->appCdn = "https://cdn6.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}";
}

HTML 代码

<script src="https://cdn6.kgcaptcha.com/captcha.js"></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>

成果展现

最初

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

正文完
 0