最近のプロジェクトでは、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: nginx + セカンダリドメイン名 + https サポートを使用する
1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...
Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...
先日、外国人の方がHTML+CSSを使ってHamburgerMenuを実装している動画を見ました。最...
Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...
Tomcat を学習したばかりのプログラマーにとって、これはよくある間違いです。 1. 環境変数の問...
リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...
この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...
序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...
目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...
目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...
目次1. データベースの制約1.1 はじめに1.2 制約の種類1.3 ヌルでない1.4 ユニーク1....