How does the front end call the backend tp6 verification code?

Environment

Front-end: uni-app

Back-end: thinkphp6

When making the front-end login page, I want to log in The page calls the verification code function of the backend thinkphp6, so the frontend tries to obtain the captcha image address through the backend api interface. The tried method is to set the back-end api method getCaptcha. After calling captcha_src() in the method, the image address can be obtained, and then returned to the front-end call, the verification code image can be displayed normally. But here comes the problem. When logging in, it always prompts that the verification code is incorrect. Later, after comparison, I found that the session ID of the verification code obtained was inconsistent with the session ID when I logged in and submitted, so the verification failed.

Why when the front-end points to the verification code address of thinkphp6 through the src address of the img tag, the sessionID generated by the background is different from the sessionID generated when I operate on the current page. This mechanism is still unclear.

Later I saw that there is a method create() in the captcha class to directly generate a verification code. After testing, calling this method through the API can generate a verification code and the sessionID is consistent with the sessionID when I log in later, but I encountered another One problem is that this create() method returns the response method, and the uni.request on the front end cannot be obtained, resulting in the verification code image being unable to be displayed. After thinking, I decided to modify the captcha class and change the create() method to another new method. This method returns the base64 encoding of the generated verification code, and then returns the string result to the front end. Finally, the front end can Normal display and verification login.

The specific code is as follows:

1. Add a new captcha class method createApi(). This method is actually a copy of create(), but the returned value is modified as follows ：

$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. The front-end receives and displays the verification code

<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 ="";						
						} 
				    }
				});
			},

Recommended: "The latest 10 thinkphp video tutorials"

The above is the detailed content of How does the front end call the backend tp6 verification code?. For more information, please follow other related articles on the PHP Chinese website!