Comment intégrer le code de vérification Geetest avec Laravel

Cet article présente principalement la méthode d'intégration de Geetestcode de vérification avec Laravel. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

<.>Le processus général d'intégration de Geetest

1. La logique générale de réalisation de la connexion

2. Enregistrer un Geetest compte

3. Enregistrer une vérification comportementale dans la gestion en arrière-plan de "JiXian"

4. Configurer notre

   contrôleur selon la démo officielle et routage

5. Configurer notre modèle de connexion selon la Démo officielle

6. Test

Processus détaillé d'intégration de Geetest

1 Implémenter la logique générale de connexion

Créer le contrôleur php artisan make:controller GeetestController

La vue edit controller/app/Http/Controllers/GeetestController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

/**
* 这是一个集成 Geetest 验证码的 Demo 类
*/
class GeetestController extends Controller
{ 
 /**
 * 导入登录视图
 */
 public function login() {
  return view(&#39;Geetest/login&#39;);
 }

 /**
 * 验证用户信息
 */
 public function check() {
  return &#39;用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑&#39;;
 }
}

est un formulaire simple, omis.

2. Omettre => "S'inscrire"

3. Omettre => "Connexion backend" => "Vérification du comportement" => Demander un identifiant et une clé

4. Configurez le contrôleur et le routage

Tout d'abord, la bibliothèque de classes de base fournie par la démo est un fichier de classe appelé class.geetestlib.php, et le nom de la classe est GeetestLib. On crée un contrôleur avec le même nom de classe pour le remplacer php artisan make:controller GeetestLib

Ne copiez pas la classe, copiez simplement le contenu de la classe

Contrôle GeetestController Implémenter la logique

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\GeetestLib; // 我们创建然后拷贝得来的 GeetestLib 核心库

/**
* 这是一个集成 Geetest 验证码的 Demo 类
*/
class GeetestController extends Controller
{ 
 // 这里配置 id & key
 private $captchaId = "5d467a3cb22a9310837d51720c5251f0";
 private $privateKey = "40764e6b94344f780d4b6b07148c9495";

 /**
 * 导入登录视图
 */
 public function login() {
  return view(&#39;Geetest/login&#39;);
 }

 /**
 * 验证用户信息
 */
 public function check() {
  return &#39;用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑&#39;;
 }

 /**
 * 实现验证功能： 直接复制官方demo提供得
 */
 public function startCaptchaServlet() {
  // 这里使用配置的 id & key
  $GtSdk = new GeetestLib($this->captchaId, $this->privateKey);
  session_start();
  
  $data = array(
   "user_id" => "test", # 网站用户id
   "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
   "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP
  );
  
  $status = $GtSdk->pre_process($data, 1);
  $_SESSION[&#39;gtserver&#39;] = $status;
  $_SESSION[&#39;user_id&#39;] = $data[&#39;user_id&#39;];
  echo $GtSdk->get_response_str();
 }
}

Configurer les routes/routes/web.php

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

5 Améliorer le modèle de connexion/

ressources/views/Geetest/. login. blade.php

doit importer jquery (nous utilisons npm run dev compile app.js pour intégrer jquery)

doit importer Demo Étant donné gt.js, nous mettons. en public/ js sous

506d8983a822e8f0f1aa6448b551eab92cacc6d41bbb37262a98f745aa00fbf0

En fait, théoriquement il peut aussi être placé sous /resouces/assets/js/, et nécessiter dans /resouces/assets/js/app.js pour laissez-le participer à la compilation, emballez et intégrez directement dans public/js pour prendre effet.

Sur le modèle, deux classes de style doivent être définies.show & .hide => Le style utilisé pour les informations d'invite de contrôle gt.js peut également être écrit sous /resouces/assets/sass/.

Donnez un identifiant au bouton "Connexion" de soumission du formulaire

Copiez la logique frontale js fournie dans la démo, faites attention à lier ce bouton

Payer attention à la configuration .ajax L'url doit être le chemin que nous avons défini dans web.php avec 'GeetestStartCaptchaServlet'

Code spécifique

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- 这是我们用 npm run dev 编译后的 css / js -->
 <link rel="stylesheet" href="/css/app.css" rel="external nofollow" >
 <script src="/js/app.js"></script>

 <!-- 这里需要用到两个样式 -->
 <style>
  .show {
   display: block;
  }
  .hide {
   display: none;
  }
 </style>

 <title> Geetest 集成 Demo</title>
</head>
<body>
 <p class="container">
  <p class="row">
   <p class="col-lg-12">
    <h1 class="text-center">Geetest 集成 Demo
     <small>
      <a href="http://www.geetest.com/" rel="external nofollow" rel="external nofollow" > Geetest 官方网站 </a>
     </small> 
    </h1>
   </p>
   <p class="col-lg-12">
    <form method="GET" action="/GeetestCheck">
     <p class="form-group">
      <label for="exampleInputEmail1">模拟邮箱地址</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱...">
      <small id="emailHelp" class="form-text text-muted">我们不会公开您的邮箱</small>
     </p>
     <p class="form-group">
      <label for="exampleInputPassword1">模拟密码</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码...">
     </p>
     <p class="form-group">
      <p id="embed-captcha"></p>
      <p id="wait" class="show">正在加载验证码......</p>
      <p id="notice" class="hide">请先完成验证</p>
     </p>
     <!-- 这里需要绑定一个按钮 -->
     <button type="submit" class="btn btn-primary" id="embed-submit">登录</button>
    </form>
   </p>
  </p>
 </p>

 <!-- 引用 gt.js -->
 <script src="/js/gt.js"></script>
 <!-- 直接复制官方Demo里的js代码 -->
 <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的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
   captchaObj.appendTo("#embed-captcha");
   captchaObj.onReady(function () {
    $("#wait")[0].className = "hide";
   });
   // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  };
  $.ajax({
   // 获取id，challenge，success（是否启用failback）
   url: "/GeetestStartCaptchaServlet", // 加随机数防止缓存
   type: "get",
   dataType: "json",
   success: function (data) {
    console.log(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/idx-client-sdk.html#config
    }, handlerEmbed);
   }
  });
 </script>
</body>
</html>

Test réussi

Choses qui peuvent être optimisées

Il est préférable de ne pas utiliser de "contrôleur" car la bibliothèque de classes principale GeetestLib doit être intégrée à un autre endroit

<.> modèle de vue Les js & css doivent être écrits dans resources/assets pour participer à la compilation de la génération app.css & app.js

Nous n'avons pas écrit la logique de connexion spécifique. Vous devriez également être en mesure de confirmer si la vérification Geetest a réussi dans la méthode de vérification de connexion(). Vous pouvez vous référer à la Démo

Recommandations associées :

Cadre Laravel pour implémenter la couche modèle Exemple d'opération d'ajout, de suppression, de modification et de requête (CURD)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!