Learning
Doing is better than saying, So the world wags

准备

到极验官网注册账号,申请id和key,选择行为验证即可。
官网:https://www.geetest.com/
在你的tp5项目下打开composer,使用composer require命令下载好我已经准备好的扩展包。
安装命令:composer require huelse/geetest
我使用的环境是:php7.2thinkphp5.1.34
官方文档:https://docs.geetest.com/install/deploy/server/php

配置

在我们的配置config文件夹中新建一个config.php文件,将我们拿到的id和key写入其中,像这样:

//key配置
//路径 config/config.php
'geetest'=> [
       'captcha_id' =>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
       'private_key'=>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    ],

在控制器中写入逻辑代码:

$data = Request::param(); //传入请求数据
if(!geetest_check($data)){
    //验证失败
    return json()->data(false)->code(403);
}

在前端验证页完成样式编写和js处理:

<!-- 设定DIV -->
<form method="post">
  <input type="text" id="inputUserid" placeholder="账号" required>
  <input type="password" id="inputPassword" placeholder="密码" required>
  <div id="captcha">
    <div id="text">
      行为验证™ 安全组件加载中
    </div>
    <div id="wait" class="show">
      <div class="loading">
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
        <div class="loading-dot"></div>
      </div>
    </div>
  </div>
  <input id="submit" type="button" value="登陆">
</form>

<!-- 引入js库 -->
<!-- 注意,验证码本身是不需要 jquery 库,此处使用 jquery 仅为了在 demo 中使用,减少代码量 -->
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://www.geetest.com/demo/libs/gt.js"></script>

<script>
$(document).ready(function () {
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        $("#submit").click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                alert('请完成验证');
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/', // 自定义接收url
                    dataType: 'json',
                    data: {
                        userId: $('#inputUserid').val(),
                        userPwd: $('#inputPassword').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data) {
                            alert('登陆成功');
                            // 成功后的自定义操作
                        }
                    },
                    error: function (data) {
                        alert('登陆失败');
                        // console.log(JSON.stringify(data));
                        // 失败后的自定义操作
                    },
                });
            }
        });
        window.gt = captchaObj;
    };
    $.ajax({
        url: "geetest.html?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // console.log(data);
            $('#text').hide();
            $('#wait').show();
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "float", // 产品形式,包括:float,embed,popup 等。注意只对PC版验证码有效
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注
            }, handler);
        }
    });
});
</script>

这些库的使用都是类似的,熟悉了一个,其余基本都会。

发表评论