Empêchez Le Spam Et Détectez Les Bots Avec ReCAPTCHA

Récemment, il y a eu différentes implémentations pour empêcher le spam de différents services Web. L'une de ces implémentations utilise une fonctionnalité reCAPTCHA. Un reCAPTCHA est un test automatisé pour déterminer si l'utilisateur d'une application Web est un humain ou un bot. De cette façon, les privilèges ou l'accès ne sont accordés qu'aux utilisateurs humains, réduisant ainsi l'utilisation indésirable.

Dans ce didacticiel, les lecteurs apprendront ce que sont les reCAPTCHA et comment les implémenter dans une application Web.

Qu'est-ce que reCAPTCHA ?

Un reCAPTCHA est un CAPTCHA(Completely Automated Public Turing Test to Tell Computers and Humans Apart) système gratuit, facile à ajouter et une fonctionnalité de sécurité de site avancée appartenant à Google. Il a été développé pour gérer l'utilisation indésirable du site par les bots et empêcher le spam en mettant en œuvre diverses techniques pour identifier si un utilisateur de page Web est un humain ou un bot. Ces techniques consistent à présenter à l'utilisateur un test facile à résoudre pour les humains mais difficile à vérifier pour les bots ou les logiciels malveillants. La mise en œuvre de cette fonctionnalité de sécurité dans une page Web empêche les abus du site tout en permettant aux utilisateurs humains d'utiliser le site comme ils le devraient, c'est-à-dire que les utilisateurs légitimes peuvent poursuivre leurs activités normales d'accès et d'utilisation du site Web après avoir réussi le test reCAPTCHA. Le GIF ci-dessous contient des exemples de types reCAPTCHA que vous avez pu rencontrer sur une page Web :

La mise en œuvre de la fonctionnalité de sécurité reCAPTCHA dans un site Web offre les avantages suivants :

• Empêche les logiciels automatisés d'abuser de certaines activités. Des exemples de tels sont les sondages, les commentaires de nouvelles, ou une enquête. La technologie reCAPTCHA empêchera les actions répétées des bots car un nouveau test reCAPTCHA sera nécessaire pour une nouvelle session utilisateur.
• Les reCAPTCHA servent de mesure de restriction du spam.
• Avoir une fonctionnalité reCAPTCHA aide à distinguer le trafic faux et réel généré sur une page Web.
• Les reCAPTCHA empêchent les utilisateurs d'exécuter des opérations de force brute sur un site Web car le logiciel ne pourrait pas réussir le test de sécurité à chaque fois qu'il s'exécute.

Dans l'ensemble, les reCAPTCHA sont sécurisés, car ils n'ont pas de modèles prévisibles dans le test sélectionné présenté à l'utilisateur.

Différents types et modes de fonctionnement de reCAPTCHA

Au fil du temps, il y a eu des évolutions dans les versions de reCAPTCHA, chaque nouvelle version ajoutant une nouvelle technique de test utilisateur. Jusqu'à présent, Google a publié trois versions de reCAPTCHA ; v1, v2 et v3.

• La v1 de reCAPTCHA a été conçue pour afficher une image et un champ de texte. Les utilisateurs devaient entrer ce qu'ils pouvaient voir dans l'image. Cette image contient généralement un ensemble de caractères, ces caractères étant déformés, étirés ou légèrement moins visibles. La manipulation de l'aspect visuel du texte a pour but d'empêcher le logiciel d'identifier le texte écrit dans l'image. Si le texte saisi dans le champ de texte correspond aux caractères de l'image, le test est réussi. Sinon, l'utilisateur devra passer un nouveau test.
• La deuxième version de reCAPTCHA v2 est encore utilisée aujourd'hui. V2 avait deux types différents : un test où un utilisateur doit cocher une case pour confirmer un texte disant "Je ne suis pas un robot", et le second type étant un défi de sécurité où l'utilisateur se voit présenter différents ensembles d'images et est nécessaire pour sélectionner des images qui correspondent à des objets spécifiques. Ces objets peuvent être des bateaux, des bouches d'incendie, des lampadaires, des avions, etc. L'utilisateur est vérifié lors de la sélection de toutes les images correspondantes, et le test est considéré comme réussi.

Pour cette version, reCAPTCHA surveille le comportement du site de l'utilisateur. Si l'utilisateur utilise le site de manière suspecte, l'image reCAPTCHA lui est présentée ; sinon, ils sont présentés avec la variante de case à cocher.

• v3 est une forme invisible de reCAPTCHA. Cette version de reCAPTCHA surveillera le trafic d'un site pour déterminer si les actions d'un utilisateur sont suspectes. Si les actions de l'utilisateur sont jugées non suspectes, aucun défi n'est affiché et vice-versa.

Intégration de reCAPTCHA avec Next.js

Pour démontrer la fonctionnalité reCAPTCHA, nous aurons un formulaire qui utilise un CAPTCHA pour permettre uniquement aux utilisateurs légitimes de soumettre des données. Pour suivre ce didacticiel, clonez le code du formulaire de démarrage à partir du référentiel GitHub et exécutez npm install-le dans le répertoire du projet pour installer toutes les dépendances nécessaires.

Nous aurons besoin de deux choses : la première, une clé API pour accéder à reCAPTCHA, et la seconde, la react-google-recaptchadépendance. Pour obtenir votre clé d'accès, naviguez dans votre navigateur jusqu'ici :

Sur cette page, nous devons entrer le titre de notre clé dans le Labelchamp. Pour le type reCAPTCHA, nous utiliserons la variante v2 "Je ne suis pas un robot". Dans le champ Domain, nous entrerons « localhost » et enfin cliquerons sur le bouton « Submit » pour générer la clé. Copiez les clés générées car nous les utiliserons dans notre application. Ensuite, installez la react-google-recaptchadépendance avec la commande suivante dans la CLI :

npm install --save react-google-recaptcha

Une fois l'installation terminée, nous pouvons importer et utiliser ce package dans Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Ensuite, ajoutez le ReCAPTCHAcomposant dans le formulaire juste en dessous du bouton de connexion :

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Le ReCAPTCHAcomposant nécessite une sitekeypropriété pour pouvoir l'utiliser. Maintenant, si nous exécutons l'application avec la npm run devcommande, nous obtiendrons un résultat similaire à l'image :

Le ReCAPTCHAcomposant nous permet de personnaliser le comportement et l'apparence du ReCAPTCHA en utilisant différentes propriétés. Certaines de ces propriétés comprennent :

• Thème : Cela prend une valeur lightou dark. Par défaut, le reCAPTCHA est affiché en utilisant un thème clair, mais l'ajout d'une themepropriété avec une valeur de darkrendra un reCAPTCHA sombre à la place.
• onChange : cela exécute une fonction de rappel lorsque l'utilisateur complète le reCAPTCHA.
• Taille : cette propriété prend l'une des valeurs suivantes : compact, normalou invisible. Il spécifie la taille du reCAPTCHA ou détermine si le reCAPTCHA serait invincible.
• Type : Ceci spécifie si le reCAPTCHA utilisera une image ou un son.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

Traitement de l'envoi du formulaire

Pour le formulaire, nous voulons que l'utilisateur puisse soumettre uniquement lorsqu'il a rempli le reCAPTCHA. Chaque fois qu'un utilisateur complète un reCAPTCHA, un jeton est généré. Ce jeton est valable deux minutes et ne peut être utilisé qu'une seule fois. Nous accéderions à ce jeton dans notre application pour permettre à l'utilisateur de soumettre le formulaire après avoir rempli le reCAPTCHA. Pour capturer ce jeton, nous allons utiliser le hook useRef de React :

//first we add an import for useRef
import { React, useState, useRef } from "react";

Après cela, nous allons créer une variable où nous stockerons la valeur du jeton, en utilisant useRef:

const getCaptchaRef = useRef(null);

Ajoutez ensuite cette variable à la refpropriété du reCAPTCHAcomposant :

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

La refpropriété renvoie différentes fonctions d'assistance. Certaines de ces fonctions et leurs objectifs correspondants incluent :

• excecuteAsync(): Cette fonction envoie une requête qui renvoie le jeton ou une erreur (le cas échéant). Cependant, cette fonction ne s'applique qu'aux reCAPTCHA invisibles. Pour reCAPTCHA visible, la getValue()fonction est utilisée pour renvoyer le jeton.
• getValue(): Comme son nom l'indique, cette fonction renvoie la valeur du champ reCAPTCHA.
• reset(): Ceci est utilisé pour réinitialiser le reCAPTCHA et est applicable en cas de reCAPTCHAvérifications ultérieures.

Nous pouvons utiliser le refpour obtenir notre jeton comme indiqué ci-dessous :

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ici, nous avons ajouté une fonction dans la onChangepropriété de notre composant. Nous allons utiliser cette fonction pour définir la valeur de notre jeton :

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Ensuite, nous devons vérifier le jeton généré avant d'activer la fonctionnalité de soumission. Pour ce faire, nous devons faire une POSTdemande d' https://www.google.com/recaptcha/api/siteverifyutilisation de Node.js sur le backend. Créez un nouveau fichier, Server.js, dans le répertoire racine de votre application. Pour le serveur, nous aurons besoin de deux dépendances ; Axiospour traiter notre POSTdemande et Expressgérer les routes du serveur. Nous pouvons installer ces dépendances avec les commandes CLI suivantes :

npm i express axios cors

Ensuite, créez un fichier Server.jsdans le répertoire racine du dossier du projet. Dans Server.js, saisissez le code suivant :

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Dans le code ci-dessus, nous avons créé un serveur qui s'exécute sur le port 5000 et écoute route /status. À l'aide de ce serveur, nous ferons une demande de publication pour déterminer si le jeton est valide, puis renverrons une réponse. Si le jeton est valide, le serveur renverra une réponse appropriée. Sinon, il renverrait une réponse false. Ouvrez le terminal et démarrez le serveur avec node Server.js.

Avec cela en place, nous lancerons notre demande index.jsdans notre reCaptchaValuefonction, comme indiqué ci-dessous :

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Dans le code, nous avons fait une demande de publication à l'URL de notre serveur avec le jeton renvoyé par le reCAPTCHA. Ensuite, nous définissons la valeur d'un état validégale à celle res.datarenvoyée par le serveur, soit "true" ou "false".

Enfin, nous ajouterons un onClickhandler à notre bouton pour effectuer différentes opérations en fonction de la valeur de valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Et dans la handleSubmit()fonction :

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Si nous exécutons notre application maintenant, nous obtenons le résultat suivant :

Si l'utilisateur échoue au reCAPTCHA, il demande simplement à l'utilisateur de réessayer jusqu'à ce que le test réussisse.

Conclusion

Ce didacticiel nous a enseigné reCAPTCHA et comment nous pouvons intégrer cette fonctionnalité de sécurité dans une application Next.

Source : https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

What is GEEK

Buddha Community

Empêchez Le Spam Et Détectez Les Bots Avec ReCAPTCHA

Récemment, il y a eu différentes implémentations pour empêcher le spam de différents services Web. L'une de ces implémentations utilise une fonctionnalité reCAPTCHA. Un reCAPTCHA est un test automatisé pour déterminer si l'utilisateur d'une application Web est un humain ou un bot. De cette façon, les privilèges ou l'accès ne sont accordés qu'aux utilisateurs humains, réduisant ainsi l'utilisation indésirable.

Dans ce didacticiel, les lecteurs apprendront ce que sont les reCAPTCHA et comment les implémenter dans une application Web.

Qu'est-ce que reCAPTCHA ?

Un reCAPTCHA est un CAPTCHA(Completely Automated Public Turing Test to Tell Computers and Humans Apart) système gratuit, facile à ajouter et une fonctionnalité de sécurité de site avancée appartenant à Google. Il a été développé pour gérer l'utilisation indésirable du site par les bots et empêcher le spam en mettant en œuvre diverses techniques pour identifier si un utilisateur de page Web est un humain ou un bot. Ces techniques consistent à présenter à l'utilisateur un test facile à résoudre pour les humains mais difficile à vérifier pour les bots ou les logiciels malveillants. La mise en œuvre de cette fonctionnalité de sécurité dans une page Web empêche les abus du site tout en permettant aux utilisateurs humains d'utiliser le site comme ils le devraient, c'est-à-dire que les utilisateurs légitimes peuvent poursuivre leurs activités normales d'accès et d'utilisation du site Web après avoir réussi le test reCAPTCHA. Le GIF ci-dessous contient des exemples de types reCAPTCHA que vous avez pu rencontrer sur une page Web :

La mise en œuvre de la fonctionnalité de sécurité reCAPTCHA dans un site Web offre les avantages suivants :

• Empêche les logiciels automatisés d'abuser de certaines activités. Des exemples de tels sont les sondages, les commentaires de nouvelles, ou une enquête. La technologie reCAPTCHA empêchera les actions répétées des bots car un nouveau test reCAPTCHA sera nécessaire pour une nouvelle session utilisateur.
• Les reCAPTCHA servent de mesure de restriction du spam.
• Avoir une fonctionnalité reCAPTCHA aide à distinguer le trafic faux et réel généré sur une page Web.
• Les reCAPTCHA empêchent les utilisateurs d'exécuter des opérations de force brute sur un site Web car le logiciel ne pourrait pas réussir le test de sécurité à chaque fois qu'il s'exécute.

Dans l'ensemble, les reCAPTCHA sont sécurisés, car ils n'ont pas de modèles prévisibles dans le test sélectionné présenté à l'utilisateur.

Différents types et modes de fonctionnement de reCAPTCHA

Au fil du temps, il y a eu des évolutions dans les versions de reCAPTCHA, chaque nouvelle version ajoutant une nouvelle technique de test utilisateur. Jusqu'à présent, Google a publié trois versions de reCAPTCHA ; v1, v2 et v3.

• La v1 de reCAPTCHA a été conçue pour afficher une image et un champ de texte. Les utilisateurs devaient entrer ce qu'ils pouvaient voir dans l'image. Cette image contient généralement un ensemble de caractères, ces caractères étant déformés, étirés ou légèrement moins visibles. La manipulation de l'aspect visuel du texte a pour but d'empêcher le logiciel d'identifier le texte écrit dans l'image. Si le texte saisi dans le champ de texte correspond aux caractères de l'image, le test est réussi. Sinon, l'utilisateur devra passer un nouveau test.
• La deuxième version de reCAPTCHA v2 est encore utilisée aujourd'hui. V2 avait deux types différents : un test où un utilisateur doit cocher une case pour confirmer un texte disant "Je ne suis pas un robot", et le second type étant un défi de sécurité où l'utilisateur se voit présenter différents ensembles d'images et est nécessaire pour sélectionner des images qui correspondent à des objets spécifiques. Ces objets peuvent être des bateaux, des bouches d'incendie, des lampadaires, des avions, etc. L'utilisateur est vérifié lors de la sélection de toutes les images correspondantes, et le test est considéré comme réussi.

Pour cette version, reCAPTCHA surveille le comportement du site de l'utilisateur. Si l'utilisateur utilise le site de manière suspecte, l'image reCAPTCHA lui est présentée ; sinon, ils sont présentés avec la variante de case à cocher.

• v3 est une forme invisible de reCAPTCHA. Cette version de reCAPTCHA surveillera le trafic d'un site pour déterminer si les actions d'un utilisateur sont suspectes. Si les actions de l'utilisateur sont jugées non suspectes, aucun défi n'est affiché et vice-versa.

Intégration de reCAPTCHA avec Next.js

Pour démontrer la fonctionnalité reCAPTCHA, nous aurons un formulaire qui utilise un CAPTCHA pour permettre uniquement aux utilisateurs légitimes de soumettre des données. Pour suivre ce didacticiel, clonez le code du formulaire de démarrage à partir du référentiel GitHub et exécutez npm install-le dans le répertoire du projet pour installer toutes les dépendances nécessaires.

Nous aurons besoin de deux choses : la première, une clé API pour accéder à reCAPTCHA, et la seconde, la react-google-recaptchadépendance. Pour obtenir votre clé d'accès, naviguez dans votre navigateur jusqu'ici :

Sur cette page, nous devons entrer le titre de notre clé dans le Labelchamp. Pour le type reCAPTCHA, nous utiliserons la variante v2 "Je ne suis pas un robot". Dans le champ Domain, nous entrerons « localhost » et enfin cliquerons sur le bouton « Submit » pour générer la clé. Copiez les clés générées car nous les utiliserons dans notre application. Ensuite, installez la react-google-recaptchadépendance avec la commande suivante dans la CLI :

npm install --save react-google-recaptcha

Une fois l'installation terminée, nous pouvons importer et utiliser ce package dans Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Ensuite, ajoutez le ReCAPTCHAcomposant dans le formulaire juste en dessous du bouton de connexion :

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Le ReCAPTCHAcomposant nécessite une sitekeypropriété pour pouvoir l'utiliser. Maintenant, si nous exécutons l'application avec la npm run devcommande, nous obtiendrons un résultat similaire à l'image :

Le ReCAPTCHAcomposant nous permet de personnaliser le comportement et l'apparence du ReCAPTCHA en utilisant différentes propriétés. Certaines de ces propriétés comprennent :

• Thème : Cela prend une valeur lightou dark. Par défaut, le reCAPTCHA est affiché en utilisant un thème clair, mais l'ajout d'une themepropriété avec une valeur de darkrendra un reCAPTCHA sombre à la place.
• onChange : cela exécute une fonction de rappel lorsque l'utilisateur complète le reCAPTCHA.
• Taille : cette propriété prend l'une des valeurs suivantes : compact, normalou invisible. Il spécifie la taille du reCAPTCHA ou détermine si le reCAPTCHA serait invincible.
• Type : Ceci spécifie si le reCAPTCHA utilisera une image ou un son.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

Traitement de l'envoi du formulaire

Pour le formulaire, nous voulons que l'utilisateur puisse soumettre uniquement lorsqu'il a rempli le reCAPTCHA. Chaque fois qu'un utilisateur complète un reCAPTCHA, un jeton est généré. Ce jeton est valable deux minutes et ne peut être utilisé qu'une seule fois. Nous accéderions à ce jeton dans notre application pour permettre à l'utilisateur de soumettre le formulaire après avoir rempli le reCAPTCHA. Pour capturer ce jeton, nous allons utiliser le hook useRef de React :

//first we add an import for useRef
import { React, useState, useRef } from "react";

Après cela, nous allons créer une variable où nous stockerons la valeur du jeton, en utilisant useRef:

const getCaptchaRef = useRef(null);

Ajoutez ensuite cette variable à la refpropriété du reCAPTCHAcomposant :

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

La refpropriété renvoie différentes fonctions d'assistance. Certaines de ces fonctions et leurs objectifs correspondants incluent :

• excecuteAsync(): Cette fonction envoie une requête qui renvoie le jeton ou une erreur (le cas échéant). Cependant, cette fonction ne s'applique qu'aux reCAPTCHA invisibles. Pour reCAPTCHA visible, la getValue()fonction est utilisée pour renvoyer le jeton.
• getValue(): Comme son nom l'indique, cette fonction renvoie la valeur du champ reCAPTCHA.
• reset(): Ceci est utilisé pour réinitialiser le reCAPTCHA et est applicable en cas de reCAPTCHAvérifications ultérieures.

Nous pouvons utiliser le refpour obtenir notre jeton comme indiqué ci-dessous :

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ici, nous avons ajouté une fonction dans la onChangepropriété de notre composant. Nous allons utiliser cette fonction pour définir la valeur de notre jeton :

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Ensuite, nous devons vérifier le jeton généré avant d'activer la fonctionnalité de soumission. Pour ce faire, nous devons faire une POSTdemande d' https://www.google.com/recaptcha/api/siteverifyutilisation de Node.js sur le backend. Créez un nouveau fichier, Server.js, dans le répertoire racine de votre application. Pour le serveur, nous aurons besoin de deux dépendances ; Axiospour traiter notre POSTdemande et Expressgérer les routes du serveur. Nous pouvons installer ces dépendances avec les commandes CLI suivantes :

npm i express axios cors

Ensuite, créez un fichier Server.jsdans le répertoire racine du dossier du projet. Dans Server.js, saisissez le code suivant :

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Dans le code ci-dessus, nous avons créé un serveur qui s'exécute sur le port 5000 et écoute route /status. À l'aide de ce serveur, nous ferons une demande de publication pour déterminer si le jeton est valide, puis renverrons une réponse. Si le jeton est valide, le serveur renverra une réponse appropriée. Sinon, il renverrait une réponse false. Ouvrez le terminal et démarrez le serveur avec node Server.js.

Avec cela en place, nous lancerons notre demande index.jsdans notre reCaptchaValuefonction, comme indiqué ci-dessous :

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Dans le code, nous avons fait une demande de publication à l'URL de notre serveur avec le jeton renvoyé par le reCAPTCHA. Ensuite, nous définissons la valeur d'un état validégale à celle res.datarenvoyée par le serveur, soit "true" ou "false".

Enfin, nous ajouterons un onClickhandler à notre bouton pour effectuer différentes opérations en fonction de la valeur de valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Et dans la handleSubmit()fonction :

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Si nous exécutons notre application maintenant, nous obtenons le résultat suivant :

Si l'utilisateur échoue au reCAPTCHA, il demande simplement à l'utilisateur de réessayer jusqu'à ce que le test réussisse.

Conclusion

Ce didacticiel nous a enseigné reCAPTCHA et comment nous pouvons intégrer cette fonctionnalité de sécurité dans une application Next.

Source : https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

Create A Twitter Bot With Python

Create a Twitter bot with Python that tweets images or status updates at a set interval. The Python script also scrapes the web for data.

📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=8u-zJVVVhT4&list=PLWKjhJtqVAbnqBxcdjVGgT3uVR10bzTEB&index=14
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#python #a twitter bot #a twitter bot with python #bot #bot with python #create a twitter bot with python

How to Add Google ReCAPTCHA V3 in CodeIgniter 4

Google reCAPTCHA v3 is an invisible type of captcha where the user doesn’t have to interact. It tracks the user behavior on the site and returns a score between 0 to 1 with the response.

This score is use for validation on the server side.

In this tutorial, I show how you can add Google reCAPTCHA v3 to your form in CodeIgniter 4.

Contents

1. Get Google reCaptcha keys
2. Create variables in .env
3. Enable CSRF
4. Create custom validation for reCaptcha v3
5. Create Controller
6. Routes
7. Create View
8. Output
9. Conclusion

1. Get Google reCaptcha keys

You can skip this step if you already registered for Google reCAPTCHA v3 and have site and secret keys.

• Navigate to the following link and login into your account if not logged in.
• Following page will display.

• Here, enter label, select reCAPTCHA v3 from the reCAPTCHA type, enter your domain name without https e.g. makitweb.com. You can also specify localhost if you want to test it on your local system.
• Check the Accept the reCAPTCHA Terms of Service and click the Submit button.

• Copy the site and secret keys.

---

2. Create variables in .env

• Open .env file which is available at the project root.

NOTE – If dot (.) not added at the start then rename the file to .env.

• Here, define 2 variables for storing the captcha site and secret keys –

GOOGLE_RECAPTCHAV3_SITEKEY = 6LdP-nIhAAAAAA6rzq7BTh_jKqIYeKMoaALxkKte
GOOGLE_RECAPTCHAV3_SECRETKEY = 6LdV-nIhAAAAAL-uFI4w9kQUaqMkeU2K3KojlXyE

---

3. Enable CSRF

• Again open .env file.
• Remove # from the start of the security.tokenName,security.headerName, security.cookieName, security.expires,and security.regenerate.
• I update the security.tokenName value with 'csrf_hash_name'. With this name read CSRF hash. You can update it with any other value.
• If you don’t want to regenerate CSRF hash after each request then set security.regenerate = false.

security.tokenName = 'csrf_hash_name' 
security.headerName = 'X-CSRF-TOKEN' 
security.cookieName = 'csrf_cookie_name' 
security.expires = 7200 
security.regenerate = true

• Open app/Config/Filters.php file.
• Uncomment 'csrf' in 'before' if commented.

// Always applied before every request
public $globals = [
    'before' => [
         // 'honeypot',
         'csrf',
         // 'invalidchars',
    ],
    'after' => [
        'toolbar',
        // 'honeypot',
        // 'secureheaders',
    ],
];

---

4. Create custom validation for reCaptcha v3

Create a rule to verify reCaptcha v3 response.

• Create a new CaptchaValidation.php file in app/Config/ folder.
• Create a CaptchaValidation class.
• In the class create verifyrecaptchaV3() method. Here, the method name is also a rule name.
• Read the secret key from .env file and assign it to $secretkey.
• Send request to –

https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']

• Here, pass secret key, recaptcha response, and IP address.
• It returns a JSON response.
• If $responseData->success is true and $responseData->score is > 0.6 then return true otherwise, assign error message in $error and return false.

NOTE – You can update value of $score from 0.6 to any other value. Make sure to set it between 0.5 to 1.

Completed Code

<?php 
namespace Config;

class CaptchaValidation{

     public function verifyrecaptchaV3(string $str, ?string &$error = null): bool
     {
          $secretkey = getenv('GOOGLE_RECAPTCHAV3_SECRETKEY');

          if(($str) && !empty($str)) {

               $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$str."&remoteip=".$_SERVER['REMOTE_ADDR']);

               $responseData = json_decode($response);
               $score = 0.6; // 0 - 1
               if($responseData->success && $responseData->score > $score) { // Verified
                    return true;
               }
          }

          $error = "Invalid captacha";

          return false;
     }

}

---

To use the above-created validation rule need to define it in the Validation.php file.

• Open app/Config/Validation.php file.
• Include Config\CaptchaValidation class.
• Specify CaptchaValidation::class in $ruleSets Array.

Completed Code

<?php

namespace Config;

use CodeIgniter\Config\BaseConfig;
use CodeIgniter\Validation\CreditCardRules;
use CodeIgniter\Validation\FileRules;
use CodeIgniter\Validation\FormatRules;
use CodeIgniter\Validation\Rules;
use Config\CaptchaValidation; // Custom reCAPTCHA v3 validation

class Validation extends BaseConfig
{
      // --------------------------------------------------------------------
      // Setup
      // --------------------------------------------------------------------

      /**
      * Stores the classes that contain the
      * rules that are available.
      *
      * @var string[]
      */
      public $ruleSets = [
          Rules::class,
          FormatRules::class,
          FileRules::class,
          CreditCardRules::class,
          CaptchaValidation::class, // Custom reCAPTCHA v3 validation
      ];

      /**
      * Specifies the views that are used to display the
      * errors.
      *
      * @var array<string, string>
      */
      public $templates = [
          'list' => 'CodeIgniter\Validation\Views\list',
          'single' => 'CodeIgniter\Validation\Views\single',
      ];

      // --------------------------------------------------------------------
      // Rules
      // --------------------------------------------------------------------
}

---

5. Create Controller

Create PagesController Controller –

php spark make:controller PagesController

• Open app/Controllers/PagesController.php file.
• Create 2 methods –
  • index() – Load index view.
  • submitContactUs() – This method calls on form submit.

Validate the submitted values. Here, for validating recaptcha specify – 'recaptch_response' => 'required|verifyrecaptchaV3',.

verifyrecaptchaV3 is a custom validation rule created in the previous step.

If <form > is not validated then return to the page with error messages otherwise store the success message in SESSION flash and redirect to route('/').

Completed Code

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class PagesController extends BaseController
{
     public function index(){
         return view('index'); 
     }

     public function submitContactUs(){

         // Validation
         $input = $this->validate([
              'name' => 'required',
              'email' => 'required',
              'subject' => 'required',
              'message' => 'required',
              'recaptcha_response' => 'required|verifyrecaptchaV3',
            ],[
              'recaptcha_response' => [
                    'required' => 'Please verify captcha',
              ],
         ]);

         if (!$input) { // Not valid

              $data['validation'] = $this->validator;

              return redirect()->back()->withInput()->with('validation', $this->validator);

         }else{ 
              // Set Session
              session()->setFlashdata('message', 'Request Submitted Successfully!');
              session()->setFlashdata('alert-class', 'alert-success');

         }
         return redirect()->route('/');
     }

}

---

6. Routes

• Open app/Config/Routes.php file.
• Here, create 2 routes –
  • / 
  • page/submitContactUs – Handle form submit.

$routes->get('/', 'PagesController::index');
$routes->post('page/submitContactUs', 'PagesController::submitContactUs');

---

7. Create View

• Create index.php file in app/Views/ folder.
• Include recaptcha js in <head > section –

<!-- reCAPTCHA JS-->
<script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>

Here, also specify sitekey.

• Create a contact form and set action URL to <?=site_url('page/submitContactUs')?>. Define onSubmit event on <form > that calls onSubmit(event).
• Display an error message if <form> element is not validated. In the <form > also display an error message if recaptcha is not validated.
• Create a hidden element #recaptcha_response to store recapatcha token response on <form > submit.
• Create a submit button.

---

Script

• Create onSubmit() function that calls on <form > submit.
• Call grecaptcha.execute on submit action to get a token.
• Assign the token to the hidden element #recaptcha_response.
• Submit the <form >.

Completed Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to add Google reCAPTCHA v3 in CodeIgniter 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >

    <!-- reCAPTCHA JS-->
    <script src="https://www.google.com/recaptcha/api.js?render=<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>"></script>

    <!-- Include script -->
    <script type="text/javascript">

    function onSubmit(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
             grecaptcha.execute("<?= getenv('GOOGLE_RECAPTCHAV3_SITEKEY') ?>", {action: 'submit'}).then(function(token) {

                  // Store recaptcha response
                  document.getElementById("recaptcha_response").value = token;

                  // Submit form
                  document.getElementById("contactForm").submit();

             });
        });
    }

    </script>
</head>
<body>

    <div class="container">

        <div class="row">
             <div class="col-md-6 mt-5" style="margin: 0 auto;">

                 <?php 
                 // Display Response
                 if(session()->has('message')){
                 ?>
                      <div class="alert <?= session()->getFlashdata('alert-class') ?>">
                           <?= session()->getFlashdata('message') ?>
                      </div>
                 <?php
                 }
                 ?>

                 <h2 class="mb-4">Contact US</h2>

                 <?php $validation = \Config\Services::validation(); ?>

                 <form id="contactForm" method="post" action="<?=site_url('page/submitContactUs')?>" onSubmit="onSubmit(event)">

                     <?= csrf_field(); ?>

                     <!-- Recaptcha Error -->
                     <?php if( $validation->getError('recaptcha_response') ) {?>

                          <div class="alert alert-danger">
                                <?= $validation->getError('recaptcha_response'); ?>
                          </div>
                     <?php }?>

                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="name">Name:</label>
                          <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name" value="<?= old('name') ?>">
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('name') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('name'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="email">Email:</label>
                          <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" value="<?= old('email') ?>">
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('email') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('email'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="subject">Subject:</label>
                          <div class="col-sm-10">
                                <input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject" value="<?= old('subject') ?>" >
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('subject') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('subject'); ?>
                                </div>
                          <?php }?>
                     </div>
                     <div class="form-group mb-4">
                          <label class="control-label col-sm-2" for="message">Message:</label>
                          <div class="col-sm-10">
                                <textarea class="form-control" id="message" name="message"><?= old('message') ?></textarea>
                          </div>

                          <!-- Error -->
                          <?php if( $validation->getError('message') ) {?>
                                <div class='text-danger mt-2'>
                                     * <?= $validation->getError('message'); ?>
                                </div>
                          <?php }?>
                     </div>

                     <div class="form-group "> 
                          <div class="col-sm-offset-2 col-sm-10">
                                <input type="hidden" id="recaptcha_response" name="recaptcha_response" value="">
                                <button type="submit" class="btn btn-info">Submit</button>
                          </div>
                     </div>
                 </form>
             </div>
        </div>

    </div>

</body>
</html>

---

8. Output

View Output

---

9. Conclusion

Using this you can protect your website without forcing the user to verify whether it is human or a bot.

You can also view this tutorial if you want to know Google reCAPTCHA v2 implementation in CodeIgniter 4.

If you found this tutorial helpful then don't forget to share.

Original article source at: https://makitweb.com/

#codeigniter #recaptcha #google 

How to Make a Anti-Spam Bot in Under 30 Lines of Code in Node.js

In this video, I’ll be showing you how to make a classifier that can classify spam or not spam.

#javascript #programming #anti spam bot #statistical classification #non-spam #tutorial

Uniswap crypto trading bot | crypto trading bot

The Uniswap crypto trading bot is trending in recent times across the globe. Millions of users are getting addicted to the digital transition change happening right now in the world. The introduction of a crypto-trading bot helps entrepreneurs and investors handle the trade from buying to selling to reap more profits. Crypto-trading bots are consistent and monotonous in managing simple to complex skills, but humans cannot attain everything that is highly challenging for them. The capacity of crypto bots has gigabytes of data per second to handle the trade, whereas humans can’t process that much data within that time frame. Infinite Block Tech provides complete assistance for clients across the globe to benefit from growing their business revenue from being a part of their success.

#uniswap crypto trading bot #crypto trading bot #crypto-trading bot