温馨提示  2024年 6月我们已经停止开发者板块文章内容更新,谢谢来访。存档数据
知识 2023-08-25 39 次阅读

前端怎么调用后台tp6验证码

   

环境

前端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()的复制,只是把返回的修改如下

$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. 前端接收展示验证码

<view @click=getcaptcha()><captcha-img :captchasrc=captchasrc ></captcha-img></view>........................................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视频教程》

的原因是什么