ThinkPHP5使用极验验证码

第一步:将极验的SDK包放入TP框架的extend目录(使用SDK包请联系作者)

第二步:在框架的某一个控制器下,自定义方法完成获取验证码的操作

    //验证码
  public function getGtCode(){
      //引入第三方文件的方式
      Loader::import('jiyan.web.StartCaptchaServlet');
      //实例化类文件
      $obj = new \StartCaptchaServlet();
      //获取验证码数据内容
      $res = $obj->getData();
      //输出内容即可
      echo $res;
  }

第三步:在前端页面,将CSS样式放入头文件中

<style>
      #embed-captcha {
          width: 300px;
          padding-left: 0.8em;
      }
      .show {
          text-align: center;
          display: block;
      }
      .hide {
          display: none;
      }
      #notice {
          color: red;
      }
      .changepwd {
          margin-left: 150px;
      }
  </style>

第四步:引入jQuery和极验的JS文件,但是要记得,jQuery文件必须在极验文件的前边

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/gt/gt.js"></script>
(极验的文件可以去SDK中找到,放在public目录的static目录下就可以了)

第五步:在页面中嵌入HTML标签

<!--行为验证开始-->
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
<p id="notice" class="hide">请先完成验证</p>
<!--行为验证结束-->

第六步:JS内容如下,当然个别地方需要进行修改

var handlerEmbed = function (captchaObj) {
      //给按钮点击事件
      $(".sui-btn").click(function () {
          //获取账号密码(自行更改取值)
          var uname = $("#uname").val();
          var upwd = $("#upwd").val();
          //非空验证
          if (uname == "") {
              alert("用户名不能为空");
              return false;
          }

          if (upwd == "") {
              alert("密码不能为空");
              return false;
          }
          //智能验证
          var validate = captchaObj.getValidate();
          if (!validate) {
              $("#notice")[0].className = "show";
              setTimeout(function () {
                  $("#notice")[0].className = "hide";
              }, 2000);
              return false;
          }

          //请求登录接口(自行更改ajax内容)
          $.ajax({
              url:"{:url('Login/login')}",
              type:"post",
              data:{uname:uname,upwd:upwd},
              dataType:'json',
              success:function(e){
                  if(e.code!=0){
                      alert(e.msg);
                      return false;
                  }

                  location.href="http://www.tpshop.com/index.php/home/index/index.html"
              }
          })

      });
      // 将验证码加到id为captcha的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode
      captchaObj.appendTo("#embed-captcha");//将极验组件与页面元素相关联
      captchaObj.onReady(function () {
          $("#wait")[0].className = "hide";//初始化操作处理p标签
      });
      // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
  };

  //页面刚刚加载的时候请求极验接口(只需要更改接口地址就可以了)
  $(document).ready(function(){
      $.ajax({
          // 获取id,challenge,success(是否启用failback)
          url: "{:url('Login/getGtCode')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
          type: "get",
          dataType: "json",
          success: function (data) {
              // 使用initGeetest接口
              // 参数1:配置参数
              // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
              initGeetest({
                  gt: data.gt,
                  challenge: data.challenge,
                  new_captcha: data.new_captcha,
                  product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
                  offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
                  // 更多配置参数请参见:http://www.geetest.com/install/sections/);
              },handlerEmbed)
          }
      });
  });

 

 

 

 

 

上一篇:Eclipse安装Weblogic插件


下一篇:thinkphp5支持跨域(post-get-option请求)