Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

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

</Vorlage>
<script src="http://www.recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit&hl=en" asynchrone Verschiebung></script>
<Skript>
Standard exportieren {
  props: ["sitekey"], // Der zu übertragende geheime Schlüssel mount() {
    Fenster.ReCaptchaLoaded = dies.geladen;
    var Skript = document.createElement("Skript");
    Skript.src =
      „https://recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit“;
    document.head.appendChild(Skript);
  },
  Methoden: {
    geladen() {
       window.grecaptcha.render(dies.$refs.grecaptcha, {
        Sitekey: dieser.Sitekey,
        /**
        * res gibt den Verifizierungsstatus von Google zurück.
        * Bei Erfolg wird eine Zeichenfolge zurückgegeben. * Bei Fehlschlag wird keine Zeichenfolge zurückgegeben. * Der Überprüfungsstatus wird also anhand der Zeichenfolge bestimmt. */
        callback: res => {// true – Validierung erfolgreich// false – Validierung fehlgeschlagenres.length > 0 ? this.$emit("getValidateCode", false) : his.$emit("getValidateCode", true)
        }
      });
      // grecaptcha.render('Roboter', {
      // Sitekey: dieser.Sitekey,
      // /**
      // * res gibt den Verifizierungsstatus von Google zurück.
      // * Bei Erfolg Zeichenfolge zurückgeben// * Bei Fehler Zeichenfolge nicht zurückgeben// * Den Status der Überprüfung also anhand der Zeichenfolge beurteilen// */
      // Design: „hell“, // Designfarbe, hell und dunkel sind verfügbar // Größe: „normal“, // Größenregel, normal und kompakt sind verfügbar // Rückruf: res => {
      // res.length > 0 ? this.$emit("getValidateCode", true) : this.$emit("getValidateCode", false)
      // // true - Authentifizierung erfolgreich // false - Authentifizierung fehlgeschlagen // }
      // }); 
     
    }
  },
};
</Skript>
<Stil>

</Stil>

<Vorlage>
  <div>
    <div Klasse="Home-Inhalt">
      <div Klasse="Home-Inhalt-Bild">
        <!-- <div class="home-content-imgtop"> -->
          <img src="../../assets/image/202010_JP NIGHT Store Werbematerialien.002.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT Store Werbematerialien.003.png" alt="">
        <!-- </div> -->
        <!-- <div class="home-content-imgbottom"> -->
          <img src="../../assets/image/202010_JP NIGHT Store Werbematerialien.004.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT Store Werbematerialien.005.png" alt="">
        <!-- </div> -->
      </div>
      <div Klasse="Home-Inhalt-unten">
        <p> <a href="http://www.jp-night.com/terms.html" rel="external nofollow" >Nutzungsbedingungen</a> und <a href="http://www.jp-night.com/privacy.html" rel="external nofollow" >Datenschutzrichtlinie</a> Bitte stimmen Sie diesen zu.</p>
        <div Klasse="Inhalt-Google">
          <google-recaptcha ref="recaptcha" :sitekey="key" @getValidateCode='getValidateCode' v-model="validateCode"></google-recaptcha>
        </div>
        <div Klasse="Anmelden">
          <button :class="isNext ?'login-botton-background':'login-botton'" :disabled="isNext" @click="login()">Shop-Ankündigung</button>
        </div> 
      </div>
      
    </div>
  </div>
  
</Vorlage>

<Skript>
GoogleRecaptcha importieren aus '../../common/module/GoogleRecaptcha'
Standard exportieren {
  Daten() {
    var checkCode = (Regel, Wert, Rückruf) => {
      wenn (Wert == falsch) {
        Rückruf (neuer Fehler (,,Bitte führen Sie eine Mensch-Maschine-Verifizierung durch“));
      } anders {
        Rückruf();
      }
    };
    zurückkehren {
      Schlüssel: '6Ld9xxgaAAAAAI4xn7seMCmqbxIpVsJ_dwrZu9z1',
      validateCode: false,
      isNext:false
    };
  },
  erstellt(){
    
  },
  montiert(){
    
  },
  Komponenten: {
    Google Recaptcha
  },
  Methoden:{
    Login(){
      sessionStorage.setItem('Token',true)
      
      dies.$router.push({
        Pfad: "/shops",
        Abfrage: { out: true }
      })
    },
    getValidateCode(Wert) {
      konsole.log(Wert);
      
      this.isNext = Wert
    },
  }
};
</Skript>

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

</Stil>