フロントエンドはバックエンド tp6 検証コードをどのように呼び出しますか?

環境

フロントエンド: uni-app

バックエンド: thinkphp6

フロントエンドログイン時ページ、ログインしたいです このページはバックエンド thinkphp6 の検証コード関数を呼び出すため、フロントエンドはバックエンド API インターフェイスを介してキャプチャ画像アドレスを取得しようとします。試した方法は、バックエンドAPIのメソッドgetCaptchaを設定し、メソッド内でcaptcha_src()を呼び出した後、画像アドレスを取得し、フロントエンド呼び出しに戻すことで正常に認証コード画像を表示することができました。しかし、ここで問題が発生し、ログイン時に必ず確認コードが間違っているというメッセージが表示されます。後で比較したところ、取得した認証コードのセッションIDが、ログインして送信したときのセッションIDと一致しないことが分かり、認証に失敗しました。

フロントエンドが img タグの src アドレスを通じて thinkphp6 の検証コード アドレスを指している場合、バックグラウンドで生成されるセッション ID が、現在のページを操作するときに生成されるセッション ID と異なるのはなぜですか。メカニズムはまだ不明です。

後で、キャプチャ クラスに検証コードを直接生成するメソッド create() があることがわかりました。テスト後、API 経由でこのメソッドを呼び出すと検証コードが生成され、セッション ID はセッション ID と一致します。後でログインすると、別の問題が発生しました。1つは、このcreate()メソッドが応答メソッドを返すため、フロントエンドのuni.requestが取得できず、検証コードの画像が表示できないことです。考えた結果、captcha クラスを修正し、create() メソッドを、生成された検証コードの Base64 エンコーディングを返し、文字列の結果をフロントエンドに返す別の新しいメソッドに変更することにしました。通常の表示と認証ログインが可能です。

具体的なコードは次のとおりです:

1. 新しいキャプチャ クラス メソッド 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 中国語 Web サイトの他の関連記事を参照してください。