Django Google Recaptcha V3 Example
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 ProjectIn 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 exampleStep 2 : Create a App
python3 manage.py startapp recaptchaStep 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.pyRAZORPAY_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.pyfrom 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 ViewsIn 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.pyfrom 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.pyfrom 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.pyfrom 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....