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

30962021-12-13 22:34:44

在做前端登录页面时，想在登录页面调用后端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 ="";                        
            } 
        }
    });
},