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

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('验证码错误');
            }