Discussion :

[Dinatrium]

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 html :

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

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 :

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
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 ?

[psychadelic]

Pour ce genre d'algo, il me semble que l'utilisation d'une promesse est incontournable...

[Dinatrium]

Merci,
Pas d'autre solution ? Je t'avoue que je suis encore moins a l'aise avec asynchrone en JS...

[NoSmoking]

Bonjour,

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

grecaptcha.execute est une Promise

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

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

Code :

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

1
2
3
connectButton.addEventListener('click', function (e) {
  e.preventDefault();
  //

et au retour de la réponse positive tu soumets ton formulaire.

[Dinatrium]

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 HTML :

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

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 :

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
/*
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