vue+drf+サードパーティのスライディング検証コードアクセスの実装

1. 背景

最近、プロジェクト開発演習ではログイン機能+検証コードの要件が使用されました。検証コードは一般的に、画像検証コード、SMS検証コード、スライド検証コードの3種類に分けられます。関連する実装のアイデアは次のとおりです。

画像認証コード

画像検証コードの実装は、 pythonのサードパーティモジュールpillowの関連メソッドの助けを借りて実装できます（時間があるときに記事を書きます）

SMS認証コード

SMS検証コードの主なアイデアは、サードパーティのSMSインターフェースを呼び出して携帯電話にSMSを送信し、ユーザーの入力を受信して、システムによって生成された乱数文字列と比較することです。

スライド認証コード

スライディング検証コードは通常、Tencent Waterproof Wall、JiTian Verification などのサードパーティの検証コードサービスプロバイダーによって提供されます。弊社独自の認証コードと比較すると、サードパーティの認証コードはより安全で信頼性が高いです。

この記事では、テンセント防水壁を例に、 vueとdrfを組み合わせたフロントエンドとバックエンドの分離プロジェクトにおけるサードパーティのスライディング検証コードサービスへのアクセスを記録します。

2. 検証プロセス

検証のフロントエンドとバックエンドの呼び出しシーケンス図は次のとおりです（画像はTencent検証コードの公式ドキュメントから引用）

3. 検証を作成する

まず、Tencent Cloud コンソールにログインしてクラウド API キーを作成します。左側のナビゲーションバーで [アクセス管理] > [API キー管理] を選択して API キー管理ページに入り、[新しいキー] をクリックしてキーを作成します。

次に、検証コードコンソールに入り、[新しい検証]をクリックし、必要に応じて検証名、検証ドメイン名、検証チャネル（Webまたはミニプログラムプラグイン）、検証シナリオを入力し、入力後、[OK]をクリックして検証の作成を完了します。

最後に、申請したリソース情報を確認します。

4. フロントエンドコード

4.1 コアjsファイルを追加する

防水壁のフロントエンドコアjsファイルをscriptタグを使用してプロジェクトルートディレクトリのindex.htmlにインポートします。

index.html

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅,初期スケール=1.0">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <title>opsweb</title>
  </head>
  <本文>
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
  </本文>
</html>

または、 src/main.js import前に、上記のコアjsファイルをプロジェクトの静的ファイルディレクトリにダウンロードする必要があります。

// 防水壁検証コードのコア js ファイルをインポートします。import "../static/js/TCaptcha";

4.2 設定を追加する

src/settings.jsに設定を追加する

エクスポートデフォルト{
  HOST: 'http://opsapi.ssgeek.com:8000', // バックエンド API アドレス TC_captcha:{
    app_id: "2020427221", // Tencent Waterproof Wall APPID 構成},
}

4.3 コンポーネントの変更

ログインページのvueコンポーネントLogin.vue変更し、ログインボタンを検証コード表示のカスタムメソッドにバインドし、最初に検証コードリクエストをトリガーしてからログインをトリガーします。

template

<テンプレート>
<!--ログインコンテンツ開始-->
<div class="inp" v-if="ログインタイプ==0">
  <input v-model="ユーザー名" type="text" placeholder="ユーザー名" class="user">
  <input v-model="password" type="password" name="" class="pwd" placeholder="password">
  <div class="rember">
    <p>
      <input v-model="remember_me" type="checkbox" class="no" name="a"/>
      <span>パスワードを記憶する</span>
    </p>
  </div>
  <button class="login_btn" @click="show_captcha">ログイン</button>
<!--ログインコンテンツの終了-->
</div>
</テンプレート>

script部分

<スクリプト>
エクスポートデフォルト{
  名前: 'ログイン',
  データ（） {
    戻る {
      ログインタイプ: 0,
      remember_me: 偽、
      ユーザー名: "",
      パスワード: "",
    }
  },
  メソッド: {
    キャプチャを表示（）{
      var captcha1 = 新しい TencentCaptcha(this.$settings.TC_captcha.app_id, res=> {
        /*
        解像度:
        appid: "2020427221" # 認証コードのAPPID
        randstr: "@GCV" # 重複を防ぐためのランダムな文字列 ret: 0 # 0 はユーザー操作が成功したことを意味し、2 はユーザーが検証コード ウィンドウをアクティブに閉じたことを意味します ticket: "" # 検証後のチケットはバックエンドに提供され、検証コード サーバーで処理されます */
        // コンソールログ(res);
        this.$axios.get(`${this.$settings.HOST}/users/captcha/`, {
          パラメータ:{
            チケット: res.ticket、
            ランダム文字列: res.randstr,
          }
        }).then(応答=>{
          if(レスポンスデータの詳細){
            // ログイン処理を続行します this.login();
          }
        }).catch(エラー=>{
          this.$message.error("申し訳ございません。認証コードが失敗しました!");
        });
      });
      captcha1.show();
    },
    ログイン（） {
      // ユーザーがユーザー名またはパスワードを入力するかどうかを判断します。それ以外の場合は、ユーザーに入力を求めます。if (!this.username) {
        this.$message.error('ユーザー名を入力してください!')
      } それ以外の場合 (!this.password) {
        this.$message.error('パスワードを入力してください!')
      } それ以外 {
        // ユーザー名とパスワードで投稿リクエストを送信します this.$axios.post(`${this.$settings.HOST}/users/login/`, {
          ユーザー名: this.username,
          パスワード: this.password,
        }).then((res) => {
          //トークンを保存
          if (this.remember_me) {
            ローカルストレージトークン = res.data.token;
            sessionStorage.removeItem('トークン')
          } それ以外 {
            セッション ストレージ トークン = res.data.token;
            localStorage.removeItem('トークン')
          }
          // ホームページにジャンプします this.$router.push('/hippo/showcenter')
        }).catch((error) => { // リクエストによって返されたエラー、4xx、5xx をキャプチャします
          this.$message.error('ユーザー名またはパスワードが正しくありません。再入力してください!')
        })
      }
    },
  },
};

5. バックエンドコード

関連する操作手順については、公式の例を参照してください：https://007.qq.com/python-access.html

5.1 設定を追加する

Tencent Verification Code Consoleで表示される検証情報をDRFバックエンドコードの設定ファイルに設定する

# テンセント防水壁構成 TENCENT_CAPTCHA = {
    "GATEWAY": "https://ssl.captcha.qq.com/ticket/verify", # 検証コード検証アドレス "APPID": "2020427221", # 検証コードアプリケーションのAPPID
    "App_Secret_Key": "0mnAr1EpNTjm63fQgKPU87w**", # 検証コードアプリケーションの AppSecretKey
}

5.2 確認の受け取りと返却

ユーザーappでユーザー検証コードの共通クラスviewを記述する

rest_framework.views から APIView をインポートします
rest_framework.response から Response をインポート
rest_framework からインポートステータス
django.confから設定をインポートする
urllib.parse から urlencode をインポートする
urllib.request から urlopen をインポート
jsonをインポート
SSLをインポートする


# ここでビューを作成します。
クラス CaptchaAPIView(APIView):
    """検証コード"""
    ssl._create_default_https_context = ssl._create_unverified_context

    def get(self, request):
        「クライアントから送信された確認コード情報を受信する」
        パラメータ = {
            「援助」: settings.TENCENT_CAPTCHA.get("APPID"),
            「AppSecretKey」: settings.TENCENT_CAPTCHA.get("App_Secret_Key"),
            "チケット": request.query_params.get("チケット"),
            "Randstr": request.query_params.get("randstr"),
            "ユーザーIP": request._request.META.get("REMOTE_ADDR")
        }
        # 辞書データをアドレスバーのクエリ文字列形式に変換します# aid=xxx&AppSecretKey=xxx&xxxxx
        パラメータ = urlencode(パラメータ)
        # print(パラメータ)
        url = settings.TENCENT_CAPTCHA.get("ゲートウェイ")
        # http get リクエストを送信します f = urlopen("%s?%s" % (url, params))
        # https://ssl.captcha.qq.com/ticket/verify?aid=xxx&AppSecretKey=xxx&xxxxx
        # f.read() 応答情報を読み取る content = f.read()
        res = json.loads(コンテンツ)
        # 印刷(res)
        int(res.get("response")) == 1の場合:
            # 検証成功 return Response({"detail": 1})
        それ以外：
            # 検証に失敗しました return Response({"detail": 0}, status=status.HTTP_400_BAD_REQUEST)

5.3 URLルーティングを追加する

最後に、フロントエンドがリクエストを送信するためのバックエンドURLルーティングを追加します。

django.urls インポートパスから
rest_framework_jwt.views から、obtain_jwt_token をインポートします。
から。インポートビュー

urlパターン = [
    パス('login/'、obtain_jwt_token)、
    path('captcha/', views.CaptchaAPIView.as_view()), # 検証コードの検証]

6. テストを実行する

最終的な効果は次のようになります

テンセント認証コードの背景には、詳細なリクエスト情報チャートが表示されます。

vue+drf+third-party スライディング検証コードアクセスの実装に関するこの記事はこれで終わりです。vue+drf+third-party スライディング検証コードアクセスの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: