導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。
インターネット上のVue3の統合APIとTencent APIドキュメントに、Tencentのスライダー検証コードを適用する方法に関する情報が不足しているため、このチュートリアルが提供されています。私は Vue の専門家ではなく、Vue の理解も基本的な使い方のレベルに留まっています。間違いがあれば指摘してください。 始める:まず、Tencent Cloud にアクセスしてグラフィックス検証 API を申請し、独自の使用シナリオを選択する必要があります。手順を完了すると、CaptchaAppId と AppSecretKey が取得されます。これら 2 つは、後で結果を確認するためにサーバーによって使用されるパラメーターです。 Vue3 で使用するには、まず public フォルダの index.html に Tencent 検証コード js をインポートする必要があります。 <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> スライダー検証コードを使用する必要があるコンポーネントで、ログイン ボタンのメソッドをバインドします。そして、フォーム オブジェクトに次の 2 つのフィールド 私の例を次のように書きます エクスポートデフォルト{ 名前: "ログイン", 設定() { const loginForm = リアクティブ({ アカウント名: ''、 アカウントパスワード: ''、 チケット: ''、 文字列: '' }) 戻る { ログインフォーム } } } ログインボタンのバインディング方法 エクスポートデフォルト{ 名前: "ログイン", 設定() { const loginForm = リアクティブ({ アカウント名: ''、 アカウントパスワード: ''、 チケット: ''、 文字列: '' }) const loginPost = () => { captcha = new window.TencentCaptcha(config.app_id, res => { を設定します。 loginForm.randstr = res.randstr; loginForm.ticket = res.ticket; userLogin(loginForm).then(resp => { (応答コード === 200)の場合{ //ログイン成功後のロジック} else { //ログイン失敗後のロジック} }).catch(() => { ElMessage.error({ メッセージ: 'システムエラー!後でもう一度お試しください。 ' }) }) }) キャプチャを表示します。 } 戻る { ログイン投稿、 ログインフォーム } } } 上記はvueで記述したコードですが、ユーザーが検証コードを入力する操作のみを実装しています。具体的な最終判定ロジックはバックエンドで実装する必要があります。検証操作を実装するために、バックエンドで Springboot を使用します。 まず、Tencent SDKのMaven依存関係を導入する必要があります。 <!-- Tencent SDK スライダー検証コードの依存関係 --> <依存関係> <グループ ID>com.tencentcloudapi</グループ ID> <artifactId>テンセントクラウド SDK-Java</artifactId> <バージョン>4.0.11</バージョン> </依存関係> utils パッケージに新しいクラスを作成します。 パブリッククラス DescribeCaptchaResult { @Value("${Tencent.SecretId}") プライベート文字列 secretId; @Value("${Tencent.SecretKey}") プライベート文字列 secretKey; @Value("${Tencent.CaptchaAppId}") プライベート int captchaAppId; @Value("${Tencent.AppSecretKey}") プライベート文字列 appSecretKey; パブリックJSONObject getTencentCaptchaResult(文字列チケット、文字列randstr、文字列userIp) { 試す { // 認証オブジェクトをインスタンス化します。パラメータは、Tencent Cloud アカウントの secretId と secretKey で渡す必要があります。ここでは、キー ペアの機密性にも注意する必要があります。// キーは https://console.cloud.tencent.com/cam/capi で取得できます。Credential cred = new Credential(secretId, secretKey); // http オプションをインスタンス化します (オプション)。特別な要件がない場合は HttpProfile をスキップできます。httpProfile = new HttpProfile(); エンドポイントを設定します。 // クライアント オプションをインスタンス化します (オプション)。特別な要件がない場合は ClientProfile をスキップできます。clientProfile = new ClientProfile(); クライアント プロファイル。httpProfile を設定します。 // 製品をリクエストするためにクライアント オブジェクトをインスタンス化します。clientProfile はオプションです。CaptchaClient client = new CaptchaClient(cred, "", clientProfile); //リクエスト オブジェクトをインスタンス化します。各インターフェイスはリクエスト オブジェクトに対応します。DescribeCaptchaResultRequest req = new DescribeCaptchaResultRequest(); キャプチャタイプを設定する必要があります(9L); チケットを要求します。 必須: ユーザーIPを設定します。 キャプチャアプリIDを設定します。 appSecretKey を要求します。 // 返される resp は、リクエスト オブジェクトに対応する DescribeCaptchaResultResponse のインスタンスです。DescribeCaptchaResultResponse resp = client.DescribeCaptchaResult(req); // 文字列をJSON形式で出力します。 return JSONObject.parseObject(DescribeCaptchaResultResponse.toJsonString(resp)); } キャッチ (TencentCloudSDKException e) { 新しい ServiceException をスローします (e.getMessage()); } } } 以下は、このクラスに必要なパラメータの内訳です。 |
パラメータ | 分析 |
---|---|
シークレットID | SecretId は Tencent Cloud アカウントの API キー ID です (認証にはサブアカウントを使用することをお勧めします) |
秘密鍵 | SecretKeyはTencent CloudアカウントのAPIキーです(認証にはサブアカウントを使用することをお勧めします) |
キャプチャアプリID | captchaAppIdは、申請したTencent認証コードAPIキーです。 |
アプリシークレットキー | appSecretKeyは、申請したTencent認証コードAPIキーです。 |
チケット | チケットは、フロントエンドスライダーの検証コードが検証された後に返されるパラメータです。 |
ランドストリング | randstrは、フロントエンドのスライダー検証コードの検証後に返されるパラメータです。 |
ユーザーIP | userIpはビジネスレイヤーによって取得されたIPです |
{ "応答": { "リクエストID": "3b61a17b-cb38-470e-802c-b6242faf81ac", 「キャプチャコード」: 1, 「キャプチャメッセージ」: 「OK」、 "邪悪レベル": 0, 「キャプチャ時間を取得」: 1583749870 }, "戻りコード": 0, "retmsg": "成功" }
その他の特定のパラメータについては、Tencent API ドキュメントを参照してください: https://cloud.tencent.com/document/product/1110/36926
ここで CaptchaCode の値を読み取ります。値が 1 の場合、検証コードは正常に検証されています。1 でない場合、検証は失敗します。
//検証コードを検証します JSONObject tencentCaptchaResult = captchaResult.getTencentCaptchaResult(ticket, randstr, clientIp); int captchaCode = Integer.parseInt(tencentCaptchaResult.getString("CaptchaCode")); キャプチャコードが 1 の場合 throw new ServiceException("検証コードエラー!"); } //...後続のビジネスロジック
Tencent Cloud では、検証コードのテーマ、検証コードのシーン構成、検証コードの悪意のある傍受のレベルなど、検証コードに対してさらに多くの設定を行うことができます。 。
バックグラウンドでの確認コードリクエストの数も確認できます
バックエンドとフロントエンドをさらにカプセル化することで、コードをより簡潔にできると思います。 Alibaba Cloud には、私がまだ試していない他の新しい認証コードがあります。個人的には、Tencent の認証コードは使い勝手がかなり良いと感じていますが、API ドキュメントが少し貧弱で、情報が非常に少ないです。
Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法については、これで終わりです。より関連性の高い vue Tencent スライダー検証コード コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。
<<: CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法
>>: HTMLの基本構文は、HTMLを学び始めたばかりの人にとって便利です。
目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...
ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...
ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...
目次イベントページの読み込みイベント委任イベントの切り替えイベント要約するイベントページの読み込み1...
質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...
目次シンプルなSpringbootプロジェクトを作成する1. pom.xmlでSpring Boot...
この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...
需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...
この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...
目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....