TP5框架集成极验验证码

为了解决在注册时被机器人刷账号，现在有个极验验证码，可以增加注册时的难度

极验验证码有一个免费版本，自行去极验验证码官网的官网注册申请，http://www.geetest.com/

官网有文档，可以自己对照集成。

下面是我的集成方法

下载SDK，放到extend中的jiyan文件夹中

lib中的文件名字改一下

在需要集成的页面引入JS 

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="http://static.geetest.com/static/tools/gt.js"></script>

在需要集成的页面中

添加下面的代码

<dd id="captcha-box" class="pwd_icon"></dd>

<script type="text/javascript">
	$(function(){
		$.ajax({
		    url: "/getData?t=" + (new Date()).getTime(),// 加随机数防止缓存
		    type: "get",
		    dataType: "json",
		    success: function (data) {
		    	var JsonObjs = $.parseJSON(data);
		        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
		        initGeetest({
		            // 以下配置参数来自服务端 SDK
		            gt: JsonObjs.gt,
		            challenge: JsonObjs.challenge,
		            offline: !JsonObjs.success,
		            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
		            new_captcha: true
		        }, handlerPopup)
		    }
		})
	})
	

</script>

 在路由文件route.php中配置一下路由

Route::get('getData','api/Jiyan/getData');

按照路由

<?php
namespace app\api\controller;

use think\Controller;
use think\Request;
// 引入 extend/wechat-sdk/wechat.class.php
// 助手函数import('wechat-sdk.wechat', EXTEND_PATH,'.class.php');

class Jiyan extends Controller
{
    public function getData()
    {
    	
		$request = Request::instance();
		$ip = $request->ip();
		import('jiyan.lib.geetestlib', EXTEND_PATH,'.class.php');
		$GtSdk = new \GeetestLib(config('xcx.JIYANID'), config('xcx.JIYANKEY'));
		session_start();
		if(!isset($_SESSION['user_id'])){
		    $_SESSION['user_id']=uniqid();// 生成一个唯一ID
		}
		$user_id = $_SESSION['user_id'];
		$data = array(
				"user_id" => $user_id, # 网站用户id
				"client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
				"ip_address" => $ip # 请在此处传输用户请求验证时所携带的IP
			);
		$status = $GtSdk->pre_process($data, 1);
		$_SESSION['gtserver'] = $status;
		$_SESSION['user_id'] = $data['user_id'];
		return $GtSdk->get_response_str();
    }
    
}

在配置项文件中配置

 

这个时候第一步验证已经完成

下面来做点击提交的验证（第二步验证）

从上面的步骤中我们看到有一个函数  handlerPopup，下面就是这个函数

<script type="text/javascript">
	
	var handlerPopup = function (captchaObj) {
		captchaObj.appendTo('#captcha-box');
	    // 注册提交按钮事件，比如在登陆页面的登陆按钮
	    $(".submit_btn").click(function () {
	        // 此处省略在登陆界面中，获取登陆数据的一些步骤
	        
	        // 先校验是否点击了验证码
	        var validate = captchaObj.getValidate();
	        if (!validate) {
	            alert('请先完成验证！');
	            return;
	        }
	        // 提交验证码信息，比如登陆页面，你需要提交登陆信息，用户名和密码等登陆数据
	        
	    });
	    // 弹出式需要绑定触发验证码弹出按钮
	    // 比如在登陆页面，这个触发按钮就是登陆按钮
	    captchaObj.bindOn(".submit_btn");
	     
	    // 将验证码加到id为captcha的元素里
	    // 验证码将会在下面指定的元素中显示出来
	    captchaObj.appendTo(".submit_btn");
	     
	    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
	};


</script>

提交是提交到 Login 控制器中

<?php

namespace app\admin\controller;

use think\Controller;
use think\Request;
use think\Db;

class Login extends Controller
{
	public function index(Request $request){
		if($request->isPost()){
			session_start();
			import('jiyan.lib.geetestlib', EXTEND_PATH,'.class.php');
			$GtSdk = new \GeetestLib(config('xcx.JIYANID'), config('xcx.JIYANKEY'));
			// 比如你设置了一个验证码是否验证通过的标识
			$code_flag=false;
			// 这里获取你之前设置的user_id，传送给极验服务器做校验
			$user_id[] = $_SESSION['user_id'];
			if ($_SESSION['gtserver'] == 1) {
			    $result = $GtSdk->success_validate($request->param('geetest_challenge'), $request->param('geetest_validate'), $request->param('geetest_seccode'), $user_id);
			    if ($result) {
			        // 验证码验证成功
			        $code_flag=true;
			    }
			}else{
			    if ($GtSdk->fail_validate($request->param('geetest_challenge'),$request->param('geetest_validate'),$request->param('geetest_seccode'))) {
			         // 验证码验证成功
			        $code_flag=true;
			    }
			}
			// 如果验证码验证成功，再进行其他校验
			if($code_flag){
			    // 其他验证操作
			    // 用户名不对时，返回2，其他错误返回3，等等。。。。
			    $username = $request->param('user_name');
				$passqord = md5($request->param('password'));
				$res = Db::name('admin')->where(['user_name'=>$username,'password'=>$passqord])->find();
				if($res){
					session('user_name',$username);
					return $this->success('登录成功','/admin');
				}else{
					return $this->error('用户名或者密码错误','/login');
				}
			}else{
			    // 验证码验证失败，返回1，这里和上面相呼应，当然我的项目没有简单的返回1，而是返回了JSON数据
			    return $this->error('验证码验证失败','/login');
			}
			
		}else{
			return $this->fetch();
		}
	}

    
}

这样就验证完成了

 

参考:https://www.cnblogs.com/caoruiy/p/5544102.html