How to configure Facebook SSO in Django Rest Framework with React?
Facebook SSO enables existing Facebook and Messenger users to easily and effortlessly sign on to other application integrations. In this tutorial, we will learn to configure the Facebook SSO(Social Login) with Django and React.
Django (Django rest Framework):
Django REST framework (DRF) is a powerful and flexible toolkit for building Web APIs.Its main benefit is that it makes serialization much easier. Django REST framework is based on Django's class-based views, so it's an excellent option if you're familiar with Django. To know more about relative links click here
Single sign-on (SSO) is a time-saving and highly secure user authentication process. SSO lets users access multiple applications with a single account and sign out instantly with one click.
How it Works:
Step 1: Create a Facebook client Id and client Secret
Check out this tutorial, to create a client Id and client secret.
Step 2: Set up a React project
Before we create React App we need to install node.js.
if you already installed node.js please ignore this step 2 and go to step 3
Step 3: Create a React-app
After installing Node.js open the terminal or command prompt and create the React app with the following commands
1npx create-react-app frontend
A sample screenshot of React app files is shown below.
Step 4: Configure the React project to establish a connection with Facebook.
After creating the React app then install the react-facebook-login commands
Create the sociallib and register directory in the following hierarchy.
library → socaillib
library → register.
After that, please create a facebook.py the file inside the sociallib directory
In library/sociallib/facebook.py, add the following snippet.
5 Facebook class to fetch the user info and return it
9 def validate(auth_token):
11 validate method Queries the facebook GraphAPI to fetch the user info
14 graph = facebook.GraphAPI(access_token=auth_token)
15 profile = graph.request('/me?fields=name,email')
16 return profile
18 return "The token is invalid or expired."
The sample code for the library/sociallib/facebook.py file can be found in the following Github URL.