Recaptcha invisible avec deux boutons pour un form
Bonjour,
J'ai eu du mal à choisir la section, mon problème étant plutôt lié à l'utilisation du recaptcha invisible de google. Cela englobe donc du JS, PHP et html.
J'ai un site web sur lequel j'utilise recaptcha v2. Jusqu'ici tout allait bien, mais je suis séduit par le nouveau recaptcha invisible, beaucoup plus élégant.
Je me met donc en tête de l'installer. J'ai sans problème réussi à faire marcher le recaptcha, en utilisant le code de google :
Code:
1
2
3
4
5
|
<form id='demo-form' action="page.php" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>
<br/>
</form> |
Je vous met le code exemple, c'est exactement ce que j'ai fait sur mon form. Tout fonctionne bien pour ce bouton.
Seulement, le problème est que j'ai deux boutons pour chaque form sur mon site. Le site se charge de déchiffrer par exemple du vigenere, porta, trithème, etc etc. Donc un champ texte ou textarea, et deux bouton chiffrer ou déchiffrer qui utilisent évidemment le même form. Je différencie les deux boutons en leur attribuant une value que je teste ensuite en POST avec un isset.
Donc j'ai tout bêtement ajouté un second champ button :
Code:
1
2
3
4
5
6
|
<form id='demo-form' action="page.php" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' value="chiffrer">Chiffer</button>
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit' value="dechiffrer">Déchiffrer</button>
<br/>
</form> |
Et là ça ne fonctionne pas. Je me doute bien que google doit voir seulement le premier.
Donc j'ai continué mes recherches, et j'ai trouvé la méthode du invisible div (enfin trouvé, c'était sur la page officielle de chez google). Seulement j'ai beau essayer tout ce qui me vient en tête, rien à faire.
Si j'utilise le code de chez google :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>onload();</script>
</body>
</html> |
Cela fonctionne sans problème, sauf que ça ne recharge pas la page. J'aimerais recharger la page et envoyer la variable POST['g-recaptcha-response'] qui sera traitée alors.
Je dois avouer que je m'y perd à force de chercher entre les grecaptcha.render() et les grecaptcha.execute();, je ne sais plus quoi faire et quoi utiliser. Tous les exemples ou presque, que j'ai trouvé sur internet reprennent le code de chez google ce qui ne m'aide pas plus.
Si quelqu'un ici a une petite idée qui me ferait avancer, je l'en remercie d'avance :)
Bonne journée et merci.
