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!