Vue implementation example using Google Recaptcha verification

<template>
    <div ref="grecaptcha">
    </div>
    <!-- <div id="robot"></div> -->

</template>
<script src="http://www.recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit&hl=en" async defer></script>
<script>
export default {
  props: ["sitekey"], // The secret key to be transferred mounted() {
    window.ReCaptchaLoaded = this.loaded;
    var script = document.createElement("script");
    script.src =
      "https://recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit";
    document.head.appendChild(script);
  },
  methods: {
    loaded() {
       window.grecaptcha.render(this.$refs.grecaptcha, {
        sitekey: this.sitekey,
        /**
        * res returns the verification status of Google.
        * Return string if successful * No string is returned if failed * So the verification status is determined based on the string */
        callback: res => {// true - validation successful// false - validation failedres.length > 0 ? this.$emit("getValidateCode", false) : his.$emit("getValidateCode", true)
        }
      });
      // grecaptcha.render('robot', {
      // sitekey: this.sitekey,
      // /**
      // * res returns the verification status of Google.
      // * Return string if successful// * Do not return string if failed// * So judge the verification status based on the string// */
      // theme: 'light', // theme color, light and dark are available // size: 'normal', // size rule, normal and compact are available // callback: res => {
      // res.length > 0 ? this.$emit("getValidateCode", true) : this.$emit("getValidateCode", false)
      // // true - authentication succeeded // false - authentication failed // }
      // }); 
     
    }
  },
};
</script>
<style>

</style>

<template>
  <div>
    <div class="home-content">
      <div class="home-content-img">
        <!-- <div class="home-content-imgtop"> -->
          <img src="../../assets/image/202010_JP NIGHT Store Promotional Materials.002.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT Store Promotional Materials.003.png" alt="">
        <!-- </div> -->
        <!-- <div class="home-content-imgbottom"> -->
          <img src="../../assets/image/202010_JP NIGHT Store Promotional Materials.004.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT Store Promotional Materials.005.png" alt="">
        <!-- </div> -->
      </div>
      <div class="home-content-bottom">
        <p> <a href="http://www.jp-night.com/terms.html" rel="external nofollow" >Terms of Use</a> and <a href="http://www.jp-night.com/privacy.html" rel="external nofollow" >Privacy Policy</a> Please agree to this.</p>
        <div class="content-google">
          <google-recaptcha ref="recaptcha" :sitekey="key" @getValidateCode='getValidateCode' v-model="validateCode"></google-recaptcha>
        </div>
        <div class="login">
          <button :class="isNext ?'login-botton-background':'login-botton'" :disabled="isNext" @click="login()">Shop announcement</button>
        </div> 
      </div>
      
    </div>
  </div>
  
</template>

<script>
import GoogleRecaptcha from '../../common/module/GoogleRecaptcha'
export default {
  data() {
    var checkCode = (rule, value, callback) => {
      if (value == false) {
        callback(new Error('Please perform human-machine verification'));
      } else {
        callback();
      }
    };
    return {
      key: '6Ld9xxgaAAAAAI4xn7seMCmqbxIpVsJ_dwrZu9z1',
      validateCode: false,
      isNext:false
    };
  },
  created(){
    
  },
  mounted(){
    
  },
  components:{
    Google Recaptcha
  },
  methods:{
    login(){
      sessionStorage.setItem('token',true)
      
      this.$router.push({
        path: "/shops",
        query: { out: true }
      })
    },
    getValidateCode(value) {
      console.log(value);
      
      this.isNext = value
    },
  }
};
</script>

<style lang="scss" scoped>
@import "./css/pc.css";
@import "./css/ipad.css";
@import "./css/phone.css";
#rc-anchor-container {
    width: 335px;
}

</style>