滑动拼图验证码，拼出完美画面！

前言

在当今的数字时代，随着网络安全问题的日益突出，人们对于账户安全的需求也越来越迫切。而滑动拼图验证码作为一种创新的验证方式，正逐渐受到广大用户的喜爱和应用。

滑动拼图验证码不仅能够有效抵御自动化攻击，更可以锻炼玩家的观察力和耐心。通过移动拼图块，完成完美的画面重组，既考验了你的眼力，也挑战了你的智力。

PHP代码

1<?php
2include "KgCaptchaSDK.php";
3// 填写你的 AppId，在应用管理中获取
4$appId = "appId";
5// 填写你的 AppSecret，在应用管理中获取
6$appSecret = "appSecret";
7$request = new kgCaptcha($appId, $appSecret);
8// 填写应用服务域名，在应用管理中获取
9$request->appCdn = "https://cdn6.kgcaptcha.com";
10// 前端验证成功后颁发的 token，有效期为两分钟
11$request->token = $_POST["kgCaptchaToken"];
12// 当安全策略中的防控等级为3时必须填写
13$request->userId = "kgCaptchaDemo";
14// 请求超时时间，秒
15$request->connectTimeout = 10;
16$requestResult = $request->sendRequest();
17if ($requestResult->code === 0) {
18    // 验签成功逻辑处理
19    echo "验证通过";
20} else {
21    // 验签失败逻辑处理
22    echo "验证失败，错误代码：{$requestResult->code}， 错误信息：{$requestResult->msg}";
23}

HTML代码

1<script src="https://cdn6.kgcaptcha.com/captcha.js"></script>
2<script>
3kg.captcha({
4    // 绑定元素，验证框显示区域
5    bind: "#captchaBox",
6    // 验证成功事务处理
7    success: function(e) {
8        console.log(e);
9    },
10    // 验证失败事务处理
11    failure: function(e) {
12        console.log(e);
13    },
14    // 点击刷新按钮时触发
15    refresh: function(e) {
16        console.log(e);
17    }
18});
19</script>
20<div id="captchaBox">载入中 ...</div>

效果展示

最后

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