您现在的位置是:网站首页 > 心得笔记

gregwar/captcha实现PHP验证码

盛悦2019-06-21138人围观
简介开发过程中,很多地方都需要使用验证码。gregwar/captcha在Composer下载排行中长居第一名榜位。本文就总结一下简单的使用方法

1、Composer安装gregwar/captcha

composer require gregwar/captcha

切换到项目下,执行以上命令,如果安装成功,会出现下面这种现象

2.png


2、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHP验证码</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row main">
        <div class="col-md-12">
            <div class="row" style="margin: 30px;">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-10 form-inline">
                            <input type="text" class="form-control" id="code" placeholder="请输入验证码">

                            <img alt="点击刷新" id="captcha" style="vertical-align: middle">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">提交</button>
                            <span id="result"></span>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>
 //页面一加载就显示一个验证码 当点击刷新后 重新加载验证码
 function getCode() {
        var ts = Date.parse(new Date()) / 1000;
 $('#captcha').attr("src", "/test?id=" + ts);
 }

    getCode();

 $(document).on('click', '#captcha', function(event) {
        event.preventDefault();
 getCode();
 });
 //点击提交 需要先判断验证码是否正确
 $(document).on('submit', 'form', function(event) {
        event.preventDefault();
 $.get('/test?action=verify', {code: $('#code').val()}, function(res, textStatus, xhr) {
            if (res == 1) {
                $('#result').css('color', 'green').html('验证成功!');
 } else {
                $('#result').css('color', 'red').html(res);
 getCode();
 }
        });
 });
</script>
</body>
</html>


3、控制器代码

<?php
namespace App\Http\Controllers\Front;
use Gregwar\Captcha\CaptchaBuilder;
use Gregwar\Captcha\PhraseBuilder;

class TestController extends Controller
{


    public function index(){
        return view('front.test.index');

    }

    public function test (Request $request) {
        session_start();
        $action = $request->input('action','');
        if ($action == 'verify') {//验证验证码输入是否正确
            $code = htmlentities(trim($request->input('code')));//验证码
            if ($code == $_SESSION['phrase']) {
                echo '1';
            } else {
                echo '验证码错误!';
            }
        } else {//输出验证码
            $phrase = new PhraseBuilder;
            // 设置验证码位数
            $code = $phrase->build(4);//如果只想生成数字的验证码,那么这行改为 $code = $phrase->build(4,'1234567890');
            // 生成验证码图片的Builder对象,配置相应属性
            $builder = new CaptchaBuilder($code, $phrase);
            // 设置背景颜色
//            $builder->setBackgroundColor(220, 210, 230);
//            $builder->setMaxAngle(25);
//            $builder->setMaxBehindLines(0);
//            $builder->setMaxFrontLines(0);
            // 可以设置图片宽高及字体
            $builder->build($width = 100, $height = 40, $font = null);

            // 获取验证码的内容并保存到session中
            $_SESSION['phrase'] = $builder->getPhrase();

            // 生成图片
            header("Cache-Control: no-cache, must-revalidate");
            header("Content-Type:image/jpeg");
            $builder->output();

            //$builder->save('out.jpg');保存图片
        }

    }
 }


4、路由

Route::get('/','Front\TestController@index');
Route::get('/test','Front\TestController@test');


5、运行效果

6、常用方法与选项

build($width = 150, $height = 40, $font = null):设置生成的验证码的宽度、高度以及字体。默认情况下,将随机使用库中的字体。

save($filename, $quality = 80):生成一张指定文件名和图片质量的jpg验证码图片。

get($quality = 80):获取jpg图片data数据。

output($quality = 80):向浏览器输出图片。

setBackgroundColor($r, $g, $b):设置验证码背景色,这个选项一般不推荐使用。

getPhrase():获取验证码内容。