Comment ajouter Google reCAPTCHA aux formulaires Django ?

Ce tutoriel explique comment intégrer le système reCaptcha de Google à votre site Django. Pour créer un formulaire dans Django, vous pouvez consulter – Comment créer un formulaire avec Django Forms ?

Commencer

L’ajout de reCaptcha à n’importe quel formulaire HTML implique les étapes suivantes :

  1. Enregistrez le domaine de votre site dans la console d’administration reCaptcha.
  2. Ajoutez des clés recaptcha aux paramètres du projet.
  3. Ajoutez des scripts reCaptcha et un élément d’entrée au modèle HTML.
  4. Lors de la soumission du formulaire, faites une demande de publication à l’API google reCaptcha dans le backend avec la valeur du champ reCaptcha du formulaire et les clés recaptcha comme données POST.
  5. Traiter la réponse de Google.

Bien que cela puisse être fait manuellement, nous utiliserons une bibliothèque tierce car cela rend le processus beaucoup plus rapide et plus simple. Faisons maintenant un exemple de formulaire de contact où nous intégrerons le reCaptcha

Lancer le projet Django :

Assurez-vous que vous avez terminé l’installation de Django.

  • Créez un nouveau projet Django :
django-admin startproject dj_recaptcha
  • Créez une nouvelle application dites « contact » :
cd dj_recaptcha
python manage.py startapp contact
  • Accédez à dj_recaptcha/settings.py ajoutez l’application de contact.
INSTALLED_APPS = [
    ...
    'contact',
    ...
]

Inscription à la console d’administration Google reCAPTCHA :

Vous devez d’abord enregistrer votre site sur le console d’administration reCaptcha. Dans la section des domaines, ajoutez 127.0.0.1 puisque nous le testons localement. Plus tard, vous pourrez ajouter votre URL de production.

recaptchaadminconsole

console d’administration recaptcha

Vous pouvez spécifier le type de reCaptcha que vous voulez, ici nous avons sélectionné v2 avec ” Case à cocher Je ne suis pas un robot ” . Vous obtiendrez les clés API lors de la soumission du formulaire.

recaptchakeys

clés api recaptcha

Copiez la clé du site et la clé secrète dans settings.py comme suit :

RECAPTCHA_PUBLIC_KEY = Your_Site_Key
RECAPTCHA_PRIVATE_KEY = Your_Secret_key

Comme mentionné précédemment, nous utiliserons une bibliothèque tierce appelée django-recaptcha pour simplifier le processus pour nous. Installons-le maintenant en utilisant pip, entrez la commande suivante.

pip install django-recaptcha

Ajoutez l’application à la liste INSTALLED_APPS dans settings.py

INSTALLED_APPS = [
    ...
    'contact',
    'captcha',
    ...
]

Passons maintenant à la création d’un formulaire de contact dans forms.py avec e-mail, commentaires et captcha comme champs.

Python3

 

from django import forms

from captcha.fields import ReCaptchaField

from captcha.widgets import ReCaptchaV2Checkbox

 

 

class ContactForm(forms.Form):

    email = forms.EmailField()

    feedback = forms.CharField(widget=forms.Textarea)

    captcha = ReCaptchaField(widget=ReCaptchaV2Checkbox)

Le champ captcha sera rendu comme un champ de case à cocher. Si vous avez spécifié un type différent de la case à cocher v2 lors de l’enregistrement du site sur la console d’administration recaptcha, vous devez modifier l’attribut widget de ReCaptchaField ci-dessus. Si vous ne spécifiez pas un ReCaptchaV2Checkbox sera par défaut Il y a trois widgets qui peuvent être utilisés avec la classe ReCaptchaField :

ReCaptchaV2Checkbox pour Google reCAPTCHA V2 – Case à cocher

ReCaptchaV2Invisible pour Google reCAPTCHA V2 – Invisible

ReCaptchaV3 pour Google reCAPTCHA V3

Faites un modèle HTML dire contact.html pour afficher le formulaire. Nous utiliserons le style par défaut avec {{ form.as_p }}. Si vous voulez styliser manuellement un formulaire Django, essayez utiliser les ajustements de widget.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Contact</title>

</head>

<body>

    <h2>Contact Form</h2>

    <form method="post">

        {% csrf_token %}

        {{ form.as_p }}

        <button type="submit">Submit</button>

    </form>

</body>

</html>

Créez maintenant une vue pour gérer la soumission du formulaire dans views.py.

Python3

from django.shortcuts import render, HttpResponse

from .forms import ContactForm

 

def contact(request):

    if request.method == 'POST':

        form = ContactForm(request.POST)

         

        if form.is_valid():

            return HttpResponse("Yay! you are human.")

        else:

            return HttpResponse("OOPS! Bot suspected.")

           

    else:

        form = ContactForm()

         

    return render(request, 'contact.html', {'form':form})

Mappez la vue à une URL. Ici, nous rendons le formulaire sur la page d’accueil, ajoutons donc le mappage d’URL pour le même.

Python3

from django.contrib import admin

from django.urls import path

from contact import views

 

urlpatterns = [

    path('',views.contact, name="index"),

    path('admin/', admin.site.urls),

]

Nous avons pratiquement terminé, testons-le en exécutant le serveur et en ouvrant 127.0.0.1:8000 dans le navigateur.

python manage.py runserver
djrecaptchademo

démo recaptcha

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut