Non, mais pourquoi autant galérer avec Recaptcha V3 ?

Déjà ils ne vous expliquent pas clairement qu’il faut une partie client et une partie serveur.

Donc vous allez galérer à comprendre pourquoi ça marche pas, et pourquoi vous avez des erreurs. ET POURQUOI PERSONNE NE SAIT EXPLIQUER CA SUR LE NET.

D’où ce post.

La méthode qui marche

Déjà faites bien la différence, vous avez 2 clés, une pour le client, une pour le serveur.

Coté client

<script src="https://www.google.com/recaptcha/api.js?render={SITE_SECRET}"></script>

<form id="contact-form">
    ...
</form>

<script>
    function onClick(e) {
        e.preventDefault(); //On bloque l'envoi du formulaire
        //Pour récupérer le token
        grecaptcha.ready(function() {
            grecaptcha.execute('{SITE_KEY}', { action: 'submit' }).then(function(token) {
                document.getElementById("g-recaptcha-response").value = token;
                document.getElementById("contact-form").submit();
            });
        });
    }
</script>

Ce que la doc vous dit pas trop : Il faut passer en Form Data et non en Json Le secret est à passer dans l’URL ou dans le Form Data.

Mais pas en JSON.

    const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify?secret={SECRET_KEY}';

    const formData = new FormData()
    formData.append("response", userTokenData)

    const response = await fetch(recaptchaURL, {
        method: 'POST',
        body: formData
    })

    const responseData = await response.json()

{ success: false, ‘error-codes’: [ ‘missing-input-secret’ ] }

Vous envoyez votre secret en JSON, et non dans l’URL en query string.

{ success: false, ‘error-codes’: [ ‘invalid-input-response’ ] }

Vous envoyez votre token en JSON, et non en Form Data.

Enfin vous aurez le graal

{
  success: true,
  challenge_ts: '2023-06-10T17:56:07Z',
  hostname: '127.0.0.1',
  score: 0.9,
  action: 'submit'
}

La méthode qui marche pas

Suivre la doc d’Astro ou de Recaptcha, parce qu’elles ne sont pas claires.