Of Stack

Method of integrating Geetest verification code into Laravel

  • 2021-10-13 06:50:49
  • OfStack

General process of Geetest integration

General logic for implementing login Register 1 Extreme Account Register 1 behavior verification in the background management of "extreme test" Configure our controllers and routes according to the official Demo Configure our login template according to the official Demo Test

Geetest Integration Details

1. Implement the general logic of login

Create Controller php artisan make: controller GeetestController

Edit Controller/app/Http/Controllers/GeetestController 


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

/**
*  This is 1 Individual integration  Geetest  Verification code  Demo  Class 
*/
class GeetestController extends Controller
{ 
 /**
 *  Import Login View 
 */
 public function login() {
  return view('Geetest/login');
 }

 /**
 *  Verify user information 
 */
 public function check() {
  return ' The user has passed the verification code verification at the front end ,  You can refine the following logic here ';
 }
}

Views are simple forms, omitted.

2. Omission = > "Registration"

3. Omission = > "Background login" = > "Behavior verification" = > Apply for 1 id & key

4. Configure the controller and routing

First of all, the core class library given by Demo is a class file called class. geetestlib. php, and the class name is GeetestLib. We create a controller with class name 1 instead of it php artisan make: controller GeetestLib

Don't copy the class, copy the contents of the class to come in

GeetestController Controller Implementation Logic 


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\GeetestLib; //  What we created and copied  GeetestLib  Core library 

/**
*  This is 1 Individual integration  Geetest  Verification code  Demo  Class 
*/
class GeetestController extends Controller
{ 
 //  Configured here  id & key
 private $captchaId = "5d467a3cb22a9310837d51720c5251f0";
 private $privateKey = "40764e6b94344f780d4b6b07148c9495";

 /**
 *  Import Login View 
 */
 public function login() {
  return view('Geetest/login');
 }

 /**
 *  Verify user information 
 */
 public function check() {
  return ' The user has passed the verification code verification at the front end ,  You can refine the following logic here ';
 }

 /**
 *  Implement the validation function:   Direct copy official demo Provided 
 */
 public function startCaptchaServlet() {
  //  The configured  id & key
  $GtSdk = new GeetestLib($this->captchaId, $this->privateKey);
  session_start();
  
  $data = array(
   "user_id" => "test", #  Website users id
   "client_type" => "web", #web: Browser on computer; h5: Browsers on mobile phones, including completely built-in mobile applications web_view ; native : Through native SDK Implant APP Mode of application 
   "ip_address" => "127.0.0.1" #  Please transfer the user's authentication request here IP
  );
  
  $status = $GtSdk->pre_process($data, 1);
  $_SESSION['gtserver'] = $status;
  $_SESSION['user_id'] = $data['user_id'];
  echo $GtSdk->get_response_str();
 }
}

Configure Route/routes/web. php 


//  Integration  Geetest  Verification code 
Route::get('GeetestLogin', 'GeetestController@login'); // Login page 
Route::get('GeetestCheck', 'GeetestController@check'); // Login authentication   (We didn't write specific logic.) 
Route::get('GeetestStartCaptchaServlet', 'GeetestController@startCaptchaServlet'); //  Call method to enable verification code

5. Improve the login templates/resources/views/Geetest/login. blade. php

Need to import jquery (app. js that we compiled with npm run dev incorporates jquery)

Need to import Demo to give gt. js, we put it under public/js <script src="/js/gt.js"></script>

In fact, in theory, it can also be placed under/resouces/assets/js/, and require comes in in/resouces/assets/js/app. js to participate in compilation, and it can be packaged and integrated directly in public/js.

On the template, you need to define two style classes. show & .hide = > Styles for gt. js manipulation tips can also be written under/resouces/assets/sass/

Submit a "login" button to the form 1 id

Copy the front-end logic js provided in Demo, and pay attention to this button under binding

Note the following. ajax configuration url must be the path we defined in web. php with 'GeetestStartCaptchaServlet'

Specific code 


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

 <!--  This is what we use  npm run dev  Compiled  css / js -->
 <link rel="stylesheet" href="/css/app.css" rel="external nofollow" >
 <script src="/js/app.js"></script>

 <!--  There are two styles that need to be used here  -->
 <style>
  .show {
   display: block;
  }
  .hide {
   display: none;
  }
 </style>

 <title> Geetest  Integration  Demo</title>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-lg-12">
    <h1 class="text-center">Geetest  Integration  Demo
     <small>
      <a href="http://www.geetest.com/" rel="external nofollow" rel="external nofollow" > Geetest  Official website  </a>
     </small> 
    </h1>
   </div>
   <div class="col-lg-12">
    <form method="GET" action="/GeetestCheck">
     <div class="form-group">
      <label for="exampleInputEmail1"> Analog mailbox address </label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" Please enter the mailbox ...">
      <small id="emailHelp" class="form-text text-muted"> We will not disclose your email address </small>
     </div>
     <div class="form-group">
      <label for="exampleInputPassword1"> Analog cipher </label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder=" Please enter your password ...">
     </div>
     <div class="form-group">
      <div id="embed-captcha"></div>
      <p id="wait" class="show"> Loading verification code ......</p>
      <p id="notice" class="hide"> Please complete the verification first </p>
     </div>
     <!--  Binding is required here 1 Buttons  -->
     <button type="submit" class="btn btn-primary" id="embed-submit"> Login </button>
    </form>
   </div>
  </div>
 </div>

 <!--  Quote  gt.js -->
 <script src="/js/gt.js"></script>
 <!--  Direct copy official Demo In js Code  -->
 <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();
    }
   });
   //  Add the verification code to the id For captcha In the elements of, there will be at the same time 3 A input Value of: geetest_challenge, geetest_validate, geetest_seccode
   captchaObj.appendTo("#embed-captcha");
   captchaObj.onReady(function () {
    $("#wait")[0].className = "hide";
   });
   //  More interface references: http://www.geetest.com/install/sections/idx-client-sdk.html
  };
  $.ajax({
   //  Get id , challenge , success (Enable or not failback ) 
   url: "/GeetestStartCaptchaServlet", //  Adding random numbers to prevent caching 
   type: "get",
   dataType: "json",
   success: function (data) {
    console.log(data);
    //  Use initGeetest Interface 
    //  Parameter 1 Configuration parameters 
    //  Parameter 2 Callback, the first of a callback 1 Parameter verification code object, which can be used later to do appendTo Events like that 
    initGeetest({
     gt: data.gt,
     challenge: data.challenge,
     new_captcha: data.new_captcha,
     product: "embed", //  Product form, including: float , embed , popup . Note that only PC Version verification code is valid 
     offline: !data.success //  Indicates that the user detects whether the polar server is down in the background, 1 You don't need attention 
     //  For more configuration parameters, see http://www.geetest.com/install/sections/idx-client-sdk.html#config
    }, handlerEmbed);
   }
  });
 </script>
</body>
</html>

Successful test

Places that can be optimized

It is better not to use a "controller" as the core class library, but to find a way to integrate GeetestLib into another place

js on the view template & css should be written in resources/assets to participate in generating app. css & app. Compilation of js

We didn't write the specific login logic. It should also be possible to verify the success of Geetest verification once again in the login verification check () method. Please refer to Demo

Related articles: