Allauth allows you to enhance the functionality of your Django project by allowing access control as well as authentication services. It’s a security framework that performs authentication using Django accounts and OAuth2 authorization. In this blog, we will go through how to begin the process of building a social login with Django and google which will allow users to sign up and log in to your site using their existing google email and password and complete the Django-allauth tutorial.
Here are the steps we have to follow:
1. Create a new Django project for Django-allauth Tutorial.
2. Install and configure Django allauth
3. Configure settings.py
4. Migrate and make superuser – check database
5. Home template and URLs
6. Create a Google account – configure the new application and acquire API keys
7. Create a Social account in the admin
8. Test login
Step 1: Create a new Django project
For the integration of allauth in Django, let’s first create a simple Django app you first Create a directory named anything you want I created a folder named allauth then open a terminal in the same folder and create a new Django app for that use the following command in your command prompt.
1. For starting a new project Django-allauth Tutorial
Django-admin startproject newproject3. Go into the project folder
cd translation_example3. Starting the new app in the project
django-admin startapp blogappStep 2: Install and configure Django allauth
Before configuring use the following command to install the allauth
Pip install Django-allauthStep 3: Configure settings.py
Let’s add the app that we created and allauth in the settings.py file
#INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'blogapp',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
]Here we added the last 5 lines in the installed apps first is blogapp, the second is allauth, and allauth.account, third allauth.socialaccount, and in the last we added google as a provider because we are using google for the authentication function you can add any other line Facebook, GitHub, Dropbox, etc.
Next, we added a new section authentication backend just below the templates here we declare what backend we wanted to authenticate and added allauth and we also want to use the default Django admin backend so we added that also
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
]And in the last add the following code just below the static URL
STATIC_URL = 'static/'
SITE_ID = 2
LOGIN_REDIRECT_URL = '/'
SOCIALACCOUNT_PROVIDERS = {
'google': {
'SCOPE': [
'profile',
'email',
],
'AUTH_PARAMS': {
'access_type': 'online',
}
}
}Step 4: Migrate and make superuser – check database
To migrate run the following command
py manage.py migrateTo create the superuser run the following command, after running the command it will ask you to add ID, password, and email enter that and it’s done.
py manage.py createsuperuserrun the app by using the following command
py manage.py runserverNow login into the app by going to http://127.0.0.1:8000/admin then go to the site’s section you will find that example.com is already has been created you have to create another site using the following name 127.0.0.1:8000
Step 5 – Home template and URLs
Create a new folder named with templates than in this folder create a folder named blogapp then in the blogapp folder create a new file called index.html, now copy-paste the following code in the index.html file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container text-dark mt-5">
<div class="row justify-content-md-center">
<div class="col-md-5 p-3">
<h1>Django - allauth</h1>
{% if user.is_authenticated %}
<p>Welcome, {{ user.username }} !</p>
{% else %}
<h1>Welcome Friend, please log in</h1>
{% endif %}
</div>
</div>
</div>
</body>
</html>Now go to the url.py file and add the following code, here we configured the path for the template and the accounts
from django.contrib import admin
from django.urls import path, include
# importing the template view because we are just going to run the index page from the template view
from django.views.generic import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name="blogapp/index.html")),
path('admin/', admin.site.urls),
path('accounts/', include('allauth.urls')),
]Next, we have to configure the temple in the settings.py
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'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',
],
},
},
]And now we can save all files, start the server and go to the home page and check the template
If you go to the account page (go to the following link to go to accounts page http://127.0.0.1:8000/accounts/ ) you can see some prebuild URLs that allauth is created and you can check these links
Go to the http://127.0.0.1:8000/accounts/login/ this link and you can see that, sign-in with google is present but it’s giving us an error, in the next step we will configure that
Step 6 – Create a Google account – configure the new application and acquire API keys
Go to the following link and log in with your Google account
Next Select create a new project then add the name of the project and create
Go to credentials then press on configuring consent screen and add the given details you want to add it’s not important to fill in all details.
Now go to credentials press on create credentials and then press on the OAuth client ID
Then fill up the details as given below in the picture and press create after that you will receive your client ID and Your client Secret, save that
Step 7 – Create a Social account in the admin
Let’s start by running the server then logging into your admin account next go to the social application and fill up the detail it will ask you for the client id and sacred key, copy-paste that from the google cloud platform and press save.
Note: don’t forget to transfer the sites to the other side
Step 8 – Test login
Go to http://127.0.0.1:8000/accounts/logout this link and logout then go to this link http://127.0.0.1:8000/accounts/loging and press on login with google then this page will open
That’s it congratulation your application is working successfully
Final Words
The Django authentication system has many features and options, but it can be difficult to decide which features are necessary for your application and which ones you can live without. Django’s allauth library is flexible and easy enough that it is easy to implement a custom authentication flow for your application, in Django-allauth Tutorial we added login from google but you can use any other service live Facebook, Github, Dropbox, and so on and the process is quite same.
