Aller au contenu principal

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.

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>