Django-allauth Facebook Login

It is really easy to make facebook login feature to your web pages if you are using Django.

First, install django-allauth

$(venv) pip3 install django-allauth

now put these code on your installed apps in settings.py

'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.facebook',

Also, put code below to your settings.py

AUTHENTICATION_BACKENDS = (
'allauth.account.auth_backends.AuthenticationBackend',
'django.contrib.auth.backends.ModelBackend',
)

Also put these in the settings.py

SOCIALACCOUNT_PROVIDERS = \
{'facebook':
{'METHOD': 'oauth2',
'SCOPE': ['email','public_profile', 'user_friends'],
'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
'FIELDS': [
'id',
'email',
'name',
'first_name',
'last_name',
'verified',
'locale',
'timezone',
'link',
'gender',
'updated_time'],
'EXCHANGE_TOKEN': True,
'LOCALE_FUNC': lambda request: 'kr_KR',
'VERIFIED_EMAIL': False,
'VERSION': 'v2.4'}}

ID and Key can be found at https://developers.facebook.com/

create an app and go to DashBoard, you’ll see your’s

#facebook
SOCIAL_AUTH_FACEBOOK_KEY = 'secret!' # App ID
SOCIAL_AUTH_FACEBOOK_SECRET ='secret!' #app key

You might want to add this

LOGIN_REDIRECT_URL = "/" 
#if you succeed in login, you'll be redirected to the main page.

Now we need to modify the urls.py

Add this code to your urlpatterens

url(r'^accounts/',include('allauth.urls')),

Now go back to https://developers.facebook.com/

go to settings ,click “Add flatform”, click website, put http://localhost:8000/ and click the quick start button. keep going and do what dev.facebook leads to.

Now you need to set your site id in settings.py

#site id
SITE_ID = <your local host site id> # for the dev mode, you need to use localhost's id facebook does not support the name 127.0.0.1:8000
#little options for your page's signup.
ACCOUNT_EMAIL_REQUIRED=True
ACCOUNT_USERNAME_REQURIED=True

We need to register our site ID and Social application in our django admin

First do migration & runserver

$(venv) python3 manage.py migrate

go to http://localhost:8000/admin and click site ID

change example.com to http://localhost:8000 ( if you are already at production level , you might just use your page’s IP or domain.)

Application register

After saving the application, we are ready to login with facebook.

Put these templates tags to top of a html where you want make your users to login.

{% load socialaccount %}
{% providers_media_js %}

and you can write this exact position where you want to make login button

<a href="{% provider_login_url "facebook" method="js_sdk" %}">Login Button image</a>

this send your request to accounts/login page which handles your login procedures.

you can find nice social login button,

they provide awesome social login buttons.

after the button application.

<a href="{% provider_login_url "facebook" method="js_sdk" %}" class="btn btn-block btn-social btn-facebook" style="background-color:#3b5998;text-align:center">
<span class="fa fa-facebook"></span>
Sign in with Facebook
</a>

I had to set color because my other bootstrap used yellow btn color.

This is how it looks like when you follow this post.

Finished!

Like what you read? Give Kwon Jinhwan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.