首頁 >php框架 >ThinkPHP >前端怎麼呼叫後台tp6驗證碼

前端怎麼呼叫後台tp6驗證碼

藏色散人
藏色散人轉載
2021-12-13 14:41:142186瀏覽

環境

前端: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影片教學

以上是前端怎麼呼叫後台tp6驗證碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除