不知从何时起,很多大的网站都流行用滑动条式图片验证码的形式进行登陆注册的验证。就连淘宝,阿里云也都用上了。

所以,我也要去搞个玩玩。刚好在看thinkphp手册的时候,看到了极验验证码的推广广告,出于好奇心就点击进去了。

于是乎,我就决定了,要弄个玩玩。

既然决定了,那就好好的玩下。下面我就介绍,我们的thinkphp怎么搭载极验验证码。思路都是一样的,其他的程序都是可以的,我这里因为做的是thinkphp,内容有点多,请仔细查看,便于理解。


准备阶段:首先我把你要用到的地址贴出来。


官网:    http://www.geetest.com/
官方文档:http://www.geetest.com/install/sections/idx-basic-introduction.html
github:  https://github.com/GeeTeam/gt-php-sdk.git


第一步:我们首先要去极验的官网注册个帐号。

        注册网址:http://user.geetest.com/login

4-1.png


第二步:我们要查看官网给我们的SDK接口说明。并且要将SDK代码下载下来。

        SDK接口文档:http://www.geetest.com/install/sections/idx-server-sdk.html#php

        SDk接口代码:https://github.com/GeeTeam/gt-php-sdk.git



第三步:解压文件,查看对应的文件。

4-2.png


第四步:开发阶段。


将SDK接口代码加入到thinkphp中。具体操作如下:


一、将lib文件夹下面的类文件,放到\ThinkPHP\Library\Org\Util目录下,并且修改名称GeetestLib.class.php

   在文件的头部加入命名空间namespace Org\Util;


二、控制器,自己新建一个JiyanController.class.php文件 将static目录里面的两个文件的方法全部拷贝出来。简单的修改下。


代码如下:

namespace Api\Controller;
use Think\Controller;
class JiyanController extends Controller
{
    /*
     这里id和key是测试的 
     在用户管理后台,有这两个参数,只要填上去即可。    
    */
    private $id;
    private $key;
    private $GtSdk;
    public function _initialize()
    {
        $this->id  = "b46d1900d0a894591916ea94ea91bd2c"; 
        $this->key = "36fc3fe98530eea08dfc6ce76e3d24c4";
        $this->GtSdk = new \Org\Util\GeetestLib($this->id, $this->key);
    }
    public function index()
    {
        $this->display();
    }
    /**
     * 使用Get的方式返回:challenge和capthca_id 此方式以实现前后端完全分离的开发模式 专门实现failback
     * @author Tanxu
     */
    //error_reporting(0);
    public function StartCaptchaServlet()
    {
        session_start();
        $user_id = "test";
        $status = $this->GtSdk->pre_process($user_id);
        $_SESSION['gtserver'] = $status;
        $_SESSION['user_id'] = $user_id;
        echo $this->GtSdk->get_response_str();
    }
    /**
     * 输出二次验证结果,本文件示例只是简单的输出 Yes or No
     */
    // error_reporting(0);
    public function VerifyLoginServlet()
    {
        $user_id = $_SESSION['user_id'];
        if ($_SESSION['gtserver'] == 1) {
            $result = $this->GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $user_id);
            if ($result) {
                echo 'Yes!';
            } else{
                echo 'No';
            }
        }else{
            if ($this->GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
                echo "yes";
            }else{
                echo "no";
            }
        }
    }
}

三、前台的模版页面,代码很简单。我把只列出其中的一种就好。


1、引用公用的js。


<!-- 为使用方便,直接使用jquery.js库 -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>


2、提交的表单。


<form class="popup" action="{:U('Jiyan/StartCaptchaServlet')}" method="post">
    <h2>嵌入式Demo,使用表单形式提交二次验证所需的验证结果值</h2>
    <br>
    <p>
        <label for="user">用户名:</label>
        <input class="inp" id="user" type="text" value="极验验证">
    </p>
    <br>
    <p>
        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <input class="inp" id="password" type="password" value="123456">
    </p>
    <div id="embed-captcha"></div>
    <p id="wait" class="show">正在加载验证码......</p>
    <p id="notice" class="hide">请先拖动验证码到相应位置</p>
    <br>
    <input class="btn" id="embed-submit" type="submit" value="提交">
</form>

3、下面的代码需要在页面加载后就执行,如果你使用jQuery,可以写在$(function(){});内


<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
    };
    $.ajax({
        // 获取id,challenge,success(是否启用failback)
        url: "{:U('Jiyan/StartCaptchaServlet')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1:配置参数
            // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
            }, handlerEmbed);
        }
    });
</script>

第五步:直接测试。


如果是按照上面一步步来的话,基本上是不会出现问题的。

4-3.png


按照教程步骤,很轻松的就完成了,thinkphp使用极验验证码的功能开发。

极验php接口网盘下载: http://pan.baidu.com/s/1jIO1k5S 密码: rurq

相关评论(0)
您是不是忘了说点什么?

友情提示:垃圾评论一律封号...

还没有评论,快来抢沙发吧!