Este tutorial explica cómo integrar el sistema reCaptcha de Google en su sitio Django. Para crear un formulario en Django, puede consultar: ¿Cómo crear un formulario usando Django Forms?
Empezando
Agregar reCaptcha a cualquier formulario HTML implica los siguientes pasos:
- Registre el dominio de su sitio en la Consola de administración de reCaptcha.
- Agregue claves de recaptcha a la configuración del proyecto.
- Agregue secuencias de comandos reCaptcha y elementos de entrada a la plantilla HTML.
- Al enviar el formulario, realice una solicitud de publicación a la API de google reCaptcha en el backend con el valor del campo reCaptcha del formulario y las claves de recaptcha como datos POST.
- Procesa la respuesta de Google.
Si bien esto se puede hacer manualmente, usaremos una biblioteca de terceros, ya que hace que el proceso sea mucho más rápido y simple. Ahora hagamos un formulario de contacto de muestra donde integraremos el reCaptcha
Inicie el proyecto Django:
Asegúrese de haber terminado con la instalación de django.
- Crea un nuevo proyecto Django:
django-admin startproject dj_recaptcha
- Crear una nueva aplicación decir «contacto»:
cd dj_recaptcha python manage.py startapp contact
- Vaya a dj_recaptcha/settings.py y agregue la aplicación de contacto.
INSTALLED_APPS = [
...
'contact',
...
]
Registrarse en la consola de administración de Google reCAPTCHA:
Primero debe registrar su sitio en la consola de administración de reCaptcha . En la sección de dominios agregue 127.0.0.1 ya que lo estamos probando localmente. Más tarde, puede agregar su URL de producción.
consola de administración de recaptcha
Puede especificar el tipo de reCaptcha que desee, aquí hemos seleccionado v2 con la casilla » No soy un robot «. Obtendrá las claves API al enviar el formulario.
Claves API de recaptcha
Copie la clave del sitio y la clave secreta en settings.py de la siguiente manera:
RECAPTCHA_PUBLIC_KEY = Your_Site_Key RECAPTCHA_PRIVATE_KEY = Your_Secret_key
Como se mencionó anteriormente, usaremos una biblioteca de terceros llamada django-recaptcha para simplificar el proceso. Instalémoslo ahora usando pip, ingrese el siguiente comando.
pip install django-recaptcha
Agregue la aplicación a la lista INSTALLED_APPS en settings.py
INSTALLED_APPS = [
...
'contact',
'captcha',
...
]
Ahora pasemos a crear un formulario de contacto en forms.py con correo electrónico, comentarios y captcha como campos.
Python3
# forms.py 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)
El campo captcha se representará como un campo de casilla de verificación. Si especificó un tipo diferente a la casilla de verificación v2 al registrar el sitio en la consola de administración de recaptcha, debe cambiar el atributo de widget de ReCaptchaField anterior. Si no especifica uno, ReCaptchaV2Checkbox será el predeterminado. Hay tres widgets que se pueden usar con la clase ReCaptchaField:
ReCaptchaV2Checkbox para Google reCAPTCHA V2 – Casilla de verificación
ReCaptchaV2Invisible para Google reCAPTCHA V2 – Invisible
ReCaptchaV3 para Google reCAPTCHA V3
Haga que una plantilla HTML diga contact.html para representar el formulario. Usaremos el estilo predeterminado con {{ form.as_p }}. Si desea diseñar manualmente un formulario Django, intente usar ajustes de widgets .
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>
Ahora cree una vista para manejar el envío del formulario en views.py.
Python3
# views.py
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})
Asigne la vista a una URL. Aquí estamos representando el formulario en la página de inicio, así que agreguemos el mapeo de URL para el mismo.
Python3
# urls.py
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),
]
Casi hemos terminado, probemos ejecutando el servidor y abramos 127.0.0.1:8000 en el navegador.
python manage.py runserver
demostración recaptcha
Publicación traducida automáticamente
Artículo escrito por pansaripulkit13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA