A Guide to Using Social Login with Django - HashedIn Technologies

A Guide to Using Social Login with Django

Technology - 29 May 2017
Sripathi Krishnan

In this blog post, we will implement social login in a Django application by using Social auth app django which seems to be the best alternative of the deprecated library python social auth

What is Social-Auth-App-Django?

Social auth app django is an open sourced python module available on PyPI. It is maintained under the Python Social Auth organization. Initially, they started with a universal python module called Python social auth which could be used in any Python based web framework. Now they have deprecated this library.

Going further, they split the code base into several modules in order to provide better support for python web frameworks. The core logic of social authentication resides in the social core module which is then used in other modules like – social auth app djangosocial app flask, etc.

Installation Process

Let’s create an app called authentication. This app will contain all the views/urls related to Django social authentication.

python manage.py startapp authentication

Make sure that you have created a Django project and then install social-auth-app-django from PyPI.

pip install social-auth-app-django

Then, add ‘social_django’ to your installed apps.

Now, migrate the database:

Now, go to http://localhost:8000/admin and you should see three models under SOCIAL_DJANGO app

Django admin with social auth

Configure Authentication Backend

Now, to use social-auth-app-django’s social login, we need to define our authentication backends in the setting.py file. Note that although we want to provide our users a way to log in through Google, we also want to retain the normal login functionality where the username and password can be used to login to our application. In order to do that, configure the AUTHENTICATION_BACKENDS this way:

Note that we have django.constrib.auth.backends.ModelBackend still in our AUTHENTICATION_BACKENDS. This will let us retain the usual login flow.

Template and Template Context Processors

To keep it simple, we will have a plain HTML file which has a link to redirect the user for google+ login.

Go ahead and add a templates’ folder to the authentication app and create an index.html file in it. In this html file, we will just put a simple anchor tag which will redirect to social-auth-app-django’s login URL

In authentication/views.py render this template

Now, we will have to add context processors which provide social auth related data to template context:

URL Configurations

Alright! So, we have our template setup done and now we just need to add our index view and the Django social auth URLs in our project.

Go to the urls.py and add this code:

Obtaining Google OAuth2 Credentials

To obtain the Google OAuth2 credentials, Follow these steps:

  1. Go to Google developer console
  2. Create a new project if you do not have any (see the drop-down at the top left of your screen)
  3. After the project is created you will be redirected to a dashboard. Click on ENABLE API button
  4. Select Google+ APIs from the Social APIs section.
  5. On the next page, click the Enable button to enable Google+ API for your project.
  6. To generate credentials, select the Credentials tab from the left navigation menu and hit the ‘create credentials’ button.
  7. From the drop-down, select OAuth client ID.
  8. On the next screen, select the application type (web application in this case) and enter your authorized javascript origins and redirect uri

For now, just set the origin as http://localhost:8000 and the redirect URI as http://localhost:8000/complete/google-oauth2/

Hit the create button and copy the client ID and client secret

Configuration of OAuth Credentials

Now, got to setting.py and add you OAuth creadentials like this:

Finally, define the LOGIN_REDIRECT_URL

For setting up credentials for other OAuth2 backend, the pattern is like this:

Usage

Now that our configuration is complete, we can start using the social login in our Django application. Go to http://localhost:8000 and click the Google+ anchor tag.

It should redirect to Google OAuth screen where it asks you to sign in. Once you sign in through your Gmail account, you should be redirected to the redirect URL.

To check if a user has been created, go to the django admin (http://localhost:8000/admin) and click on the User social auths table. You should see a new user there with the provider as goole-oauth2 and Uid as your gmail id.

Django admin social auth user data

Triggering The OAuth URLs from Non-Django Templates

It could be possible that you want to trigger the social login URLs from a template which is not going to pass through Django’s template context processors. For example, when you want to implement the login in an HTML template which is developed in using ReactJS.

It is not as complicated as it looks. Just specify the href in your anchor tag like this:

The login URL for other OAuth providers is of the same pattern. In case you are not sure what the login redirect url should be, there are two ways to find the URL – either jump into their code base or try this hack –

  1. Create a Django template and place an anchor tag with the respective URL as shown in the Templates and Template context processors section.
  2. Remove the respective provider (in case of Google oauth2, remove social_core.backends.google.GoogleOAuth2) from the AUTHENTICATION_BACKENDS in settings.py
  3. Click the anchor tag in a Django template. Doing so, you would see the Django’s regular error template saying “Backend not found”.
  4. Copy the current URL in the browser and use it in your non-Django template.

Summary

We understood what Social auth app django is and that it uses social core behind the scenes. We also learnt how to implement social login in Django through templates that are processed by Django and through non-Django templates which could be developed using JS frameworks like ReactJS.

Share
Tweet
+1
Share

E-book on Digital Business Transformation