PHP laravel实现接口类型 验证码功能 含（验证码类）

什么是验证码：

验证码是一种区分用户是计算机还是人的公共全自动程序，他的作用是可以防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试 起到一定的抗并发效果。

第一步表单 ：

添加一个填写验证码的输入框，承载验证码的一个图片 在登录页面 合适位置填入下面的代码

<form method="post" class="layui-form" >
            <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <hr class="hr15">
            <input name="captcha" style="height:40px;width:150px;float:left" lay-verify="required" placeholder="验证码"  type="text" class="layui-input" >
            <img src="/admin/css/captcha.php"  onclick="this.src='/admin/css/captcha.php?' + Math.random();" width="100" height="40"  style="float:right;">
            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="button"   class="sub">
            <hr class="hr20" >
        </form>

第二步将验证码图片引入：

引入验证码类 在public/admin/css/captcha.php目录下文件中新建一个验证码的类 Captcha.php

在网上找一个自己喜欢的验证码类

下面是 captcha.php

<?php
session_start();  // 开启 Session，必须是第一句
header ('Content-Type: image/png');

$image=imagecreatetruecolor(100, 30);
//背景颜色为白色
$color=imagecolorallocate($image, 255, 255, 255);
imagefill($image, 20, 20, $color);

$code='';
for($i=0;$i<4;$i++){
    $fontSize=8;
    $x=rand(5,10)+$i*100/4;
    $y=rand(5, 15);
    // $data='abcdefghijklmnpqrstuvwxyz123456789';
    $data='ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
    $string=substr($data,rand(0, strlen($data)),1);
    $code.=$string;
    $color=imagecolorallocate($image,rand(0,120), rand(0,120), rand(0,120));
    imagestring($image, $fontSize, $x, $y, $string, $color);
}
$_SESSION['code']=$code;//存储在session里 方便页面中调用

for($i=0;$i<200;$i++){
    $pointColor=imagecolorallocate($image, rand(100, 255), rand(100, 255), rand(100, 255));
    imagesetpixel($image, rand(0, 100), rand(0, 30), $pointColor);
}
for($i=0;$i<2;$i++){
    $linePoint=imagecolorallocate($image, rand(150, 255), rand(150, 255), rand(150, 255));
    imageline($image, rand(10, 50), rand(10, 20), rand(80,90), rand(15, 25), $linePoint);
}
imagepng($image);
imagedestroy($image);

第三步： Ajax接收用户名 密码 验证码

<script>
    $('.sub').on('click',function(){
        var username=$("[name='username']").val();
        var password=$("[name='password']").val();
        var captcha=$("[name='captcha']").val();
        // console.log(username);
        // console.log(password);
        // console.log(captcha);
        //调用后台接口
        var urll="http://www.laravele.com/admin/dologin";
        $.ajax({
            url:urll,
            data:{username:username,password:password, captcha: captcha},
            dataType:"json",
            success:function(res){
                if(res.code==200){
                    alert(res.msg);
                    window.location.href="http://www.laravele.com/admin/loginff";
                }else{
                    alert(res.msg);
                }

            }
        })
    });
</script>

第四步 新建一个控制器，写入下列代码实现校验：

public  function  dologin(Request $request)
    {
        //启动session的初始化
        session_start();
        //接收用户名密码 验证码
         $req=$request->all();
        //校验用户密码是否正确
            $userData =User::where([
                            'username' =>$req['username'],
                            'password'  => md5($req['password'])
                ])->first();
         if (!$userData) {
                return json_encode(['code' => 201, 'msg' => '账号或者密码输入错误']);
            }
         
          //使用if语句进行判断两个是否相等
            if (strtolower($_SESSION["code"]) != strtolower($req['captcha'])) {
                         return json_encode(['code' => 202, 'msg' => '验证码错误']);
                     }else{
                        return json_encode(['code' => 200, 'msg' => '登录成功']);
             }

    }

使用strtolower()将字符串全部转为小写，就免去了验证码区分大小写的麻烦过程。

使用 Math.random(); 函数返回一个浮点, 伪随机数在范围从0到小于1 例如0.23017334880964824

如果验证码图片切换不了 是因为我们浏览器有缓存会在我们本地做一个缓存 当你再次发送请求的时候 它会检测缓存是否有 如果有缓存的话 它就不会发送 这也是我们浏览器的一个机制 我们需要欺骗一下浏览器在后面跟一个随机数 这样每次请求的参数就会不一样