前端如何調(diào)用后臺(tái)tp6驗(yàn)證碼

這篇文章主要為大家展示了“前端如何調(diào)用后臺(tái)tp6驗(yàn)證碼”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“前端如何調(diào)用后臺(tái)tp6驗(yàn)證碼”這篇文章吧。

環(huán)境

前端：uni-app

后端：thinkphp6

在做前端登錄頁面時(shí)，想在登錄頁面調(diào)用后端thinkphp6的驗(yàn)證碼功能，于是嘗試前端通過后端的api接口獲取captcha的圖片地址。嘗試的方法是設(shè)置后端的api方法getCaptcha，在方法中通過調(diào)用captcha_src()后，可以獲得圖片地址，然后再返回給前端調(diào)用，可以正常顯示驗(yàn)證碼圖片。但是問題來了，登錄時(shí)總是提示驗(yàn)證碼不正確。后來經(jīng)過對(duì)比發(fā)現(xiàn)所獲得的驗(yàn)證碼的sessionID與我登錄提交時(shí)的sessionID不一致，所以導(dǎo)致驗(yàn)證不通過。

為什么前端通過img標(biāo)簽的src地址指向thinkphp6的驗(yàn)證碼地址時(shí)，后臺(tái)所生成的sessionID與我在當(dāng)前頁面操作時(shí)所生成的sessionID不一樣呢，這個(gè)機(jī)制目前還是搞不明白。

后來看到captcha類內(nèi)有直接生成驗(yàn)證碼的方法create()，經(jīng)測試通過api調(diào)用此方法可以生成驗(yàn)證碼并且sessionID與我后續(xù)登錄時(shí)的sessionID一致，但是又遇到另一個(gè)問題，此create()方法是返回response方法的，前端的uni.request是無法獲取的，導(dǎo)致驗(yàn)證碼圖片是無法顯示的。經(jīng)過思考，確定對(duì)captcha類進(jìn)行修改，把create()方法修改為另一個(gè)新的方法，該方法返回的是生成后的驗(yàn)證碼的base64編碼，然后再把該字符串結(jié)果返回前端，最終前端可以正常顯示與驗(yàn)證登錄了。

具體代碼如下：

1. 新增captcha類的方法createApi(),該方法其實(shí)就是create()的復(fù)制，只是把返回的修改如下：

$base64_data = 'data:image/png;base64,' . base64_encode($content);//合成圖片的base64編碼
return $base64_data;

2. api方法調(diào)用返回

public function getCaptcha(){
        $captcha = Captcha::createApi();
        return apiResultShow(config("status.success"),lang("success"),$captcha);

    }

3. 前端接收展示驗(yàn)證碼

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

以上是“前端如何調(diào)用后臺(tái)tp6驗(yàn)證碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！