{"id":61181,"date":"2024-04-08T10:25:29","date_gmt":"2024-04-08T04:55:29","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=61181"},"modified":"2024-04-12T10:34:19","modified_gmt":"2024-04-12T05:04:19","slug":"how-to-integrate-django-with-social-auth-login-facebook-and-github","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-integrate-django-with-social-auth-login-facebook-and-github\/","title":{"rendered":"How to Integrate Django with Social Auth Login \u2013 Facebook and GitHub"},"content":{"rendered":"

Social authentication is a powerful feature that allows users to log in to your Django web application using their social media accounts like Facebook, Google, Twitter, and more. It simplifies users’ registration and login process while providing additional user data for your application.<\/span><\/p>\n

Basic Setup:<\/b><\/h2>\n

Step 1: Installation \u2013<\/b><\/h3>\n

First, install the django-social-auth library using pip:<\/em><\/strong><\/p>\n

pip install social-auth-app-django\r\n<\/span><\/pre>\n
Step 2: Settings Configuration \u2013<\/b><\/h3>\n
Add ‘social_django’ to your INSTALLED_APPS in your project\u2019s settings (settings.py):<\/em><\/strong><\/p>\n
# settings.py<\/span>\r\nINSTALLED_APPS = [<\/span>\r\n \u00a0\u00a0\u00a0# ...<\/span>\r\n \u00a0\u00a0\u00a0'social_django',<\/span>\r\n \u00a0\u00a0\u00a0# ...<\/span>\r\n]<\/span><\/pre>\n
Step 3: Migrations<\/b><\/h3>\n
python manage.py makemigrations<\/span><\/pre>\n
python manage.py migrate\r\n\r\n<\/span><\/pre>\n
The library will automatically handle auth tokens and all the required information to deal with OAuth and OAuth2. Generally speaking, you won\u2019t need to handle it manually or access the user\u2019s social profile.<\/span><\/p>\n
Step 4: Configuration of Django Social Auth App \u2013<\/b><\/h3>\n
Update the MIDDLEWARE_CLASSES by adding the SocialAuthExceptionMiddleware to the end of it:<\/em><\/strong><\/p>\n
MIDDLEWARE_CLASSES = [<\/span>\r\n \u00a0\u00a0\u00a0'django.middleware.security.SecurityMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.contrib.sessions.middleware.SessionMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.middleware.common.CommonMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.middleware.csrf.CsrfViewMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.contrib.auth.middleware.AuthenticationMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.contrib.auth.middleware.SessionAuthenticationMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.contrib.messages.middleware.MessageMiddleware',<\/span>\r\n \u00a0\u00a0\u00a0'django.middleware.clickjacking.XFrameOptionsMiddleware',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>'social_django.middleware.SocialAuthExceptionMiddleware',<\/b>  # <-- Here<\/span>\r\n]<\/span><\/pre>\n
Now we update the context_processors inside TEMPLATE:<\/em><\/strong><\/p>\n
TEMPLATES = [<\/span>\r\n \u00a0\u00a0\u00a0{<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'BACKEND': 'django.template.backends.django.DjangoTemplates',<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'DIRS': [BASE_DIR + '\/templates\/',],<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'APP_DIRS': True,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'OPTIONS': {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'context_processors': [<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'django.template.context_processors.debug',<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'django.template.context_processors.request',<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'django.contrib.auth.context_processors.auth',<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'django.contrib.messages.context_processors.messages',<\/span>\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>'social_django.context_processors.backends',<\/b>  # <-- Here<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>'social_django.context_processors.login_redirect',<\/b> # <-- Here<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},<\/span>\r\n \u00a0\u00a0\u00a0},<\/span>\r\n]<\/span><\/pre>\n
Add the AUTHENTICATION_BACKENDS in your settings.py file:<\/strong><\/em><\/p>\n
AUTHENTICATION_BACKENDS = (<\/span>\r\n \u00a0\u00a0\u00a0'social_core.backends.facebook.FacebookOAuth2',<\/span>\r\n \u00a0\u00a0\u00a0'social_core.backends.twitter.TwitterOAuth',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0'social_core.backends.github.GithubOAuth2',<\/span>\r\n\r\n \u00a0\u00a0\u00a0'django.contrib.auth.backends.ModelBackend',<\/span>\r\n)<\/span><\/pre>\n
So, here, we must specify the correct backends, depending on your needs. Since we will be working with Facebook, Twitter, and GitHub in this example<\/span>, I have just added those three backends you see above in <\/span>AUTHENTICATION_BACKENDS<\/span>.<\/span><\/p>\n
Step 5:<\/b><\/h3>\n
Update the urls.py add the social-auth-app-django URLs:<\/em><\/strong><\/p>\n
from django.contrib import admin<\/span>\r\nfrom django.urls import path, include<\/span>\r\n\r\nurlpatterns = [<\/span>\r\npath(\"admin\/\", admin.site.urls),<\/span>\r\npath(\"\",include(\"app.urls\")),<\/span>\r\n\r\npath(\"oauth\/\",include(\"social_django.urls\",namespace=\"social\")),# <-- here<\/b>\r\n]<\/span><\/pre>\n
Facebook Login Integration in Django Website<\/i><\/b><\/h2>\n
Go to <\/span>developers.facebook.com\/<\/span><\/a> click on <\/span>My Apps<\/b> and then <\/span>Create App<\/b> (If new, click on Get Started and create your developer account). Fill in the app name and contact email, and click on <\/span>Create App ID<\/b>.<\/span><\/p>\n
\"\"<\/p>\n
From the sidebar, go to <\/span>Settings -> Basic<\/b>, grab the <\/span>App ID<\/b> and <\/span>App Secret<\/b> (click on the <\/span>Show<\/b> button to get it as plain text):<\/span><\/p>\n
SOCIAL_AUTH_FACEBOOK_KEY = 'APP_ID'\u00a0\u00a0<\/span><\/pre>\n
SOCIAL_AUTH_FACEBOOK_SECRET = 'APP_SECRET'\r\n<\/span><\/pre>\n
Change the above App ID and App Secret and add it to settings.py file<\/strong><\/em><\/p>\n
Now go to <\/span>Settings -> Basic<\/b> at the bottom. First, click on the button <\/span>+ Add Platform<\/b> and add a website. For the <\/span>Site URL,<\/b> put <\/span>http:\/\/localhost:8000,<\/b> and then in the <\/span>App Domains,<\/b> put just <\/span>localhost<\/b>, like the picture below:<\/span>\u00a0<\/span><\/p>\n
\"\"<\/p>\n
\"\"<\/span><\/p>\n
Note: For Facebook, we can\u2019t use 127.0.0.1 as the callback. Instead, use the localhost.<\/strong><\/p>\n
Save changes and we are good to go. Now update the login.html file with the Facebook link:<\/em><\/strong><\/p>\n
{% extends 'base.html' %}<\/span>\r\n\r\n{% block title %}Login Page{% endblock title %}<\/span>\r\n\r\n{% block content %}\u00a0<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\r\n<h2>Login<\/h2><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<form method=\"post\"><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% csrf_token %}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ form.as_p }}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\">Login<\/button><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/form><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<br><\/span>\r\n\r\n<!-- Social Auth Buttons --><\/span>\r\n\r\n<divclass=\"text-center\"><\/span>\r\n\r\n<ahref=\"{% url 'social:begin' 'facebook' %}\"class=\"btn btn-primary\"><iclass=\"fab fa-facebook-f\"><\/i> Login with Facebook<\/a><\/span>\r\n\r\n<\/div><\/span><\/pre>\n
Note that the important part to start the Facebook authentication is {% url ‘social:begin’ ‘facebook’ %}.<\/em><\/strong><\/p>\n
Let\u2019s try it now. Click on login with Facebook.<\/b><\/p>\n
\"\"<\/p>\n
Successfully logged in with Facebook.<\/strong><\/em><\/p>\n
\"\"<\/p>\n
Django GitHub Login:<\/i><\/b><\/h2>\n
Log in to your <\/span>GitHub<\/b> account, and go to <\/span>Settings<\/b>. In the left menu, you will see <\/span>Developer settings<\/b>. Click on <\/span>OAuth apps<\/b>.<\/span><\/p>\n
In the <\/span>OAuth applications<\/b> screen, click on <\/span>Register a new application<\/b>. Or simply click on the link \u2013 <\/span>https:\/\/github.com\/settings\/applications\/new<\/span><\/a><\/p>\n
Provide the information below:<\/strong><\/em><\/p>\n
\"\"<\/p>\n
The most important step is the <\/span>Authorization callback URL<\/b>. I\u2019m putting a localhost URL. <\/span>http:\/\/localhost:8000\/oauth\/complete\/github\/<\/b>.<\/span><\/p>\n
After you create the app, you will be redirected to this screen:<\/span><\/p>\n
\"\"<\/p>\n
Now we update the settings.py with the client ID and client Secret:<\/b><\/p>\n
SOCIAL_AUTH_GITHUB_KEY = 'AUTH_GITHUB_KEY'<\/span><\/pre>\n
SOCIAL_AUTH_GITHUB_SECRET = 'AUTH_GITHUB_SECRET'<\/span><\/pre>\n
Login View<\/b><\/h3>\n
Let\u2019s create a Login View that can handle the GitHub Login. The default login view looks for a template in login.html. Let\u2019s create it:<\/p>\n
login.html<\/b>\r\n\r\n{% extends 'base.html' %}<\/span>\r\n\r\n{% block title %}Login Page{% endblock title %}<\/span>\r\n\r\n{% block content %}\u00a0<\/span>\r\n\r\n\r\n<h2>Login<\/h2><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<form method=\"post\"><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% csrf_token %}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ form.as_p }}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\">Login<\/button><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/form><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<br><\/span>\r\n\r\n<!-- Social Auth Buttons --><\/span>\r\n\r\n\r\n<divclass=\"text-center\"><\/span>\r\n\r\n<a href=\"{% url 'social:begin' 'github' %}\" class=\"btn btn-warning\"><i class=\"fab fa-github\"><\/i> Login with Github<\/a><\/span>\r\n\r\n<\/div><\/span><\/pre>\n
\u00a0<\/span>\u00a0<\/span><\/p>\n
Note that the important part of starting the GitHub authentication is {% url ‘social:begin’ ‘github’ %}.<\/strong><\/em><\/p>\n
Now, the login page should look like this:<\/strong><\/p>\n
\"\"<\/p>\n
Successfully logged in with GitHub.<\/strong><\/em><\/p>\n
\"\"<\/p>\n
Thank You.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
Social authentication is a powerful feature that allows users to log in to your Django web application using their social media accounts like Facebook, Google, Twitter, and more. It simplifies users’ registration and login process while providing additional user data for your application. Basic Setup: Step 1: Installation \u2013 First, install the django-social-auth library using […]<\/p>\n","protected":false},"author":1528,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":128},"categories":[1994,1],"tags":[1221,4043,703,503,1358,5821],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61181"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1528"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=61181"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61181\/revisions"}],"predecessor-version":[{"id":61266,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61181\/revisions\/61266"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=61181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=61181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=61181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}