Laravel 集成 Geetest验证码的方法
Geetest 集成大致过程
- 实现登录的大致逻辑
- 注册一个极验的帐号
- 在 “极验” 的后台管理中注册一个行为验证
- 根据 官方Demo 配置我们的控制器和路由
- 根据 官方Demo 配置我们的登录模板
- 测试
Geetest 集成详细过程
1、实现登录的大致逻辑
创建控制器 php artisan make:controller GeetestController
编辑控制器 /app/Http/Controllers/GeetestController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
/**
* 这是一个集成 Geetest 验证码的 Demo 类
*/
class GeetestController extends Controller
{
/**
* 导入登录视图
*/
public function login() {
return view('Geetest/login');
}
/**
* 验证用户信息
*/
public function check() {
return '用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑';
}
}
视图就是简单的表单，省略。
2、省略 => “注册”
3、省略 => “后台登录” => “行为验证” => 申请一个 id & key
4、配置控制器和路由
首先， Demo 给出的核心类库 是一个类文件叫 class.geetestlib.php, 类名叫 GeetestLib 。我们创建一个类名一样的控制器来代替它 php artisan make:controller GeetestLib
不要拷贝类，拷贝类里面的内容进来即可
GeetestController 控制器实现逻辑
<?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('Geetest/login');
}
/**
* 验证用户信息
*/
public function check() {
return '用户已经在前端通过了验证码验证, 你可以在这里完善后续的逻辑';
}
/**
* 实现验证功能： 直接复制官方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['gtserver'] = $status;
$_SESSION['user_id'] = $data['user_id'];
echo $GtSdk->get_response_str();
}
}
配置路由 /routes/web.php
// 集成 Geetest 验证码
Route::get('GeetestLogin', 'GeetestController@login'); //登录页面
Route::get('GeetestCheck', 'GeetestController@check'); //登录验证 （我们没写具体逻辑）
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'
具体代码
<!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>
<div class="container">
<div class="row">
<div 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>
</div>
<div class="col-lg-12">
<form method="GET" action="/GeetestCheck">
<div 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>
</div>
<div class="form-group">
<label for="exampleInputPassword1">模拟密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码...">
</div>
<div class="form-group">
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
<p id="notice" class="hide">请先完成验证</p>
</div>
<!-- 这里需要绑定一个按钮 -->
<button type="submit" class="btn btn-primary" id="embed-submit">登录</button>
</form>
</div>
</div>
</div>
<!-- 引用 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>
测试成功
可以优化的地方
最好不要用一个 “控制器” 充当核心类库， 应该把GeetestLib 想办法集成到另一个地方去
视图模板上的 js & css 应该写在 resources/assets 里面参与生成 app.css & app.js 的编译
具体登录逻辑我们没写。应该还可以在登录验证 check() 方法再确认一次 Geetest验证 是否成功，可以参考 Demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- laravel中短信发送验证码的实现方法
- Laravel5.2使用Captcha生成验证码实现登录（session巨坑）
- Laravel下生成验证码的类
- 使用 laravel sms 构建短信验证码发送校验功能
- 在 Laravel 中 “规范” 的开发短信验证码发送功能
- laravel5.4生成验证码的代码
- laravel5.4生成验证码的实例讲解
相关推荐
-
laravel5.4生成验证码的实例讲解
总结:本篇文章介绍使用gregwar/captcha实现验证码的具体操作步骤,以及可能遇到的问题和解决办法. 操作步骤: 1, 在laravel5.4项目根目录下找到 composer.json 这个文件, 添加 "gregwar/captcha": "1.*" 到composer.json这个文件中,如下图所示. 2. 然后打开命令行,找到项目的根目录,运行composer update, 可以看到这个扩展库已经下载好了, 3.接下来,就可以正常使用验证码了,先测
-
laravel中短信发送验证码的实现方法
前言 前段时间想实现一个短信验证码的功能,但是卡了很长时间. 首先我用的是阿里云的短信服务业务,其首次接入流程如下: 在阿里云上开通短信服务后需要做的: 1,申请签名 2,申请模板 3,创建Accesskey ,值得说的是,可以通过阿里云提供的子用户进行Accesskey的创建,这样可以更安全 4,充值 laravel有很多的进行短信业务的扩展包,之前我用的是阿里大于,使用如下: 1,从终端或者命令进入您的项,运行:composer require iscms/alisms-for-la
-
在 Laravel 中 “规范” 的开发短信验证码发送功能
Laravel简介 Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. 在Laravel中已经具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM.它能方便的将"约束(constraints)"应用到关系的双方,这样你就具有了对数据的完全控制,而且享受到ActiveRecord的所有便利.Eloqu
-
laravel5.4生成验证码的代码
本篇博客介绍使用gregwar/captcha实现验证码的具体操作步骤,以及可能遇到的问题和解决办法. 操作步骤: 1.在laravel5.4项目根目录下找到 composer.json 这个文件, 添加 "gregwar/captcha": "dev-master" 和 "Gregwar\\Captcha\\": "vendor/Captcha/" 到composer.json文件中,如下图所示, 接下来,在项目根目录执行c
-
使用 laravel sms 构建短信验证码发送校验功能
laravel 实现短信验证码功能,搜索资料发现比较流行的有两个包: 一个是laravel sms 地址 https://github.com/toplan/laravel-sms 一个是easy sms 地址https://github.com/overtrue/easy-sms, 项目中需要实现一个发送和验证短信验证码的功能.以前的办法稍显繁琐.经高人指点,发现可以用 laravel-sms 这个包替代.且配置和使用简单易学.故有了这篇示例. 本例使用了Laravel 5.5. Api S
-
Laravel5.2使用Captcha生成验证码实现登录（session巨坑）
最近有朋友要我帮忙弄一下laravel的验证码登陆,所以稍稍研究了一下.(本人都快忘了咋使用laravel了) 首先,安装laravel就不用在下赘述了吧,我的版本是5.2.45(注:laravel5.2.6以上的版本中间件可以自动加载),这还是挺重要的. 安装完成之后,你需要使用composer来加载你的Captcha,具体方法就是在你的composer.json中的require数组中加上"gregwar/captcha":"1.*"这行代码.然后嘞,就在你的项
-
Laravel下生成验证码的类
本文实例为大家分享了Laravel生成验证码的类,供大家参考,具体内容如下 <?php namespace App\Tool\Validate; //验证码类 class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 private $width = 130;
-
Laravel 集成 Geetest验证码的方法
Geetest 集成大致过程 实现登录的大致逻辑 注册一个极验的帐号 在 "极验" 的后台管理中注册一个行为验证 根据 官方Demo 配置我们的控制器和路由 根据 官方Demo 配置我们的登录模板 测试 Geetest 集成详细过程 1.实现登录的大致逻辑 创建控制器 php artisan make:controller GeetestController 编辑控制器 /app/Http/Controllers/GeetestController <?php namespace
-
php的laravel框架快速集成微信登录的方法
本文面向的是php语言laravel框架的用户,介绍的是基于该框架实现的一个简易集成微信登录的方法.使用方法如下: 1. 安装php_weixin_provider 在项目下运行composer require thirdproviders/weixin,即可完成安装.安装成功后,在项目的vendor目录下应该能看到php_weixin_provider的库文件: 2. 配置微信登录的参数 一共有7个参数可以配置,分别是: client_id:对应公众号创建的应用appid client_sec
-
Laravel框架集成UEditor编辑器的方法图文与实例详解
本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor ps : 其实编辑器只是一个工具,举一反三可以用在各种代码语言或框架中 二. 探讨 通过网上求知,发现主要有两种方法实现 ①. 第一种是使用 composer 进
-
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤
前言: 本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考<基于OAuth2.0授权系统的验证码功能> 正文: 在Ant Design Pro模板中,使用账号密码登录功能部分(如下图),并没有做图形验证码的开发,所以这部分功能就需要我们自己去实现.这里登录功能其实本质是一个表单提交,所以我们只需自己开发一个图形验证码表单控件就可以,具体实现如下. 1. 图形验证码表单控件代码CaptchaInput.tsx: import React, {us
-
laravel框架邮箱认证实现方法详解
本文实例讲述了laravel框架邮箱认证实现方法.分享给大家供大家参考,具体如下: 修改 User 模型,将 Laravel 自带的邮箱认证功能集成到我们的程序中 <?php namespace App\Models; use Illuminate\Notifications\Notifiable; use Illuminate\Auth\MustVerifyEmail as MustVerifyEmailTrait; use Illuminate\Foundation\Auth\User as
-
vue中使用极验验证码的方法（附demo）
前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
-
使用开源工具制作网页验证码的方法
开发工具:eclipse.kaptcha-2.3.jar包. 一.创建Web项目: 二.新建一个Jsp页面(内容有,一个文本框,一个图片容器,一个提交按钮) <body> <img alt="random" src="randomcode.jpg" onclick="changeR(this)" style="cursor: pointer;"> <form action="check.
-
iOS本地动态生成验证码的方法
前几天app注册被人攻击了,从网上找了这个先保存下.... 用于ios本地动态生成验证码,效果如下: 导入CoreGraphics.framework 用于绘制图形 封装UIView,便捷使用,代码如下: AuthcodeView.h #import <UIKit/UIKit.h> @interface AuthcodeView : UIView @property (strong, nonatomic) NSArray *dataArray;//字符素材数组 @property (stron
-
Java随机生成手机短信验证码的方法
本文实例讲述了Java随机生成手机短信验证码的方法.分享给大家供大家参考,具体如下: /** * 创建指定数量的随机字符串 * @param numberFlag 是否是数字 * @param length * @return */ public static String createRandom(boolean numberFlag, int length){ String retStr = ""; String strTable = numberFlag ? "1234
-
asp.net使用ashx生成图形验证码的方法示例
本文实例讲述了asp.net使用ashx生成图形验证码的方法.分享给大家供大家参考,具体如下: 验证码的好处不用我多说,你们都懂的.我在网上看到有人把验证码直接写在aspx页面里,也就是说这种方式请求验证码等于请求一个页面,这样做很不科学.如下所示 <form id="form1" runat="server"> <div> <asp:Image ID="Image1" runat="server"