背景
在很多时候咱们都会遇到验证码的多种场景,不同的产品也会应用不同的登录验证形式。
在我的项目开发中,我将 KgCaptcha 利用到搜寻和分页中,上面是我写的的记录。
开发过程
1、页面创立一个搜寻表单
<form name="search" method="post" id="searchForm">
<input type="hidden" name="page" value="" />
<ol class="word"><input type="text" name="word" value=""maxlength="30" /></ol>
<ol class="submit"><input type="submit" name=""value="" />
</form>
2、接入 KgCaptcha
<script src="captcha.js?appid=xxx"></script>
<script>
kg.captcha({
// 绑定弹窗按钮
button: "#captchaButton",
// 验证胜利事务处理
success: function (e) {
// 验证胜利,间接提交表单
console.log(e);
$('#kgCaptchaToken').val(e["token"])
setTimeout(() => {$('form[name=search]').submit()}, 500);
},
// 验证失败事务处理
failure: function (e) {console.log(e);
},
});
</script>
<a id="captchaButton" hidden> 点击弹出验证窗口 </a>
<input type="hidden" name="kgCaptchaToken" id="kgCaptchaToken" value=""/>
3、弹出验证窗口按钮
将表单提交绑定到 id 为 captchaButton 的弹出验证窗口按钮,当点击搜寻,表单提交时,弹出验证窗口,待用户验证胜利显示搜寻后果。
4、分页限度
首次搜寻,须要弹出验证;
第一页和第三页之后,须要弹出验证;
其余不须要验证的页码,间接显示搜寻后果;
if (page==''|| page=='1'|| page >'3') {$('#captchaButton').click()}
5、后端代码
后端依据以后页码,对提交的 kgCaptchaToken 进行验证,验证通过显示搜寻后果;
<?php
if ($_POST['page']==''|| $_POST['page']=='1'|| $_POST['page'] >'3') {
include "KgCaptcha/KgCaptchaSDK.php";
// 填写你的 AppId,在利用治理中获取
$appId = "xxx";
// 填写你的 AppSecret,在利用治理中获取
$appSecret = "xxx";
$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) {
// 验签胜利逻辑解决
// 输入搜寻后果
...
} else {
// 验签失败逻辑解决
// 失败,提醒谬误并跳转页面
msgbox("验证失败,错误信息:{$requestResult->msg}",'search.php');
return false;
}
} else {
// 输入搜寻后果
...
}
?>
最初
SDK 开源地址:KgCaptcha (KgCaptcha) · GitHub,顺便做了一个演示:凯格行为验证码在线体验