1，本人使用PhP进行开发，官方相关文档：
https://docs.geetest.com/install/deploy/server/php
2，在极验官网注册一个账号，获取公钥（id）、私钥（key），以便后端使用
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登入</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="/layuiadmin/style/login.css" media="all">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>60码代理后台登录</h2>
<p></p>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
<input type="text" name="username" id="username" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
<input type="password" name="password" id="password" lay-verify="required" placeholder="密码" class="layui-input">
</div>
<div class="layui-form-item" 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>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submits" id="btn">登 入</button>
</div>
</div>
</div>
</div>
<script src="/js/Lib/dist/jquery.js"></script>
<script src="/js/Lib/dist/gt.js"></script>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: '/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'user'], function(){
var $ = layui.$
,setter = layui.setter
,admin = layui.admin
,form = layui.form
,router = layui.router()
,search = router.search;
});
var handler = function (captchaObj) {
captchaObj.appendTo('#captcha');
captchaObj.onReady(function () {
$("#wait").hide();
});
$('#btn').click(function () {
var result = captchaObj.getValidate();
if (!result) {
layer.msg('请完成滑动验证', {
offset: '15px'
,icon: 2
,time: 1000
});
return;
}
$.ajax({
url: '/getVerify?t=' + (new Date()).getTime(),
type: 'get',
dataType: 'json',
data: {
username: $('#username').val(),
password: $('#password').val(),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success: function (data) {
if (data.success == 1) {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/user/login',
type: 'POST',
data: {
username:username,
password:password
},
success: function (result) {
if(result.code == 200){
layer.msg('登入成功', {
offset: '15px'
,icon: 1
,time: 1000
}, function(){
location.href = '/user'; //后台主页
});
}else{
layer.msg(result.message, {
offset: '15px'
,icon: 2
,time: 1000
});
}
}
});
} else if (data.status === 'fail') {
alert('验证失败');
captchaObj.reset();
}
}
});
})
};
$.ajax({
url: '/getVerify?t=' + (new Date()).getTime(),
type: "get",
dataType: "json",
success: function (data) {
$('#text').hide();
$('#wait').show();
// 调用 initGeetest 进行初始化
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须，不能缺少
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "popup", // 产品形式，包括：float，popup
lang: 'zh-cn',
width: "300px",
https: true
// 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
}, handler);
}
});
</script>
</body>
</html>
后端代码
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use GeetestLib;
class GeetestVerify extends Controller
{
public function GetVerify(Request $request)
{
$GtSdk = new GeetestLib(config('app.GEE_ID'), config('app.GEE_KEY'));
$user_id = getip($request);
$status = $GtSdk->pre_process($user_id);
$data = array(
'gtserver' => $status,
'user_id' => $user_id,
'client_type' => 'web',
'ip_address' => getip($request)
);
session(['verify.geetest.data' => $data]);
return response($GtSdk->get_response_str())->header('content-type', 'application/json');
}
}