web-dev-qa-db-fra.com

Intégration de Google reCaptcha v3 dans Angular app avec ng-recaptcha

Je voudrais protéger une page d'enregistrement des soumissions automatiques, j'ai donc décidé d'essayer reCaptcha v3. C'est une application Angular, et j'utilise ng-recaptcha module pour une intégration plus facile. J'ai mis en place un exemple de base sur Stackblitz afin que vous puissiez le tester en ligne :

https://stackblitz.com/edit/angular-qk3jhr

J'ai quelques doutes/problèmes:

  1. Si j'écris ma clé Google valide dans le app.module.ts fichier, lorsque j'appuie sur le bouton d'envoi, le this.recaptchaV3Service.execute l'appel ne fait rien. Est-ce parce que l'application n'est pas dans le domaine que j'ai indiqué lors de la génération des clés reCaptcha V3? De plus, si j'écris une mauvaise clé, Google se plaint de l'erreur suivante:

Erreur: clé de site non valide ou non chargée dans api.js:

  1. Une fois que j'ai reçu le jeton, que dois-je faire avec? J'ai lu la documentation ng-recaptcha mais je ne vois rien à ce sujet. Je veux dire, lorsque j'ai le token, que dois-je faire pour vérifier sa validité et envoyer le formulaire?

Merci d'avance,

angularrecaptcha-v3
2
Fel

Enfin, j'ai eu le temps d'essayer certaines choses et j'ai réussi à le faire fonctionner. En gros, ce que j'ai fait est:

1 Générez une paire de clés pour le test (en définissant 'localhost' dans le domaine).

2 Dans l'application cliente, j'ai configuré le ng-recaptcha module comme expliqué dans sa page ( https://www.npmjs.com/package/ng-recaptcha#recaptcha-v3-usage-see-in-action ). Ensuite, à partir du composant d'enregistrement des utilisateurs (que je souhaite protéger), j'exécute le code suivant en appuyant sur le bouton `` Soumettre '':

public beforeSubmittingForm(): void {
    this.recaptchaV3Service.execute('registerSubmit').subscribe(
        (token) => {
            // 'this.user' contains the data of the user we want to create. Add the received token
            this.user.recaptchav3_token = token;    

            this.submitForm();  // This sends the user data to the backend
        },
        (error) => {
            this.errors = [ 'Error trying to verify request (reCaptcha v3)' ];
        });
}

3 Dans le backend, dans la route d'enregistrement des utilisateurs, j'utilise la bibliothèque axios ( https://www.npmjs.com/package/axios ) pour créer un POST demande au service de vérification Google avec le jeton reçu:

try {
    var result = await axios.post("https://www.google.com/recaptcha/api/siteverify", {}, {
        params: {
            secret: recaptcha_api_key,  // Secret API key
            response: req.body.recaptchav3_token    // Received token from the frontend
        }
    });

    if(result.score < 0.5) {
        return res.status(403).json({ msg: 'Google Recaptcha error' });
    }
} catch(e) {
    return res.status(403).json({ msg: 'Error trying to verify the request' });
}
// Continue with the registration process...

J'espère que ça aide, bravo!

4
Fel

Je ne suis pas sûr de comprendre la première question. Si vous utilisez une clé non valide, vous devriez obtenir cette erreur. Si vous utilisez la clé correcte pour le domaine correct, le jeton doit être généré.

Pour la 2ème question ... il n'y a vraiment pas besoin de générer un jeton pendant ngOnInit() dans ce cas parce que vous générez un jeton dans votre méthode preSubmitForm(), et cela suffit. Pour savoir quoi faire avec le jeton, vous devrez le publier avec le reste des données du formulaire sur votre serveur. Ensuite, dans votre code côté serveur où la soumission du formulaire est gérée, faites une demande à l'API recaptcha en fournissant à la fois le jeton et votre clé secrète.

Jetez un œil à documentation reCaptcha de Google en ce qui concerne la validation côté serveur.

2
isNaN