前后端分离项目的验证码实现(前端Vue,后端TP)

1.TP安装依赖

composer require topthink/think-captcha=2.0.*

2.生成验证码返回给前端

// 生成验证码

  public function getCaptcha()

  {

    $config =    [

      // 验证码字符集合  

      'codeSet' => '0123456789',

      // 验证码字体大小

      'fontSize' => 30,

      //字体

      'fontttf' => '5.ttf',

      // 验证码位数

      'length' => 4,

      // 背景颜色

      'bg' => [119, 136, 153]

    ];

    $captcha  = new Captcha($config);

    return $captcha->entry();

  }

3.前端接收

前端调接口获取验证码时请求方法的responseType要设置成'arraybuffer'

export function getCaptcha (data, responseType = 'arraybuffer') {

  return fetch({

    url: 'login/getCaptcha',

    method: 'get',

    data,

    responseType

  })

}

再通过下面的操作转为图片url

let imgURL = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))转换成图片url

注意点:

验证码的验证依赖于session,默认跨域无法传递cookies也就无法传递session_id,导致验证码验证一直是错误的

解决:

后端设置(Access-Control-Allow-Origin如果设置为*的话,即使你的XHR设置了Credentials为true游览器也不会发送cookies)

前后端分离项目的验证码实现(前端Vue,后端TP)插图

前端设置

前后端分离项目的验证码实现(前端Vue,后端TP)插图(1)

 

没有账号? 忘记密码?

社交账号快速登录