Laravel 集成 Geetest验证码的方法

三月 06, 2019 | views
Comments 0

Geetest 集成大致过程,实现登录的大致逻辑,注册一个极验的帐号,在 “极验” 的后台管理中注册一个行为验证,根据 官方Demo 配置我们的控制器和路由,根据 官方Demo 配置我们的登录模板.

测试:Geetest 集成详细过程

1、实现登录的大致逻辑

创建控制器 php artisan make:controller GeetestController

编辑控制器 /app/Http/Controllers/GeetestController

  1. namespace App\Http\Controllers; 
  2.  
  3. use Illuminate\Http\Request; 
  4.  
  5. /** 
  6. * 这是一个集成 Geetest <a href="http://www.111cn.net/zhuanti/yanzhengma/" class="anchor" target="_blank">验证码</a>的 Demo 类 
  7. */ 
  8. class GeetestController extends Controller 
  9. {  
  10.  /** 
  11.  * 导入登录视图 
  12.  */ 
  13.  public function login() { 
  14.   return view('Geetest/login'); 
  15.  } 
  16. //phpfensi.com 
  17.  /** 
  18.  * 验证用户信息 
  19.  */ 
  20.  public function check() { 
  21.   return '用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑'; 
  22.  } 
  23. } 

视图就是简单的表单，省略。

2、省略 => “注册”

3、省略 => “后台登录” => “行为验证” => 申请一个 id & key

4、配置控制器和路由

首先， Demo 给出的核心类库 是一个类文件叫 class.geetestlib.php, 类名叫 GeetestLib 。我们创建一个类名一样的控制器来代替它 php artisan make:controller GeetestLib

不要拷贝类，拷贝类里面的内容进来即可

GeetestController 控制器实现逻辑

  1. namespace App\Http\Controllers; 
  2.  
  3. use Illuminate\Http\Request; 
  4. use App\Http\Controllers\GeetestLib; // 我们创建然后拷贝得来的 GeetestLib 核心库 
  5.  
  6. /** 
  7. * 这是一个集成 Geetest 验证码的 Demo 类 
  8. */ 
  9. class GeetestController extends Controller 
  10. {  
  11.  // 这里配置 id & key 
  12.  private $captchaId = "5d467a3cb22a9310837d51720c5251f0"; 
  13.  private $privateKey = "40764e6b94344f780d4b6b07148c9495"; 
  14.  
  15.  /** 
  16.  * 导入登录视图 
  17.  */ 
  18.  public function login() { 
  19.   return view('Geetest/login'); 
  20.  } 
  21.  
  22.  /** 
  23.  * 验证用户信息 
  24.  */ 
  25.  public function check() { 
  26.   return '用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑'; 
  27.  } 
  28.  
  29.  /** 
  30.  * 实现验证功能： 直接复制官方demo提供得 
  31.  */ 
  32.  public function startCaptchaServlet() { 
  33.   // 这里使用配置的 id & key 
  34.   $GtSdk = new GeetestLib($this->captchaId, $this->privateKey); 
  35.   session_start(); 
  36.     
  37.   $data = array( 
  38.    "user_id" => "test", # 网站用户id 
  39.    "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式 
  40.    "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP 
  41.   ); 
  42.     
  43.   $status = $GtSdk->pre_process($data, 1); 
  44.   $_SESSION['gtserver'] = $status; 
  45.   $_SESSION['user_id'] = $data['user_id']; 
  46.   echo $GtSdk->get_response_str(); 
  47.  } 
  48. } 

配置路由 /routes/web.php

  1. // 集成 Geetest 验证码 
  2. Route::get('GeetestLogin', 'GeetestController@login'); //登录页面 
  3. Route::get('GeetestCheck', 'GeetestController@check'); //登录验证 （我们没写具体逻辑） 
  4. Route::get('GeetestStartCaptchaServlet', 'GeetestController@startCaptchaServlet'); // 调用方法启用验证码 

5、完善登录模板 /resources/views/Geetest/login.blade.php

需要导入 jquery (我们用npm run dev编译的app.js整合了jquery)

需要导入 Demo 给出 gt.js ，我们放在 public/js 下 <script src="/js/gt.js"></script>

其实理论上还可以放在 /resouces/assets/js/ 下， 并且在 /resouces/assets/js/app.js 中 require 进来让它参与被编译，直接在 public/js 中打包整合生效。

在模板上，需要定义两个样式类 .show & .hide => 用于 gt.js 操控提示信息的样式 同样可以写进 /resouces/assets/sass/ 下

给 表单提交 “登录” 按钮一个id，拷贝 Demo 中提供的前端 逻辑js，注意绑定下这个按钮，注意下 .ajax 配置的 url 必须是我们在 web.php 中定义的路有 'GeetestStartCaptchaServlet'

具体代码:

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3. <head> 
  4.  <meta charset="UTF-8"> 
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  6.  
  7.  <!-- 这是我们用 npm run dev 编译后的 <a href="http://www.111cn.net/cssdiv/css.html" class="anchor" target="_blank">css</a> / js --> 
  8.  <link rel="stylesheet" href="/css/app.css" rel="external nofollow" > 
  9.  <script src="/js/app.js"></script> 
  10.  
  11.  <!-- 这里需要用到两个样式 --> 
  12.  <style> 
  13.   .show { 
  14.    display: block; 
  15.   } 
  16.   .hide { 
  17.    display: none; 
  18.   } 
  19.  </style> 
  20.  
  21.  <title> Geetest 集成 Demo</title> 
  22. </head> 
  23. <body> 
  24.  <div class="container"> 
  25.   <div class="row"> 
  26.    <div class="col-lg-12"> 
  27.     <h1 class="text-center">Geetest 集成 Demo 
  28.      <small> 
  29.       <a href="http://www.geetest.com/" rel="external nofollow" rel="external nofollow" > Geetest 官方网站 </a> 
  30.      </small>  
  31.     </h1> 
  32.    </div> 
  33.    <div class="col-lg-12"> 
  34.     <form method="GET" action="/GeetestCheck"> 
  35.      <div class="form-group"> 
  36.       <label for="exampleInputEmail1">模拟邮箱地址</label> 
  37.       <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱..."> 
  38.       <small id="emailHelp" class="form-text text-muted">我们不会公开您的邮箱</small> 
  39.      </div> 
  40.      <div class="form-group"> 
  41.       <label for="exampleInputPassword1">模拟密码</label> 
  42.       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码..."> 
  43.      </div> 
  44.      <div class="form-group"> 
  45.       <div id="embed-captcha"></div> 
  46.       <p id="wait" class="show">正在加载验证码......</p> 
  47.       <p id="notice" class="hide">请先完成验证</p> 
  48.      </div> 
  49.      <!-- 这里需要绑定一个按钮 --> 
  50.      <button type="submit" class="btn btn-primary" id="embed-submit">登录</button> 
  51.     </form> 
  52.    </div> 
  53.   </div> 
  54.  </div> 
  55.  
  56.  <!-- 引用 gt.js --> 
  57.  <script src="/js/gt.js"></script> 
  58.  <!-- 直接复制官方Demo里的js代码 --> 
  59.  <script> 
  60.   var handlerEmbed = function (captchaObj) { 
  61.    $("#embed-submit").click(function (e) { 
  62.     var validate = captchaObj.getValidate(); 
  63.     if (!validate) { 
  64.      $("#notice")[0].className = "show"; 
  65.      setTimeout(function () { 
  66.       $("#notice")[0].className = "hide"; 
  67.      }, 2000); 
  68.      e.preventDefault(); 
  69.     } 
  70.    }); 
  71.    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode 
  72.    captchaObj.appendTo("#embed-captcha"); 
  73.    captchaObj.onReady(function () { 
  74.     $("#wait")[0].className = "hide"; 
  75.    }); 
  76.    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html 
  77.   }; 
  78.   $.ajax({ 
  79.    // 获取id，challenge，success（是否启用failback） 
  80.    url: "/GeetestStartCaptchaServlet", // 加随机数防止缓存 
  81.    type: "get", 
  82.    dataType: "json", 
  83.    success: function (data) { 
  84.     console.log(data); 
  85.     // 使用initGeetest接口 
  86.     // 参数1：配置参数 
  87.     // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 
  88.     initGeetest({ 
  89.      gt: data.gt, 
  90.      challenge: data.challenge, 
  91.      new_captcha: data.new_captcha, 
  92.      product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 
  93.      offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 
  94.      // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config 
  95.     }, handlerEmbed); 
  96.    } 
  97.   }); 
  98.  </script> 
  99. </body> 
  100. </html> 

测试成功

可以优化的地方

最好不要用一个 “控制器” 充当核心类库， 应该把GeetestLib 想办法集成到另一个地方去

视图模板上的 js & css 应该写在 resources/assets 里面参与生成 app.css & app.js 的编译

具体登录逻辑我们没写,应该还可以在登录验证 check() 方法再确认一次 Geetest验证 是否成功,可以参考 Demo



zend