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

环境

顺平网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联建站从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

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

........................................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视频教程》


当前标题:前端怎么调用后台tp6验证码
转载源于:http://bzwzjz.com/article/chchso.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计公司 成都网站建设 手机网站制作设计 定制网站制作 成都网站制作 成都网站设计 成都网站建设 成都网站建设 成都网站建设公司 营销型网站建设 成都营销网站建设 成都响应式网站建设 企业手机网站建设 响应式网站建设 网站建设公司 成都网站建设 重庆网站制作 专业网站建设 成都网站建设公司 成都网站制作 网站设计制作报价 网站建设方案