Automated bots creating fake accounts are a persistent problem targeting any user self-registration systems and django-allauth is no exception. The most common approach to discourage these bots is to incorporate a captcha<\/a> on your signup page that adds a layer of validation, with Google's ReCaptcha<\/a> being the industry-standard implementation. Integrating recaptcha into django-allauth can be tricky so in this post I'll cover the steps to add a captcha to the django-auth signup page.<\/p>\n Main software and versions used:<\/p>\n The first step is to register your site in Google's ReCaptcha service<\/a>. You'll have the option to register for either V2 or V3 of recaptcha. V2 is the familiar 'select all traffic signals' type of challenges that we've all seen before, V3 is Google's newer style that doesn't interact directly with the user and instead operates in the background and provides a confidence score that you can use to filter out likely bots. For this post we will be using V2 with the 'I am not a robot' option.<\/p>\n Assuming you already have django-allauth installed, you will need to install django-recaptcha using you're preferred method (pip or in your IDE).<\/p>\n settings.py<\/b> forms.py<\/b> Using the above method as-is will result in the captcha field showing up in the middle of the form which doesn't look right. One way around this is to override the default django-allauth signup page and then list each field in the desired order. Below are the changes that need to be made to implement this.<\/p>\n yourapp\/account_signup.html<\/b> views.py<\/b> urls.py<\/b> This example covered adding a V2 recaptcha to the django-allauth signup page to hamper the ability of bots to create fake users in your system. Using it as a reference you should be able to add the captcha to other pages with relative ease as you see fit. Keep in mind changing to use a V3 recaptcha or using other V2 modes will require adjustments to the instructions above. Good luck and happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Automated bots creating fake accounts are a persistent problem targeting any user self-registration systems and django-allauth is no exception. The most common approach to discourage these bots is to incorporate a captcha on your signup page that adds a layer of validation, with Google's ReCaptcha being the industry-standard implementation. Integrating recaptcha into django-allauth can be tricky so in this post I'll cover the steps to add a captcha to the django-auth signup page. [Continue reading...] Integrating ReCaptcha With Django-AllAuth<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":761,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79,23],"tags":[80,81,82,84],"_links":{"self":[{"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/posts\/730"}],"collection":[{"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":30,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions\/762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/media\/761"}],"wp:attachment":[{"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bhoey.com\/blog\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Software Versions<\/h3>\n
\n
Obtain Google ReCaptcha Keys<\/h3>\n
![\"Google](\"http:\/\/bhoey.com\/blog\/wp-content\/uploads\/2020\/06\/google-recaptcha-e1591585056621-300x193.png\")
<\/a><\/h3>\nInstall django-recaptcha<\/h3>\n
Code Changes<\/h3>\n
\nWe add the recaptcha keys provided when registering the site to the app's settings.py file. Additionally we redirect the signup form class to a custom one that will include an addition field of type ReCaptchaField.<\/p>\nACCOUNT_SIGNUP_FORM_CLASS = 'yourapp.forms.MyCustomSignupForm'\nRECAPTCHA_PUBLIC_KEY = '<your recaptcha site key>'\nRECAPTCHA_PRIVATE_KEY = '<your recaptcha secret ke>'\n<\/pre>\n
\nAnd here is that custom form, the widget and related attrs parameter are the default values, but they've been added here in case you'd like to change them.<\/p>\nfrom captcha.fields import ReCaptchaField\nfrom captcha.widgets import ReCaptchaV2Checkbox\n\n...\n\nclass MyCustomSignupForm(forms.Form):\n\n captcha = ReCaptchaField(\n widget=ReCaptchaV2Checkbox(\n attrs={\n 'data-theme': 'light', # default=light\n 'data-size': 'normal', # default=normal\n },\n ),\n )\n\n def signup(self, request, user):\n \"\"\" This function is required otherwise you will get an ImproperlyConfigured exception \"\"\"\n pass\n\n<\/pre>\nOptional: Cleaning Up Form Display<\/h3>\n
\nThis is the form that will override the default allauth signup template. Note: I've only included the form section here, it is assumed this file would have your normal template structure.<\/p>\n...\n\n<form class=\"signup\" id=\"signup_form\" method=\"post\" action=\"\/accounts\/signup\/\">\n\n {% csrf_token %}\n\n <div class=\"form-group\">\n {{ form.email.errors }}\n {{ form.email }}\n <\/div>\n <div class=\"form-group\">\n {{ form.username.errors }}\n {{ form.username }}\n <\/div>\n <div class=\"form-group\">\n {{ form.password1.errors }}\n {{ form.password1 }}\n <\/div>\n <div class=\"form-group\">\n {{ form.password2.errors }}\n {{ form.password2 }}\n <\/div>\n <div class=\"form-group\">\n {{ form.captcha.errors }}\n {{ form.captcha }}\n <\/div>\n\n <button type=\"submit\">Sign Up<\/button>\n\n<\/form>\n\n...\n\n<\/pre>\n
\nBelow is a small class-based view to repoint the template to use for signups. It should be noted that you can also override default django-allauth pages by putting them in a particular directory structure under your project. However I prefer to make this explicit so as to not trip up someone reading it down the road who is unaware or forgets this mechanism (myself included!)<\/p>\nfrom allauth.account.views import SignupView\n\n...\n\nclass MySignupView(SignupView):\n template_name = 'yourapp\/account_signup.html'\n\n<\/pre>\n
\nFinally point the \/accounts\/signup to our custom view and template. The key thing to remember here is that this needs to be added above where allauth urls are included.<\/p>\nurl(r'^accounts\/signup\/', v.MySignupView.as_view(), name='account_signup'),\n<\/pre>\n
Final Thoughts<\/h3>\n