Google Recaptcha 認証を使用した Vue 実装例

Google Recaptcha 認証を使用した Vue 実装例

最近のプロジェクトでは、Google ロボット認証を使用する必要があります。これには VPN が必要ですが、商用利用には会社が申請した Google アカウント (自分で申請しても無駄です) も必要です。このアカウントを使用して秘密鍵を申請し、秘密鍵を取得したら実行できます。
コードの一部は次のとおりです。

1. まず、私がカプセル化したのは Google ロボット検証コンポーネントです。

<テンプレート>
    <div ref="grecaptcha">
    </div>
    <!-- <div id="ロボット"></div> -->

</テンプレート>
<script src="http://www.recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit&hl=en" 非同期遅延></script>
<スクリプト>
エクスポートデフォルト{
  props: ["sitekey"], // 転送する秘密鍵mounted() {
    window.ReCaptchaLoaded = this.loaded;
    var スクリプト = document.createElement("スクリプト");
    スクリプト.src =
      「https://recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit」;
    document.head.appendChild(スクリプト);
  },
  メソッド: {
    ロードされた() {
       window.grecaptcha.render(this.$refs.grecaptcha, {
        サイトキー: this.sitekey,
        /**
        * res は Google の検証ステータスを返します。
        * 成功した場合は文字列を返します * 失敗した場合は文字列は返されません * したがって、検証ステータスは文字列に基づいて決定されます */
        コールバック: res =>{// true - 検証成功// false - 検証失敗res.length > 0 ? this.$emit("getValidateCode", false) : his.$emit("getValidateCode", true)
        }
      });
      // grecaptcha.render('ロボット', {
      // サイトキー: this.sitekey,
      // /**
      // * res は Google の確認ステータスを返します。
      // * 成功した場合は文字列を返します// * 失敗した場合は文字列を返しません// * したがって、文字列に基づいて検証ステータスを判断します// */
      // theme: 'light', // テーマカラー、ライトとダークが利用可能 // size: 'normal', // サイズルール、ノーマルとコンパクトが利用可能 // callback: res => {
      // res.length > 0 ? this.$emit("getValidateCode", true) : this.$emit("getValidateCode", false)
      // // true - 認証成功 // false - 認証失敗 // }
      // }); 
     
    }
  },
};
</スクリプト>
<スタイル>

</スタイル>

2. 必要な場所で使用:

<テンプレート>
  <div>
    <div class="home-content">
      <div class="home-content-img">
        <!-- <div class="home-content-imgtop"> -->
          <img src="../../assets/image/202010_JP NIGHTストア販促資料.002.png" alt="">
          <img src="../../assets/image/202010_JP NIGHTストア販促資料.003.png" alt="">
        <!-- </div> -->
        <!-- <div class="home-content-imgbottom"> -->
          <img src="../../assets/image/202010_JP NIGHTストア販促資料.004.png" alt="">
          <img src="../../assets/image/202010_JP NIGHTストア販促資料.005.png" alt="">
        <!-- </div> -->
      </div>
      <div class="home-content-bottom">
        <p> <a href="http://www.jp-night.com/terms.html" rel="external nofollow" >利用規約</a>および<a href="http://www.jp-night.com/privacy.html" rel="external nofollow" >プライバシーポリシー</a>に同意してください。</p>
        <div class="content-google">
          <google-recaptcha ref="recaptcha" :sitekey="key" @getValidateCode='getValidateCode' v-model="validateCode"></google-recaptcha>
        </div>
        <div class="ログイン">
          <button :class="isNext ?'login-botton-background':'login-botton'" :disabled="isNext" @click="login()">ショップのお知らせ</button>
        </div> 
      </div>
      
    </div>
  </div>
  
</テンプレート>

<スクリプト>
'../../common/module/GoogleRecaptcha' から GoogleRecaptcha をインポートします。
エクスポートデフォルト{
  データ() {
    var checkCode = (ルール、値、コールバック) => {
      (値 == false)の場合{
        callback(new Error('人間と機械の検証を実行してください'));
      } それ以外 {
        折り返し電話();
      }
    };
    戻る {
      キー: '6Ld9xxgaAAAAAI4xn7seMCmqbxIpVsJ_dwrZu9z1'、
      検証コード: false、
      isNext:false
    };
  },
  作成された(){
    
  },
  マウントされた(){
    
  },
  コンポーネント:{
    Google Recaptcha
  },
  方法:{
    ログイン(){
      sessionStorage.setItem('トークン',true)
      
      this.$router.push({
        パス: "/shops",
        クエリ: { 出力: true }
      })
    },
    getValidateCode(値) {
      console.log(値);
      
      this.isNext = 値
    },
  }
};
</スクリプト>

<style lang="scss" スコープ>
@import "./css/pc.css";
@import "./css/ipad.css";
@import "./css/phone.css";
#rc アンカーコンテナ {
    幅: 335ピクセル;
}

</スタイル>

3. これで、Google ロボットが使用できるようになります。

概略図:

ここに画像の説明を挿入

これで、Google Recaptcha 認証を使用した vue の実装例に関するこの記事は終了です。より関連性の高い vue Google Recaptcha 認証コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue フォーム検証のやり方を本当に知っていますか? vue フォーム検証 (フォーム) 検証
  • Vueフォーム検証プラグインであるVue Validatorの使い方の詳細な説明
  • Vue ElementUI のフォーム検証で発生した問題
  • VUEは画像検証コード機能を実装
  • vueは携帯電話経由でSMS認証コードを送信する登録機能を実装します
  • Vueはランダムな検証コードサンプルコードを生成します
  • フォーム検証に値がある場合にエラープロンプトが表示される問題を解決するために Vue と組み合わせた要素
  • Vue にモバイル検証コードコンポーネント機能を追加する方法

<<:  MySQLデータベースの基礎知識と操作のまとめ

>>:  nginx + セカンダリドメイン名 + https サポートを使用する

推薦する

Vue で棒グラフを使用し、自分で設定を変更する方法

1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...

MySQL 5.7.17 winx64 のインストールと設定方法のグラフィックチュートリアル

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

JS は複数のタブを切り替えるカルーセルを実装します

カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...

HTML+SassはHambergurMenu(ハンバーガーメニュー)を実装します

先日、外国人の方がHTML+CSSを使ってHamburgerMenuを実装している動画を見ました。最...

実用的な基本的な Linux sed コマンドのサンプルコード

Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...

startup.bat をダブルクリックすると Tomcat がクラッシュする問題の解決方法の詳細な説明

Tomcat を学習したばかりのプログラマーにとって、これはよくある間違いです。 1. 環境変数の問...

WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

知っておくべき JS 配列削減の高度な使い方 25 選

序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

jsを使用して簡単なスネークゲームを書く

この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...

Vueでブラウザタイトルを動的に設定する方法の詳細な説明

目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

MySQL データベースの制約とデータ テーブルの設計原則

目次1. データベースの制約1.1 はじめに1.2 制約の種類1.3 ヌルでない1.4 ユニーク1....