There are many websites which offer login using google instead of forcing you to create a new account over there website. You must also want to implement the same feature like that in your website so, you are at the right place. In this blog we will learn how to add Gmail Log-In in your Django website, it will become just a piece of cake for you once you learn how to do it. We will be using the django-allauth library for implementing the google authentication system in our project, with the help of this tool not only google but Facebook , Github and many more other authentications available in its library can be implemented. Isn’t it wonderful? so, let’s have a sneak peek into it first.
What is django-allauth ?
Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication. User registration and authentication is one of the most essential components of a web application.
Implementation
Step 1. Create Django Project
We are first going to create a django project, an app inside that project and then going to install django-allauth, which will play a major role in providing gmail authentication.
1. Create a Django project.
django-admin startproject blog13
2. Create an app in that django-project.
python manage.py startapp user
3. Install django-allauth.
pip install django-allauth
4. Add your app names in installed apps.
Settings.py
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django.contrib.sites', 'allauth', 'user', 'allauth.account', 'allauth.socialaccount', 'allauth.socialaccount.providers.google', ]
5. Add authentication backends and SITE_ID in settings.py file of project folder.
Settings.py
AUTHENTICATION_BACKENDS = [ 'django.contrib.auth.backends.ModelBackend', 'allauth.account.auth_backends.AuthenticationBackend', ] SITE_ID=1
6. Migrate the model by running the following command
python manage.py migrate
7. Add allauth urls in the blog13 > urls.py.
Urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('allauth.urls')),
]
Step 2. Add files and Folder to the Django Project
We need to create a template folder in the django folder and a urls.py file in the app folder.
- Create a new folder in the django folder(here, blog13 folder) save it with the name template.
2. Add the path for this template folder in blog13 > settings.py .
Settings.py
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'template')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Create a new file in the app folder(here, user) save it with the name urls.py .
4. Add path for this url.py file in blog13 > urls.py .
Urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('user.urls')),
path('accounts/', include('allauth.urls')),
]
Step3. Create HTML document for view
- Create an html file in template>index.html .
Index.html
{% load socialaccount %}
{% providers_media_js %}
<html>
<head>
<title>Index</title>
</head>
<body>
<button style="font-size: 25px; padding:5px; background-color:red;"><a href="{% provider_login_url "google" %}" style="text-decoration:None; color:#fff;">Google Login</a></button>
</body>
</html>
2. Create a path for the index html page in user > urls.py .
Urls.py
from django.urls import path,include
from . import views
urlpatterns = [
path('', views.index,name="index"),
]
3. Create a function for the index page in user > views.py .
Views.py
from django.shortcuts import render def index(request): return render(request,'index.html')
Step4. Django Gmail Log-In
- Create a new OAuth Application by following the given steps so that you can get your client id and secret key which we will be needing in later steps .
2. Create a new project.
3.Create a new Credentials
4. Copy the client id and secret key and save it somewhere to use it later.
2. Create a super user by running the following command
python manage.py createsuperuser
Add the credentials according to you
3. Login to your website admin panel by following the given steps
4. Create a social application, add the provider, client id and secret key that we had created in step 1, choose the site or you can create your own( but it should be valid) and save.
5. Log out from the admin panel.
6. Now Run the server by typing the following command
python manage.py runserver
7. You can see that after clicking on google login button we will be redirecting to our gmail accounts.
Conclusion :-
So, we had learned how to Add Gmail Log-In in Django. I hope this blog will be useful for you and helps you to understand each and every step. Hope all your doubts get cleared. Thank you.
