Blog

Il fonctionne très bien avec react-recaptcha.

reCAPTCHA est un service gratuit qui protège votre site contre le spam et les abus. Il utilise un moteur d'analyse des risques avancé pour distinguer les humains et les robots.

reCAPTCHA se présente sous la forme d'un widget que vous pouvez facilement intégrer à votre site, blog, formulaire d'inscription, etc.

Inscrivez-vous pour une paire de clés API : 

Pour utiliser reCAPTCHA, vous devez vous inscrire à une paire de clés API pour votre site ce dernier se compose d'une clé de site et d'une clé secrète. La clé de site est utilisée pour afficher le widget sur votre site et la clé secrète autorise la communication entre le backend de votre application et le serveur reCAPTCHA pour vérifier la réponse de l'utilisateur. pour des raisons de sécurité il ne faut pas partager la clé secrète. 

Pour récupérer votre paire de clés il faut ajouter les informations de votre site au admin console de google recaptcha : https://www.google.com/recaptcha/intro/v3.html

Installation de react-recaptcha :

Pour installer le package React recaptcha il faut revenir au local et exécuter le code suivant :

npm install react-recaptcha

Rendre automatiquement le widget reCAPTCHA :

il fallait ajouter le script suivant au fichier gatsby-ssr.js :

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

Le fichier gatsby-ssr.js vous permet de modifier le contenu des fichiers HTML statiques au fur et à mesure qu'ils sont rendus côté serveur (SSR) par Gatsby et Node.js.

Création d’un composant dédié pour le rendu de ReCaptcha:

Les props de composants : 

• className: la classe de la div reCAPTCHA.
• onloadCallbackName: le nom de votre fonction onloadCallback
• elementID: le #id de la div reCAPTCHA.
• onloadCallback: le rappel à passer dans l'API reCAPTCHA si le rendu est explicite.
• verifyCallback: le rappel qui se déclenche après la vérification d’un utilisateur.
• expiredCallback: facultatif. Un rappel à passer dans le reCAPTCHA si la réponse a expiré.
• render: spécifie le type de rendu pour le composant
• sitekey: la clé de site du widget reCAPTCHA.
• theme: le thème du widget, clair ou foncé.
• type: le type de reCAPTCHA que vous souhaitez rendre
• size: la taille souhaitée du widget reCAPTCHA peut être soit «compacte», soit «normale».
• tabindex: facultatif: le tabindex du widget. Si d'autres éléments de votre page utilisent tabindex, il doit être configuré pour faciliter la navigation de l'utilisateur.
• hl: facultatif. Force le widget à s’afficher avec une langue spécifique ou détecter automatiquement la langue de l'utilisateur.
• badge: facultatif. Repositionner le badge reCAPTCHA. 'inline' vous permet de contrôler le CSS.

Conclusion :

pour garder votre site sécurisé il faut ajouter les fonctionnalités de sécurité importantes à votre site. 

reCaptcha est vraiment simple à mettre en place, il joue un rôle important pour éviter d’être la cible de spams.