Integrating hCaptcha with Django-allauth

We may face issues when someone uses bots to abuse our system and send automated signup/password reset to random people. So hCaptcha is a really good way to avoid bots.

Setting Up hCaptcha account

• First we need new hCaptcha account. If you don’t have an account, then create one at https://dashboard.hcaptcha.com/signup.
• After that you need to go on your hCaptcha dashboard’s sites page at https://dashboard.hcaptcha.com/sites.
• Then create a new site, you can name it anything you want. After that click on the settings icon next to the site you created. You will see a site key. Copy it and keep it someone.
• Go to your account settings at https://dashboard.hcaptcha.com/settings and then copy and keep the secret key.

Installing hCaptcha

We will be using django-hCaptcha package from pypi.

• Install it using the following command

pip <span>install </span>django-hCaptcha
pip <span>install </span>django-hCaptcha
pip install django-hCaptcha

Enter fullscreen mode Exit fullscreen mode

• Add “hcaptcha” to your INSTALLED_APPS setting like this:

<span># project/settings.py </span>
<span>INSTALLED_APPS</span> <span>=</span> <span>[</span>
    <span>...</span>
    <span>'hcaptcha'</span><span>,</span>
<span>]</span>
<span># project/settings.py </span>
<span>INSTALLED_APPS</span> <span>=</span> <span>[</span>
    <span>...</span>
    <span>'hcaptcha'</span><span>,</span>
<span>]</span>
# project/settings.py 
INSTALLED_APPS = [
    ...
    'hcaptcha',
]

Enter fullscreen mode Exit fullscreen mode

• Addsitekey and secret key which we kept earlier to your settings.py file

<span># project/settings.py </span>
<span>...</span>
<span>HCAPTCHA_SITEKEY</span> <span>=</span> <span>'<your sitekey>'</span>
<span>HCAPTCHA_SECRET</span> <span>=</span> <span>'<your secret key>'</span>
<span>...</span>
<span># project/settings.py </span>
<span>...</span>
<span>HCAPTCHA_SITEKEY</span> <span>=</span> <span>'<your sitekey>'</span>
<span>HCAPTCHA_SECRET</span> <span>=</span> <span>'<your secret key>'</span>
<span>...</span>
# project/settings.py 
...
HCAPTCHA_SITEKEY = '<your sitekey>'
HCAPTCHA_SECRET = '<your secret key>'
...

Enter fullscreen mode Exit fullscreen mode

Add hCaptcha to forms

• Extend default allauth forms I referred to this article by geeksforgeeks for the same: https://www.geeksforgeeks.org/python-extending-and-customizing-django-allauth/
  • Make forms.py file in any django app folder

<span># app/forms.py </span>
<span>from</span> <span>allauth.account.forms</span> <span>import</span> <span>SignupForm</span><span>,</span> <span>ResetPasswordForm</span>
<span>from</span> <span>hcaptcha.fields</span> <span>import</span> <span>hCaptchaField</span>
<span>class</span> <span>CustomSignupForm</span><span>(</span><span>SignupForm</span><span>):</span>
    <span>hcaptcha</span> <span>=</span> <span>hCaptchaField</span><span>(</span><span>theme</span><span>=</span><span>'dark'</span><span>)</span>
    <span># if the order of fields isn't as you expected ,then you can use field_order </span>    <span>#field_order = ['username', 'email', 'password1', 'password2', 'hcaptcha'] </span>    <span>#customize this according to your form </span>
<span>class</span> <span>CustomForgetPassword</span><span>(</span><span>ResetPasswordForm</span><span>):</span>
    <span>hcaptcha</span> <span>=</span> <span>hCaptchaField</span><span>(</span><span>theme</span><span>=</span><span>'dark'</span><span>)</span>
<span># app/forms.py </span>
<span>from</span> <span>allauth.account.forms</span> <span>import</span> <span>SignupForm</span><span>,</span> <span>ResetPasswordForm</span>
<span>from</span> <span>hcaptcha.fields</span> <span>import</span> <span>hCaptchaField</span>


<span>class</span> <span>CustomSignupForm</span><span>(</span><span>SignupForm</span><span>):</span>
    <span>hcaptcha</span> <span>=</span> <span>hCaptchaField</span><span>(</span><span>theme</span><span>=</span><span>'dark'</span><span>)</span>
    <span># if the order of fields isn't as you expected ,then you can use field_order </span>    <span>#field_order = ['username', 'email', 'password1', 'password2', 'hcaptcha'] </span>    <span>#customize this according to your form </span>
<span>class</span> <span>CustomForgetPassword</span><span>(</span><span>ResetPasswordForm</span><span>):</span>
    <span>hcaptcha</span> <span>=</span> <span>hCaptchaField</span><span>(</span><span>theme</span><span>=</span><span>'dark'</span><span>)</span>
# app/forms.py 
from allauth.account.forms import SignupForm, ResetPasswordForm
from hcaptcha.fields import hCaptchaField


class CustomSignupForm(SignupForm):
    hcaptcha = hCaptchaField(theme='dark')
    # if the order of fields isn't as you expected ,then you can use field_order     #field_order = ['username', 'email', 'password1', 'password2', 'hcaptcha']     #customize this according to your form 
class CustomForgetPassword(ResetPasswordForm):
    hcaptcha = hCaptchaField(theme='dark')

Enter fullscreen mode Exit fullscreen mode

• Make these as the default forms by declaring them in settings.py file

<span># project/settings.py </span><span>...</span>
<span>ACCOUNT_FORMS</span> <span>=</span> <span>{</span>
    <span>'signup'</span><span>:</span> <span>'<app>.forms.MyCustomSignupForm'</span><span>,</span>
    <span>'reset_password'</span><span>:</span> <span>'<app>.forms.CustomForgetPassword'</span><span>,}</span>
<span>...</span>
<span># project/settings.py </span><span>...</span>
<span>ACCOUNT_FORMS</span> <span>=</span> <span>{</span>
    <span>'signup'</span><span>:</span> <span>'<app>.forms.MyCustomSignupForm'</span><span>,</span>
    <span>'reset_password'</span><span>:</span> <span>'<app>.forms.CustomForgetPassword'</span><span>,}</span>
<span>...</span>
# project/settings.py ...
ACCOUNT_FORMS = {
    'signup': '<app>.forms.MyCustomSignupForm',
    'reset_password': '<app>.forms.CustomForgetPassword',}
...

Enter fullscreen mode Exit fullscreen mode

All Done

Congrats

原文链接：Integrating hCaptcha with Django-allauth