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

<テンプレート>
    <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 - 認証失敗 // }
      // }); 
     
    }
  },
};
</スクリプト>
<スタイル>

</スタイル>

<テンプレート>
  <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ピクセル;
}

</スタイル>