Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

導入:

従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。

  • サーバーは検証コードの特定の検証を検証する必要はなく、検証結果のみを検証する必要があります。
  • 検証コードの実装を理解する必要はなく、具体的に実装する必要もありません。
  • スライダー検証コードのセキュリティ レベルは、従来の検証コードよりもはるかに高くなっています。
  • ...

インターネット上の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 つのフィールドticketrandstr追加します。

私の例を次のように書きます

エクスポートデフォルト{
    名前: "ログイン",
    設定() {
        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です
パラメータを指定して送信すると、DescribeCaptchaResultResponse 型のデータが返されます。これを解析用に FastJson の JSONObject 型に変換します。返されるデータ構造は次のとおりです。

{
"応答": {
  "リクエスト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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+elementui でスライダーのドラッグパズル検証を実現
  • Vue がモバイル スライダー検証を実装
  • Vueはログイン時にスライダー検証を実装します
  • スライダー検証のために Vue と Alibaba Cloud を統合する実践
  • Vueはシンプルなスライダー検証を実装する
  • konva および vue-konva ライブラリを使用してドラッグスライダー検証機能を実装します。
  • VUEアクセステンセント認証コード機能(スライダー認証)メモ
  • Vue はドラッグ スライダー検証機能を実装します (バックグラウンド検証手順のない CSS + JS のみ)
  • vue-cli カスタムディレクティブ ディレクティブ 検証スライダーの追加例
  • Vueで画像スライダー検証コンポーネントをカプセル化する方法

<<:  CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法

>>:  HTMLの基本構文は、HTMLを学び始めたばかりの人にとって便利です。

推薦する

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

Alibaba Cloud Nginx はドメイン名アクセス プロジェクトを実装するために https を設定します (グラフィック チュートリアル)

ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

パフォーマンスの最適化を教える 52 個の SQL 文

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

MySQL 8.0 のメモリ消費の詳細な分析

目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...

jQueryのコア機能とイベント処理の詳細な説明

目次イベントページの読み込みイベント委任イベントの切り替えイベント要約するイベントページの読み込み1...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

Dockerを使用してSpring Bootプロジェクトをデプロイする手順

目次シンプルなSpringbootプロジェクトを作成する1. pom.xmlでSpring Boot...

MYSQLデータベーステーブル構造の最適化方法の詳細な説明

この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...

three.js を使って立体的な矢印線を描く詳細な手順

需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

1 時間で MySQL データベースを学ぶ (Zhang Guo)

目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....