Django Google Recaptcha V3 Example

Published On: 20/07/2022 | Category: Django Python


Hi Dev,

Now, let's see example of django google recaptcha v3. This article will give you simple example of django python google recaptcha v3 example. you'll learn how to use google recaptcha v3 in django. I explained simply step by step recaptcha v3 in django.

Google ReCaptcha V3 is a captcha like system, that provide security against hackers and sticks or curl requests. It assures that a computer user is a human. It is the best and most used captcha system available where users are only required to click on a checkbox and in some cases select some similar images related to conman question.

In this example, we will create simple registration form and implement google captcha code. before use google captcha code we will install "josiasmontag/laravel-recaptchav3" composer package for google captcha. You have to just follow few step and you will get google re-captcha code in your laravel 8 app.

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example
Step 2 : Create a App
python3 manage.py startapp recaptcha
Step 3 : Update setting.py

In this step we require to do add installed apps in our settings.py file. Add the below lines to your settings.py file:

Next, you need to add it in the settings.py file as follows:

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'recaptcha',
]
Step 4: Create Google API Key

In this step we need to set google site key and secret key. If you don't have site key and secret key then you can create from here. First click on this link : Recaptcha Admin

Now you have to create new key for google recaptchav3 as bellow screen shot:

Add your localhost domain (i.e. 127.0.0.1) if you are still in the development process.

Next you can get account key id and secret and add on settings.py file as like bellow:

setting.py
RAZORPAY_KEY_ID = YOUR_KEY_ID
...

# SECURITY WARNING: keep the secret key used in production secret!
...
GOOGLE_RECAPTCHA_SITE_KEY = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' #your reCAPTCHA SITE key 

GOOGLE_RECAPTCHA_SECRET_KEY = 'SSSSSSSSSSSSSSSSSSSSSSSSSSS' #your reCAPTCHA SECRET key 

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

...
Step 5: Create a FormClass

In this step we will require the create a formclass for some adding bootstrap class and add button.Open the recaptcha/forms.py file and add the following code:

recaptcha/forms.py
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(
        widget=forms.TextInput(
            attrs={
                "placeholder": "Name",
                "class": "form-control"
            }
        ))
    email = forms.EmailField(
        widget=forms.EmailInput(
            attrs={
                "placeholder": "Email",
                "class": "form-control"
            }
        ))
    number = forms.IntegerField(
        widget=forms.TextInput(
            attrs={
                "placeholder": "Phone Number",
                "class": "form-control"
            }
        ))

After creating these model, you need to create migrations using the following command:

Step 6 : Creating the Views

In this step, we need to create the views for rendering the templates and some logic.Open the recaptcha/views.py file and add:

recaptcha/views.py
from django.shortcuts import render
from .forms import ContactForm
from django.conf import settings

# Create your views here.

def contact(request):

  form = ContactForm()
  return render(request, "contact.html", {'form':form, 'recaptcha_site_key':settings.GOOGLE_RECAPTCHA_SITE_KEY})
Step 7 : Creating the Templates

Next, open the recaptcha/templates/contact.html file and the add:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Google Recaptcha V3 Example - Tuts-Station.com</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src='https://www.google.com/recaptcha/api.js?render={{recaptcha_site_key}}'></script>
</head>
<body>
    <div class="container mt-5 pt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4>Django Google Recaptcha V3 Example - Tuts-Station.com</h4>
                    </div>
                    <div class="card-body">
                        <form method="post" id="contactform">
                            {% csrf_token %}
                            {{form.as_p}}
                            <!-- reCAPTCHA input -->
                            <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"> 
                            <button type="submit" class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    //global grecaptcha
    grecaptcha.ready(function() {
        grecaptcha.execute('{{recaptcha_site_key}}', {action: "/contact/"}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
  </script>
</html>
Step 8 : Creating URLs

In this section, we’ll create the urls to access our views.Go to the urls.py recaptcha/urls.py file and update it as follows:

recaptcha/urls.py
from django.urls import path
from .views import contact

urlpatterns = [
    path('contact/', contact, name="contact"),
]

Next, we will require the modify the urls.py your root preoject folder lets update the file.

example/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('core.urls')),
]
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python manage.py runserver

Next, go to the http://localhost:8000/contact/ address with a web browser.

I Hope It will help you....