环境前端:uni-app后端:thinkphp6
在做前端登录页面时,想在登录页面调用后端thinkphp6的验证码功能,于是尝试前端通过后端的api接口获取captcha的图片地址。尝试的方法是设置后端的api方法getcaptcha,在方法中通过调用captcha_src()后,可以获得图片地址,然后再返回给前端调用,可以正常显示验证码图片。但是问题来了,登录时总是提示验证码不正确。后来经过对比发现所获得的验证码的sessionid与我登录提交时的sessionid不一致,所以导致验证不通过。
为什么前端通过img标签的src地址指向thinkphp6的验证码地址时,后台所生成的sessionID与我在当前页面操作时所生成的sessionID不一样呢,这个机制目前还是搞不明白。
后来看到captcha类内有直接生成验证码的方法create(),经测试通过api调用此方法可以生成验证码并且sessionID与我后续登录时的sessionID一致,但是又遇到另一个问题,此create()方法是返回response方法的,前端的uni.request是无法获取的,导致验证码图片是无法显示的。经过思考,确定对captcha类进行修改,把create()方法修改为另一个新的方法,该方法返回的是生成后的验证码的base64编码,然后再把该字符串结果返回前端,最终前端可以正常显示与验证登录了。
具体代码如下:
1. 新增captcha类的方法createApi(),该方法其实就是create()的复制,只是把返回的修改如下:
新版本程序更新主要体现在:完美整合BBS论坛程序,用户只须注册一个帐号,即可全站通用!采用目前流行的Flash滚动切换广告 变换形式多样,受人喜爱!在原有提供的5种在线支付基础上增加北京云网支付!对留言本重新进行编排,加入留言验证码,后台有留言审核开关对购物系统的前台进行了一处安全更新。在原有文字友情链接基础上,增加LOGO友情链接功能强大的6种在线支付方式可选,自由切换。对新闻列表进行了调整,
立即学习“前端免费学习笔记(深入)”;
$base64_data = 'data:image/png;base64,' . base64_encode($content);//合成图片的base64编码 return $base64_data;
2. api方法调用返回
public function getCaptcha(){
$captcha = Captcha::createApi();
return apiResultShow(config("status.success"),lang("success"),$captcha);
}3. 前端接收展示验证码
....... ......... ........... ............. getCaptcha(){ var request_data = {}; var sign = this.sign(request_data); uni.request({ url: '/url/api/member/getCaptcha', data: { sign:sign }, method: 'POST', header:{ "Content-Security-Policy": "upgrade-insecure-requests", "X-Requested-With": "XMLHttpRequest", }, dataType:'json', success: (res) => { if(res.data.status == 0){ var img_src = res.data.result; this.captchaSrc = img_src; }else{ this.captchaSrc =""; } } }); },
推荐:《最新的10个thinkphp视频教程》









