Laravel使用gregwar/captcha生成验证码

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

安装扩展库

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

定义路由

代码语言：javascript复制

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

定义后台引用库方法

代码语言：javascript复制

/**
 * 验证码
 * @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');
}

定义后台登录方法

代码语言：javascript复制

/**
 * 后台登录控制方法
 * @param Request $request
 * @return IlluminateHttpRedirectResponse|IlluminateRoutingRedirector
 */
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代码

代码语言：javascript复制

<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代码

代码语言：javascript复制

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

验证码获取界面

相关问题

乱码问题

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

代码语言：javascript复制

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://cloud.tencent.com/developer/article/1558516

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

html composer 开源 laravel javascript

0 人点赞