Angular, React & Vue

Un ensemble complet d'exemples pour les frameworks populaires tels que Angular, React et Vue peut être trouvé sur cette page de documentation.

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

Exemple complet avec Angular

Angular (html)

<div class="zenc-captcha"  data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI"></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){
    // Appelé immédiatement après que la solution soit prête.
    // Vous pouvez enregistrer la solution et l'envoyer au backend lorsque l'utilisateur soumet un formulaire.
    console.log("La solution: "+solution);
  }

  //Vous pouvez l'utiliser pour réinitialiser le widget :
  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);
    //Vous pouvez également choisir de lancer automatiquement la résolution du défi lorsque le widget est prêt :
    //widget.start();
  }

Exemple complet avec React

React

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

  const doneCallback = (solution) => {
    // Appelé immédiatement après que la solution soit prête.
    // Vous pouvez enregistrer la solution et l'envoyer au backend lorsque l'utilisateur soumet un formulaire.
    console.log("La Solution: " + solution);
  };

  const onScriptLoad = () => {
    const element = captchaRef.current;
    const options = {
      doneCallback: doneCallback,
     // sitekey: "AJOUTEZ-VOTRE-SITEKEY-ICI"
     //---> Au lieu de définir la clé de site dans <div>, vous pouvez également la définir ici.
    };

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

    //Vous pouvez également choisir de lancer automatiquement la résolution du défi lorsque le widget est prêt :
    widget.current.start();
  };

  //Vous pouvez l'utiliser pour réinitialiser le widget :
  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="AJOUTEZ-VOTRE-SITEKEY-ICI" ref={captchaRef}></div>
    </div>
  );
}

export default App;

Exemple complet avec Vue (Options API)

Vue (Options API)

<template>
  <div>
    <div class="zenc-captcha" data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI" 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) {
        // Appelé immédiatement après que la solution soit prête.
    // Vous pouvez enregistrer la solution et l'envoyer au backend lorsque l'utilisateur soumet un formulaire.
        console.log("La Solution: " + solution);
    },
    onScriptLoad() {
      const element = this.$refs.captcha;
      const options = {
        doneCallback: this.doneCallback,
        //sitekey: "AJOUTEZ-VOTRE-SITEKEY-ICI"
        //---> Au lieu de définir la clé de site dans <div>, vous pouvez également la définir ici.
      };

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

      //Vous pouvez également choisir de lancer automatiquement la résolution du défi lorsque le widget est prêt :
      //this.widget.start();
    },

    //Vous pouvez l'utiliser pour réinitialiser le widget :
    resetWidget(){
        if (this.widget) {
          this.widget.reset();
        }
    }
  }
};
</script>

Exemple complet avec Vue (Composition API)

Vue (Composition API)

<template>
  <div>
    <div class="zenc-captcha" data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI" ref="captcha"></div>
  </div>
</template>

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


    const widget = ref(null);

    const doneCallback = (solution) => {
        // Appelé immédiatement après que la solution soit prête.
    // Vous pouvez enregistrer la solution et l'envoyer au backend lorsque l'utilisateur soumet un formulaire.
      console.log("La Solution: " + solution);
    };

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

      const options = {
        doneCallback: doneCallback,
        //sitekey: "AJOUTEZ-VOTRE-SITEKEY-ICI"
        //---> Au lieu de définir la clé de site dans <div>, vous pouvez également la définir ici.
      };

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

      //Vous pouvez également choisir de lancer automatiquement la résolution du défi lorsque le widget est prêt :
      //widget.value.start();
    };

    //Vous pouvez l'utiliser pour réinitialiser le widget :
    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>