Google Authentication in Django The Simplest way

Hi guys this time lets see how we can add google authentication to our django webapp

1. Setting up the django project



django-admin startproject GoogleAuthentication

here we are creating a django project called GoogleAuthentication the name of project can be any thing literally.

2. Installing the django-allauth package

now let's install the required packages needed for adding google authentication to our web application



pip install django-allauth

3. Adding Authentication Backends in settings.py

you need to specify AUTHENTICATION_BACKENDS propery in your settings.py



# settings.py

# all the below property in your settings.py file for django allauth to work
AUTHENTICATION_BACKENDS = [
    # django's inbuild authentication backend
    'django.contrib.auth.backends.ModelBackend',

    # django's allauth authentication backend
    'allauth.account.auth_backends.AuthenticationBackend',
]

4. Adding the required Apps in settings.py

you need to add the following apps to your settings.py note that you need to add django.contrib.sites to INSTALLED_APPS if it is not present



# settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',

    'django.contrib.sites', # <-- add the sites app here

    # apps needed for django all auth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',

    # add the below app for google authentication to work
    'allauth.socialaccount.providers.google',



    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

5. Adding allauth urls to the main urls.py

include the django's allauth urls into our project using the code snippet below



# main urls.py file

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')), #  <- include the allauth urls here
]

6. Run the migrations

to run the migrations use the below two commands



python manage.py makemigrations



python manage.py migrate

7. Create a superuser

to create a super user use the following command



python manage.py createsuperuser

output



Username (leave blank to use 'rohit'): admin
Email address: admin@admin.com
Password: 
Password (again): 
Superuser created successfully.

8. Create Google client-id and secret

now visit google developer dashboard by visiting the following link : google api console

now in the search bar search for Gmail and under Market Place select the Gmail API

now enable the Gmail API on clicking the Enable button

now visit the credentials page and click on " + CREATE CREDENTIALS " button and click on "OAuth Client ID"

now select the application type as Web as shown below

now name the application what ever you want i am naming it as Django Google Auth but the main thing we need to keep in mind is the redirect url and javascript origin



# add the following to redirect urls

http://127.0.0.1:8000/accounts/google/login/callback/
http://localhost:8000/accounts/google/login/callback/



# add the following to javascript origins

http://127.0.0.1:8000
http://localhost:8000

after adding the above urls click on create button

copy the client id and secret which appear on the screen

9. Configure the client id and secret

in the settings.py add the following line of code



# settings.py

SITE_ID = 1

now login to the django admin page and edit the site example.com to localhost

now go to Social Applications and add the google client id and secret there

you can see above how we have added the cliend id and secret and also dont forget to add localhost to chossen sites

on visiting : http://127.0.0.1:8000/accounts/login/

you can see a link for login with google now you can login using google clicking on the link

LOGIN PAGE

GOOGLE AUTH

you can create custom login page using the below code snippet



<html>
<head>
  <!--Dont forget to replace with client id below-->
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

Blog