Angular, React & Vue

Vollständige Beispiele für beliebte Front-End-Frameworks wie Angular, React und Vue ist auf dieser Dokumentationsseite zu finden.

• Angular
  
• React
• Vue (Options API)
• Vue (Composition API)

Vollständiges Beispiel in Angular

Angular (html)

<div class="zenc-captcha"  data-sitekey="SITEKEY-HIER-EINGEBEN"></div>

Angular (typescript)

  ngOnInit(): void {

    const script = document.createElement('script');
    script.src = 'https://www.zencaptcha.com/captcha/widget.js';
    script.async = true;
    script.defer = true;
    script.onload = this.onScriptLoad.bind(this);
    document.head.appendChild(script);
  }

  doneCallback(solution){
   // Wird sofort aufgerufen, nachdem die Lösung fertig ist.
    // Sie können die Lösung speichern und sie an das Backend senden, wenn der Benutzer ein Formular abschickt.
    console.log("The solution: "+solution);
  }

  //Damit können Sie das Widget zurücksetzen:
  restartWidget(){
    this.widget.reset();
  }

  onScriptLoad(): void {
    const element = this.elementRef.nativeElement.querySelector('.zenc-captcha');
    const options = {
      doneCallback: this.doneCallback
    };
    this.widget = new WidgetInstance(element, options);
    //Sie können auch festlegen, dass die Lösung der Aufgabe automatisch beginnt, sobald das Widget bereit steht:
    //widget.start();
  }

Vollständiges Beispiel in React

React

import { useEffect, useRef } from 'react';
function App() {
  const captchaRef = useRef(null);
  const widget = useRef(null);
  let loaded = useRef(false);

  const doneCallback = (solution) => {
    // Wird sofort aufgerufen, nachdem die Lösung fertig ist.
    // Sie können die Lösung speichern und sie an das Backend senden, wenn der Benutzer ein Formular abschickt.
    console.log("The Solution: " + solution);
  };

  const onScriptLoad = () => {
    const element = captchaRef.current;
    const options = {
      doneCallback: doneCallback,
     // sitekey: "SITEKEY-HIER-EINGEBEN"
     //---> Anstatt den Sitekey in <div> zu definieren, könnten Sie ihn auch hier definieren.
    };

    widget.current = new WidgetInstance(element, options);

    //Sie können auch festlegen, dass die Lösung der Aufgabe automatisch beginnt, sobald das Widget bereit steht:
    widget.current.start();
  };

  //Damit können Sie das Widget zurücksetzen:
  const resetWidget = () => {
    if (widget.current) {
      widget.current.reset();
    }
  };

  useEffect(() => {
    if(!loaded.current){
    const script = document.createElement('script');
    script.src = 'https://www.zencaptcha.com/captcha/widget.js';
    script.async = true;
    script.defer = true;
    script.onload = onScriptLoad;
    document.head.appendChild(script);
    loaded.current = true;
    return () => {
      document.head.removeChild(script);
    }
  }
  });

  return (
    <div>
      <div className="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN" ref={captchaRef}></div>
    </div>
  );
}

export default App;

Vollständiges Beispiel in Vue (Options API)

Vue (Options API)

<template>
  <div>
    <div class="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN" ref="captcha"></div>
  </div>
</template>

<script>
export default {
     name: 'Index',
  data() {
    return {
      widget: null
    };
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.zencaptcha.com/captcha/widget.js';
    script.async = true;
    script.defer = true;
    script.onload = this.onScriptLoad;
    document.head.appendChild(script);
  },
  methods: {
    doneCallback(solution) {
        // Wird sofort aufgerufen, nachdem die Lösung fertig ist.
    // Sie können die Lösung speichern und sie an das Backend senden, wenn der Benutzer ein Formular abschickt.
        console.log("The Solution: " + solution);
    },
    onScriptLoad() {
      const element = this.$refs.captcha;
      const options = {
        doneCallback: this.doneCallback,
        //sitekey: "SITEKEY-HIER-EINGEBEN"
        //---> Anstatt den Sitekey in <div> zu definieren, könnten Sie ihn auch hier definieren.
      };

      const widget = new WidgetInstance(element, options);
      this.widget = widget;

      //Sie können auch festlegen, dass die Lösung der Aufgabe automatisch beginnt, sobald das Widget bereit steht:
      //this.widget.start();
    },

    //Damit können Sie das Widget zurücksetzen:
    resetWidget(){
        if (this.widget) {
          this.widget.reset();
        }
    }
  }
};
</script>

Vollständiges Beispiel in Vue (Composition API)

Vue (Composition API)

<template>
  <div>
    <div class="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN" ref="captcha"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';


    const widget = ref(null);

    const doneCallback = (solution) => {
        // Wird sofort aufgerufen, nachdem die Lösung fertig ist.
    // Sie können die Lösung speichern und sie an das Backend senden, wenn der Benutzer ein Formular abschickt.
      console.log("The Solution: " + solution);
    };

    const onScriptLoad = () => {
      const element = ref(null);
      element.value = document.querySelector('.zenc-captcha');

      const options = {
        doneCallback: doneCallback,
        //sitekey: "SITEKEY-HIER-EINGEBEN"
        //---> Anstatt den Sitekey in <div> zu definieren, könnten Sie ihn auch hier definieren.
      };

      const widgetInstance = new WidgetInstance(element.value, options);
      widget.value = widgetInstance;

      //Sie können auch festlegen, dass die Lösung der Aufgabe automatisch beginnt, sobald das Widget bereit steht:
      //widget.value.start();
    };

    //Damit können Sie das Widget zurücksetzen:
    const resetWidget = () => {
      if (widget.value) {
        widget.value.reset();
      }
    };

    onMounted(() => {
      const script = document.createElement('script');
      script.src = 'https://www.zencaptcha.com/captcha/widget.js';
      script.async = true;
      script.defer = true;
      script.onload = onScriptLoad;
      document.head.appendChild(script);
    });


</script>