[reCAPTCHA] « tokenCaptcha » non transmis

Version imprimable

Bonjour tout le monde,

Tout d'abort sacher que mon nivaux en Js n'es pas tres bon 😅

Je vous explique mon probleme :

J'ai un formulaire simple de connexion avec le system recaptcha3 de google.

Code:

1
2
3
4
5
6
<form method="POST" action="/login" class="sub-container-div">
<input name="email" type="email" class="input-white-1" placeholder="Adresse e-mail professionnelle" />
<input name="password" type="password" class="input-white-1 password-input" placeholder="Mot de passe" />
<input type="hidden" id="captcha" name="tokenCaptcha" />
<button type="submit" class="colored-button-1" id="connect-button">SE CONNECTER</button>
</form><br><br>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var connectButton = document.getElementById('connect-button');
grecaptcha.ready(function () {
    connectButton.addEventListener('click', function (e) {
        grecaptcha.execute(captcha_public_key, {action: 'homepage'}).then(function (token) {
            document.getElementById('captcha').value = token;
            setTimeout(function () {
                connectButton.disabled = "on";
                connectButton.classList.add('disabled');
                var loadingDivs = document.getElementsByClassName('loading-div');
 
                for (var i = 0; i < loadingDivs.length; i++) {
                    loadingDivs[i].style.display = "flex";
                }
            });
        });
    });
});

Seulement l'input "tokenCaptcha" n'est pas envoyé, je pensse que c'est parce que l'evenment click est trop rapide. C'est possible ? Sinon d'où cela peut venir ? La méthode que j'utilise n'est pas t'elle par la bonne ?

28/11/2019, 16h10
psychadelic

Pour ce genre d'algo, il me semble que l'utilisation d'une promesse est incontournable...
28/11/2019, 17h16
Dinatrium

Merci,
Pas d'autre solution ? Je t'avoue que je suis encore moins a l'aise avec asynchrone en JS...
29/11/2019, 10h20
NoSmoking
Bonjour,

Citation:

Envoyé par psychadelic

... il me semble que l'utilisation d'une promesse est incontournable...

grecaptcha.execute est une Promise ;)

Citation:

Envoyé par Dinatrium

...c'est parce que l'evenment click est trop rapide.

Qu'est ce qu'un click trop rapide :lol:, plus sérieusement ,ta page est soumise avant le retour de la réponse de grecaptcha.execute
Code:

1 2 3 connectButton.addEventListener('click', function (e) { e.preventDefault(); //
et au retour de la réponse positive tu soumets ton formulaire.

J'aurais bien aimer voir ton message avant 😵
Mais finalement j'en suis venu a la même conclusion 😁

J'ai ajouter un id au form :

Code:

1
2
3
4
5
6
7
8
9
10
11
<form id="formSubmit" method="POST" action="/login" class="sub-container-div">
 
<input name="email" type="email" class="input-white-1" placeholder="Adresse e-mail professionnelle" />
 
<input name="password" type="password" class="input-white-1 password-input" placeholder="Mot de passe" />
 
<input type="hidden" id="captcha" name="tokenCaptcha" />
 
<button type="submit" class="colored-button-1" id="connect-button">SE CONNECTER</button>
 
</form>

Pour le Js j'ai save l'action dans une variable form, ensuite je la stop.
Une fois que le chargement du token est terminer je renvoie l'action avec ma variable form.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
ReCaptcha3
 */
$('#formSubmit').submit(function (e) {
    var form = this;
    e.preventDefault();
    var connectButton = document.getElementById('connect-button');
    grecaptcha.ready(function () {
        grecaptcha.execute(captcha_public_key, {action: 'homepage'}).then(function (token) {
            document.getElementById('captcha').value = token;
            form.submit();
            setTimeout(function () {
                connectButton.disabled = "on";
                connectButton.classList.add('disabled');
                var loadingDivs = document.getElementsByClassName('loading-div');
 
                for (var i = 0; i < loadingDivs.length; i++) {
                    loadingDivs[i].style.display = "flex";
                }
            });
        });
    });
});

Merci beaucoup en tout qu'a :)