专栏首页Debug客栈Laravel使用gregwar/captcha生成验证码

Laravel使用gregwar/captcha生成验证码

laravel框架自身并不携带验证码类,我这里采用开源的gregwar/captcha,来做验证码,并判断是否可以登录。

安装扩展库

1、在 laravel 项目根目录下找到 composer.json 这个文件,添加 "gregwar/captcha": "1.*"  到composer.json这个文件中,如下面代码所示。

"require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.8.*",
        "laravel/tinker": "^1.0",
        "gregwar/captcha": "1.*"
    },

2、然后打开命令行,找到项目的根目录,运行composer update可以看到这个扩展库已经下载好了,PS:我安装了一遍,现在它提示没有可以更新的。

# composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating optimized autoload files

好了,安装成功就可以进行项目中运用了。

定义路由

//登录验证码
Route::get('admin/captcha', "Admin\LoginController@captcha");

定义后台引用库方法

/**
 * 验证码
 * @return Response
 */
public function captcha(Request $request){
    $builder = new CaptchaBuilder;
    $builder->build(150,47);
    //获取验证码内容
    $phrase = $builder->getPhrase();
    //把内容存入session 存储验证码
    $request->session()->flash('captchaSession', $phrase);
    //清除缓存
    ob_clean();
    //把验证码数据以jpeg图片的格式输出
    return response($builder->output())->header('Content-type','image/jpeg');
}

定义后台登录方法

/**
 * 后台登录控制方法
 * @param Request $request
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
 */
public function check(Request $request){
    //接收数值
    $name = $request->input("name");
    $pass = $request->input("pass");
    $code = $request->input("code");
    //获取验证码的数值
    $yzm = $request->session()->get('captchaSession');
    //判断用户是否输入
    if($name == ''){
        return back()->with("error", "用户名不存在");
    }
    if($pass == ''){
        return back()->with("error", "密码不存在");
    }
    if($code == ''){
        return back()->with("error", "验证码不存在");
    }
    //加密获取的数据
    $md5Pass = md5($pass);
    //验证数据库中是否有数据
    $result = DB::table('user')->where([
        ['name','=',$name],
        ['pass','=',$md5Pass]
    ])->first();
    //获取用户id
    $id = $result->id;
    // 验证验证码是否与存在session值一样
    if($code == $yzm){
        // 验证是否有该用户并且有效
        if($result){
            //向网站中存储数据
            $request->session()->put('adminUserInfo', ['name'=>$name, 'id'=>$id]);
            return redirect('/admin');
        }else{
            return back()->with("error", "好像登录失败了,重新登陆一下吧");
        }
    }else{
        return back()->with("error", "验证码输入不正确");
    }
}

前台验证码HTML代码

<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control" name="code" placeholder="验证码">
        <div class="input-group-append">
            <img src="/admin/captcha" alt="验证码" id="codeimg" onclick="captcha(this);return false;">
        </div>
    </div>
</div>

前台验证码刷新JS代码

/**
 * 点击验证码刷新验证码功能
 * @param obj
 */
function captcha(obj){
    //更换地址
    obj.src='/admin/captcha?code='+Math.random();
}

验证码获取界面

相关问题

乱码问题

这里有两个问题需要注意,照着下面的方法去直接输出验证码,你会发现验证码显示不出来,反而是一堆乱码。

public function captcha(Request $request){
    $builder = new CaptchaBuilder;
    $builder->build(150,47);
    header('Content-type','image/jpeg');
    $builder->output();
}

出现乱码错误

验证码信息有误

输出一下$phrase,发现验证码内容已经获取到了,是图片生成部分出的问题,header("Cache-Control: no-cache, must-revalidate"); 这行代码的作用是清除缓存,防止出现验证码不能刷新或显示不出来的情况,但是并没有起作用,改用 ob_clean(); 去清除浏览器缓存。然后是 header('Content-Type: image/jpeg'); $builder->output(); 这两句话的问题, $builder->output(); 返回的只是验证码图片的一些信息,并不是一张图片,所以当把它直接输出时,出来的并不是一张图片,只有这样写 return response($builder->output())->header('Content-type','image/jpeg'); 直接输出的时候,才会以图片的形式直接输出验证码。 当把它放到的src属性中,标签会自动以图片的格式输出它,也就是说header('Content-type','image/jpeg') 这时候这句话是没必要的,所以不管是 response($builder->output())->header('Content-type','image/jpeg'); 这样写,还是 header('Content-Type: image/jpeg'); $builder->output(); 这样写,结果都会显示验证码图片。 return response($builder->output())->header('Content-type','image/jpeg'); 直接输出的时候,才会以图片的形式直接输出验证码。 当把它放到的src属性中,标签会自动以图片的格式输出它,也就是说header('Content-type','image/jpeg') 这时候这句话是没必要的,所以不管是 response($builder->output())->header('Content-type','image/jpeg'); 这样写,还是 header('Content-Type: image/jpeg'); $builder->output(); 这样写,结果都会显示验证码图片。

好了,大功告成

到这里就可以了,正常显示,嘿嘿嘿.

感谢文章

止喜 《laravel5.4生成验证码》

最后感谢止喜的文章,让我解决了这个问题,同时,为了自己以后不进这个坑,写一篇这样的技术文章,其中借鉴了一点经验,谢谢。

感谢开源组件

最后感谢开源组件Gregwar/Captcha,谢谢。

本文链接:https://www.debuginn.cn/3124.html

本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webcomponent学习笔记(一)

    webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分:

    IMWeb前端团队
  • 基于Raft构建大型分布式存储系统

    最近几年来,越来越多的文章介绍了 Raft 或者 Paxos 这样的分布式一致性算法,且主要集中在算法细节和日志同步方面的应用。但是呢,这些算法的潜力并不仅限于...

    CNCF
  • 【原译】javascript中的错误处理

    A Guide to Proper Error Handling in JavaScript

    IMWeb前端团队
  • ECMAScript 2015 (ES6) in Node.js(译)

    Node.js是建立在V8引擎的基础上。通过保持对该引擎最新发布版的更新,我们可以确保能够将JavaScript ECMA-262 specification ...

    IMWeb前端团队
  • co.js 异步回调的原理

    co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。 本文将剖析 co.js 是...

    IMWeb前端团队
  • 政策驱动的持续集成?

    关于OPA(Open Policy Agent,开放政策代理),我最喜欢的一点是它可以与其他系统互操作。任何生成JSON的东西 — 现在大多数系统都可以 — 都...

    CNCF
  • npm常用命令

    npm是什么,大家都应该很熟悉了。npm的常用命令很多,为了避免经常到npm官网查找,特将常用的npm命令整理下来。

    IMWeb前端团队
  • 全响应式web前端开发

    结一老师之前有写过一篇从css角度去实现响应式的文章(下手响应式及断点设置分析),不过真正设计并实现一个全响应式网页(RWD),还需要从一开始的布局设计开始,并...

    IMWeb前端团队
  • javaScript 函数节流

    函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTim...

    IMWeb前端团队
  • 最详尽的浏览器页面渲染机制分析

    浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核...

    挨踢小子部落阁

扫码关注云+社区

领取腾讯云代金券