Build Single page application with React and Django Part 5.1-Exchange Facebook’s access token to JWT from Django/DRF server for Social Login

Introduction

We have mentioned that how to make endpoints with JWT authorization.

Also, we have introduce how to connect ReactJS with Django.

What if we want to enable social login for social media like Facebook?

Agenda

This article will introduce the process to exchange the access token from Facebook to JWT for authorization. It includes the following topics.

• Overview
• Get access token from Facebook
• Set Django/DRF server
• Validation with Postman

About this series

The target of this series is to build a ReactJS single page application(SPA) with Django API server and deploy on Heroku.

• Part 1: Deploy Django application to Heroku and migrate PostgreSQL
• Part 2: Connect React App with Django App
• Part 3: Use JWT with DRF and tests endpoints on Travis-CI
• Part 4: Create Endpoints to Manipulate Resources
• Part 5.1: this article
• Part 5.2: Exchange Github’s access token to JWT from Django/DRF
• Part 6: Create Django Application’s sitemap on Heroku for SEO
• Part 7: How to Refactor Function Components with HOC?
• Part 8: Static Rendering with Next.js and Django on Heroku
• Part 9: Access Redux on the Next.js page-level
• Part 10: Improve SEO with Pyppeteer in Django
• Part 11: Theming with Redux and styled-component

Overview

There are four roles, Django server, ReactJS client, Facebook authorize server, and the user.

1.Get access token from Facebook

Create a new app from developer.facebook

1.Create a new app on facebook for developers

2.Copy the key and the secret

Create a ReactJS to retrieve the access token from Facebook

1.Install required packages

npm install -S react-facebook-login

2.Create a ReactJS component

import React from 'react'
import FacebookLogin from 'react-facebook-login';
const SignInForm = () => {

const responseFacebook = (response) => {
        console.log(response);
      }

return (
       <FacebookLogin
        appId="{APP ID}"
        autoLoad={false}
        fields="name,email,picture"
        callback={responseFacebook}/>
    )
}

3.We can use the component to get the access token from Facebook

2.Set Django/DRF server

1.Install required packages

pip install python-social-auth
pip install social-auth-app-django
pip install social-auth-core

2.Edit settings.py

INSTALLED_APPS = [
    ...
    'social.apps.django_app.default',
    'social_django'
]

AUTHENTICATION_BACKENDS = [
    'social_core.backends.facebook.FacebookOAuth2',
    'django.contrib.auth.backends.ModelBackend',
]

SOCIAL_AUTH_FACEBOOK_KEY = os.getenv("SOCIAL_AUTH_FACEBOOK_KEY")
SOCIAL_AUTH_FACEBOOK_SECRET = os.getenv("SOCIAL_AUTH_FACEBOOK_SECRET")
SOCIAL_AUTH_FACEBOOK_SCOPE = ['email']

MIDDLEWARE = [
    ...
    'social_django.middleware.SocialAuthExceptionMiddleware'
]

3.Edit serializers.py

class SocialAuthSerializer(serializers.Serializer):
    provider = serializers.CharField(max_length=255, required=True)
    access_token = serializers.CharField(max_length=4096, required=True, trim_whitespace=True)

4.Edit views.py

5.Edit urls.py

from .views import social_auth

urlpatterns = [
    ...
    path("api/social-auth/", social_auth)
]

3.Validation with Postman

• Set provider as facebook on the body
• Set Content-type as application/json on the header

Then we will get JWT!

References

• Simple Facebook social Login using Django Rest Framework
• SocialLoginView
• Django Authentication With Facebook, Instagram and LinkedIn
• 使用django-rest-framework-jwt及python-social-auth讓使用者用Facebook帳號登入
• Login with Facebook and Google in reactjs

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

Please feel free to clap if this article can help you. Thank you.

You can also subscribe my page on Facebook.

Related topics

How to use the two-way binding in Knout.js and ReactJS?

Learn how to use SignalR to build a chatroom application

My reflection of :

IT & Network:

Database:

Software testing:

Debugging:

DevOps: