Discussion :

[bndd24]

Salut

Voila, je ne sais pas pourquoi mon champ hidden (de mon ContactType.php) ne récupère pas la valeur de retour de mon code javascript !
doc google sur le recaptcha :
https://developers.google.com/recapt..._the_challenge

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
{% extends 'base.html.twig' %}
 
{% block title %}Nous contacter{% endblock %}
 
{% block body %}
<div class="container">
    <h1>Nous contacter</h1>
 
    {{ form_start(form) }}
 
    <div class="row">
        <div class="col-6">{{ form_row(form.firstName) }}</div>
        <div class="col-6">{{ form_row(form.lastName) }}</div>
        <div class="col-12">{{ form_row(form.email) }}</div>
        <div class="col-12">{{ form_row(form.subject) }}</div>
        <div class="col-12">{{ form_row(form.message) }}</div>
    </div>
 
    <button class="btn btn-primary">Envoyer</button>
    {{ form_end(form) }}
</div>
{% endblock %}
 
{% block javascripts %}
 
<script src="https://www.google.com/recaptcha/api.js?render=6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg"></script>
 
<script>
 
    window.onload = function () {
        //document.getElementById('contact_recaptcha').value = 'test1' // c'est une ligne de test et cette ligne envoie bien test1 au champ contact_recaptcha (masqué) ICI PAS DE PROBLEME donc c'est bien du au code plus bas ou bien a la librairie que j'utilise peut être mal ?
 
        function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute('6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg', { action: 'submit' }).then(function (token) {
                    // Add your logic to submit to your backend server here.
                    document.getElementById('contact_recaptcha').value = 'test2' // cette ligne envoie pas test2 au champ contact_recaptcha ! Je ne sais pas pourquoi (je ne maitrise pas très bien javascript, je suis simplement la doc google sur le recaptcha)
                });
            });
        }
 
    }
</script>
 
{% endblock %}

mon objectif est que je récupère la valeur "test2"...

quelqu'un aurait-il une idée du problème rencontré ? Je vous remercie

[Celira]

Question bête : cette fonction js onClick tu l'utilises quelque part ? parce que là, je vois la définition mais pas l'utilisation...

[bndd24]

enfin une réponse a ma demande
Je suis dessus depuis 15 jours : ras le bol pour être honnête avec toi.

Je ne maitrise pas le Javascript, mon objectif est simplement de mettre en place le reCAPTCHA de google (v3) sur un simple form de contact symfony, pour cela j'ai simplement copié les exemples ici :
https://developers.google.com/recaptcha/docs/v3

mais cela ne fonctionne pas, je ne comprends pas. en gros, je ne sais pas si je dois créer un champ genre hidden qui récupère le "token" ou si je dois utiliser le premier exemple dans la doc, car avec le premier exemple, mon bouton ne fonctionne plus du tout...... :/ Je ne sais pas si je suis très clair dans mes explications

[darkstar123456]

Bonjour,

Est-ce qu'un champ portant un attribut id="contact_recaptcha" existe ?
En lisant le bout de code, ça ne semble pas être le cas.
Le plus simple pour débuger ça dans un premier temps (ou si vous n'avez pas l'habitude), est de changer type="hidden" en type="text".

En effet, si la valeur n'existe pas et si le champ n'existe pas, alors on ne risque pas de retrouver sa valeur après la soumission du formulaire :-)

NB : pour la récupération de la valeur après soumission c'est l'attribut name qui compte, donc si vous écrivez :
<input type="hidden" name="recaptcha-response" id="contact_recaptcha" />,
c'est bien $_POST['recaptcha-response'] que vous devrez utiliser dans votre controller pour lire la valeur


Sinon, comme l'a dit @Celira, en regardant ce simple bout de code la fonction onClick n'est probablement jamais appelée.
D'après la doc, il faut soit ajouter des attributs data avec une classe g-recaptcha sur le bouton pour indiquer quelle fonction utiliser.
Pour l'avoir déjà lue et utilisée, cette doc est très incomplète je trouve car il y a juste des bouts de code sans la moindre explication

EDIT : Ca faisait longtemps que je n'avais plus fait de reCaptcha, je suis donc allé faire un test dans mon coin.
Voici ce qu'il suffit de faire (et c'est ce que montre la doc sans l'expliquer) :
1. donner un ID à son formulaire
2. ajouter classe g-recaptcha au bouton submit, ainsi que les autres attributs (data-sitekey, data-callback et data-action)
3. ajouter la fonction définie dans l'attribut data-callback en Javascript

Voici donc un exemple :
(j'ai mis des noms volontairement longs et bêtes mais qui évitent toute confusion)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form id="contact-form-cest-son-nom" method="post" action="">
.... ici les champs du formulaire ...
<button type="submit" class="btn btn-primary g-recaptcha"
		data-sitekey="________reCAPTCHA_site_key__A_CHANGER________" 
		data-callback="onSubmitJajouteAutomatiquementLaReponseAuFormulaire" 
		data-action="submit">Envoyer</button>
</form>
<script>
        function onSubmitJajouteAutomatiquementLaReponseAuFormulaire(token) {
                document.getElementById("contact-form-cest-son-nom").submit();
        }
</script>

Test visible en live ici : https://tests.pierre-roels.com/recaptcha-v3.php

[bndd24]

Salut,

J'ai déjà passé le type en "text" afin de mieux debuggé le problème, il est présent dans le contactType.php (symfony insert automatiquement les champs dans le twig, comme ce n'est pas un champ que je veux visible par la suite je n'ai donc pas pris la peine de le mettre dans le row) mais je le vois bien dans l'affichage de mon formulaire donc aucun problème de ce coté la. et c'est bien ce champ qui porte l'id "contact_recaptcha"

en gros je veux que google m'envoie le token dessus.

par la suite pour la récupération dans la super global post et le traitement etc aucun problème pour moi coté back end

[darkstar123456]

Rebonjour,

J'ai édité mon post avec un code fonctionnel (pendant la rédaction de votre réponse je crois), je vous invite à le tester en mettant à jour votre code

D'ailleurs, n'oubliez pas qu'il faut valider le token côté serveur par la suite

De ce que je comprends de votre code, vous mixez la méthode automatique et la méthode programmatique.
Si vous souhaitez utiliser la méthode avec la fonction onClick, vous devez déclencher manuellement l'appel à cette fonction.
Je vous conseillerais de passer plutôt par l'ajout d'un ID sur le fomulaire, ainsi que la classe et les data-attributes sur le bouton submit si vous n'êtes pas à l'aise en JS