如何将 Google reCAPTCHA 添加到 Django 表单？

本教程介绍如何将 Google 的 reCaptcha 系统集成到您的 Django 站点。要在 Django 中创建表单，您可以查看 – 如何使用 Django 表单创建表单？

入门

将 reCaptcha 添加到任何 HTML 表单涉及以下步骤：

1. 将您的站点域注册到 reCaptcha 管理控制台。
2. 将recaptcha 密钥添加到项目设置中。
3. 将 reCaptcha 脚本和输入元素添加到 HTML 模板。
4. 在提交表单时，使用表单的 reCaptcha 字段值和 recaptcha 键作为 POST 数据向后端的 google reCaptcha API 发出 post 请求。
5. 处理来自 Google 的响应。

虽然这可以手动完成，但我们将使用第三方库，因为它使过程更快、更简单。现在让我们制作一个示例联系表，我们将在其中集成 reCaptcha

启动 Django 项目：

确保您已完成 django 安装。

• 创建一个新的 Django 项目：

django-admin startproject dj_recaptcha

• 创建一个新的应用程序说“联系”：

cd dj_recaptcha
python manage.py startapp contact

• 转到 dj_recaptcha/settings.py 添加联系人应用程序。

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

注册到 Google reCAPTCHA 管理控制台：

首先，您需要在 reCaptcha 管理控制台上注册您的站点。在域部分添加 127.0.0.1，因为我们正在本地测试它。稍后，您可以添加生产 URL。

重新验证管理控制台

您可以指定您想要的任何 reCaptcha 类型，这里我们选择了带有“我不是机器人复选框”的 v2。您将在提交表单时获得 API 密钥。

重新验证 API 密钥

将站点密钥和秘密密钥复制到 settings.py 中，如下所示：

RECAPTCHA_PUBLIC_KEY = Your_Site_Key
RECAPTCHA_PRIVATE_KEY = Your_Secret_key

如前所述，我们将使用名为 django-recaptcha 的第三方库来简化我们的过程。让我们现在使用 pip 安装它，输入以下命令。

pip install django-recaptcha

将应用程序添加到 settings.py 中的 INSTALLED_APPS 列表

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

现在让我们继续在 forms.py 中创建一个联系表单，其中包含电子邮件、反馈和验证码作为字段。

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)

验证码字段将呈现为复选框字段。如果您在 recaptcha 管理控制台上注册站点时指定了与 v2 复选框不同的类型，则需要更改上述 ReCaptchaField 的小部件属性。如果您不指定一个 ReCaptchaV2Checkbox 将是默认的 ReCaptchaField 类可以使用三个小部件：

ReCaptchaV2Checkbox for Google reCAPTCHA V2 – Checkbox

ReCaptchaV2Invisible for Google reCAPTCHA V2 – Invisible

ReCaptchaV3 for Google reCAPTCHA V3

制作一个 HTML 模板，比如 contact.html 来呈现表单。我们将使用带有 {{ form.as_p }} 的默认样式。如果您想手动设置 Django 表单的样式，请尝试使用小部件调整。

HTML

    


    
Contact Form
    

        {% csrf_token %}
        {{ form.as_p }}
        Submit
    

现在创建一个视图来处理 views.py 中的表单提交。

蟒蛇3

# 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})

将视图映射到 URL。在这里，我们在主页上呈现表单，因此让我们为其添加 URL 映射。

蟒蛇3

# 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),
]

我们差不多完成了，让我们通过运行服务器并在浏览器中打开 127.0.0.1:8000 来测试它。

python manage.py runserver

验证码演示