前后分离 laravel对接验证码功能

最新推荐文章于 2024-07-24 21:04:47 发布

zh7314

最新推荐文章于 2024-07-24 21:04:47 发布

阅读量200

点赞数

文章标签： laravel vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/zh7314/article/details/128381349

版权

"这篇博客介绍了在进行等保三级安全措施时，如何改进接口登录策略。原来的方法是在连续错误5次后禁止一小时登录，现在增加了验证码功能以提升安全性。通过引入'MewsCaptcha'库并在后台及前端实现验证码的生成与验证，增强了用户登录过程的安全性，防止恶意登录尝试。"

摘要由CSDN通过智能技术生成

2022年12月19日16:30:52

因为最近在做等保三级，之前接口只做了错误5次，就禁止一个小时登录，但是发现还是不好，这次添加验证码功能

composer require mews/captcha

找到config/app.php下的providers，添加

'providers' => [
         // ... 
       Mews\Captcha\CaptchaServiceProvider::class,
]

后台接口：

try {
            $data = app('captcha')->create('default', true);
            return $this->success($data);
        } catch (Exception $e) {
            return $this->fail($e);
        }

前端页面

<el-form-item class="input-prepend" prop="code">
         <span class="svg-container">
            <svg-icon icon-class="password"/>
          </span>
        <el-input placeholder="验证码" v-model="loginForm.code" style="width: 60%"></el-input>
        <el-button class="btn-up-resend" type="text" style="margin-top: -10px;padding-top:-15px">
          <img @click="changeCaptcha" :src="loginForm.captchaImg" alt="图片验证码">
        </el-button>
      </el-form-item>
	  
changeCaptcha() {
      getCaptcha().then(response => {
        this.loginForm.captchaImg = response.data.img
        this.loginForm.captchaKey = response.data.key
        // console.log(this.loginForm)
      })
    },

后端验证码

if (empty($code)) {
                throw new Exception('验证码不能为空');
            }
            if (!captcha_api_check($code, $captchaKey)) {
                throw new Exception('验证码错误');
            }