You want to create a Django website with social authentication, that is with such a login form :

and still having the possibility to create a local account if the user wants to, such a sign-up form would look like this :

Note the captcha to check the user is not a robot.

Of course, you want all email checking stuff and so on. There is a very interesting application for that : django-allauth, it does a lot of things, but requires many configurations, here is the procedure I followed :

1. Install the applications

You have to install django-allauth AND django-recaptcha2 python packages (in my case, it was in a virtualenv)

Then declare them into Django settings.py in INSTALLED_APPS :

Important : your application ‘myapp’ must be declared BEFORE ‘allauth’ ones. Otherwise, it is not possible to override django-allauth templates.

2. Get Facebook, Google and reCaptcha API keys

In order to get authenticated by facebook or google, you have to subscribe to their API and obtain public/secret keys.

2.1. Facebook API

If not already done, create a facebook account, then log-in and go to https://developers.facebook.com/ and choose “My apps” in top menu : add a new app corresponding to your website or select it if already created :

Go to the App’s dashboard  and get App ID and App Secret, it will correspond to SOCIAL_AUTH_FACEBOOK_KEY and SOCIAL_AUTH_FACEBOOK_SECRET in settings.py :

This is not finished, you must specify the authorized URL for authentication, in development mode, you would use http://localhost:8000 for Django runserver :

2.2 Google API

If not already done, create a google account, then log-in and go to the Google API  page : https://console.developers.google.com/apis

1. Enable APIs if needed
2. Select dashboard
3. Click on project select button in top menu
4. Add your new project

Then create credential for your project :

1. Click on Credentials in side-bar
2. Click on Create credentials button
3. Choose OAuth client ID

On next screen choose “Web application” and fill the form like this:

In my case, I am running Django in development mode (http://localhost:8000). Note the redirect URIs which must be exact. In my case, I am using Django internationalization framework, this is the reason why I have to specify ‘fr’ and ‘en’ in URIs. If your site has only one langage, the URI would be :

Once done, just click on the credential you have created, you will get your keys :

Client ID and Client secret will correspond to SOCIAL_AUTH_GOOGLE_CLIENT_ID and SOCIAL_AUTH_GOOGLE_SECRET in settings.py

2.3 reCaptcha API

The reCaptcha I use is the version 2 provided by google. To get keys, you need to register your site here : https://www.google.com/recaptcha/admin

1. Give a label to your site and choose reCaptcha V2
2. Enter authorized domains, accept Terms of Service and click on register button
3. Click on the site you just have added to get your keys

Site key and Secret key correspond to RECAPTCHA_PUBLIC_KEY and RECAPTCHA_PRIVATE_KEY in settings.py

Note that for testing purposes (ie Django runserver), you can use test keys given by google (the ones I gave in the settings.py example below) :

In this case, do not be surprised, you will have a beautiful red message telling you are testing reCaptcha :

3. Configure settings.py

Add this in your Django settings.py file :

Update authentication backends :

4. Configure Django admin interface

4.1. Declare your Site

Django-allauth uses Django ‘Site’ framework : You must register your site in the django admin interface and get the Site ID you will specify in SITE_ID in settings.py :

If not already done, add your site in Django admin interface :

Enter the domain name (Could be a fake one when using django runserver) and the display name :

Save the form.

In order to get the Site ID, it is not obvious : you must select your site in the list and watch the URL :

In my case, the ID is 3 (So I put SITE_ID=3 in settings.py). If you specifiy a bad SITE_ID, django will complain.

4.2 Add Facebook and Google social applications

Django-allauth requires that you create 2 entries in Social applications tables, one for each authentication API (Facebook and Google in my case) :

For Facebook, enter this :

1. Select the facebook provider
2. Give the name you want
3. Client id correspond to Facebook App ID
4. Secret key correspond to Facebook App Secret
5. Select the site you added in step 4.1

For Google enter this :

1. Select the Google provider
2. Give the name you want
3. Client id correspond to Google Client ID
4. Secret key correspond to Google Client Secret
5. Select the site you added in step 4.1

5. Update urls.py

In my case, I am using Django internationalization framework, so I added in my urls.py :

If you do not use internationalization, do not use il8n_patterns() and just declare django-allauth urls as usual by adding them in urlpatterns :

6. Add reCaptcha v2 in Sign-up form

django-allauth does not support Captchas, but give the possibility to redefine forms. Here I modified the Sign-up form by adding in my myapp/forms.py :

As you should noticed, I declared this form to django-allauth in settings.py :

7. Templates

If you do not want to rewrite all django-allauth templates, you have to customize your templates in some ways. Here is the files tree I have :

• myapp
  • templates
    • account
      • base.html
      • login.html
      • signup.html
    • accounts
      • profile.html
    • base.html

7.1 myapp/templates/base.html

The myapp/templates/base.html is important because django-allauth built-in templates are extending this template. So I choose to use it to be my project base template too. This implies to use some specific block name. The myapp/templates/base.html should looks like this :

7.2 account/base.html

I customized this template in order to add a specific css class on the container div when displaying built-in django-allauth templates :

7.3 login.html

Finally, here is my custom login template :

7.4 signup.html

The template to sign-up is :

Note the {% load recaptcha2 %} and {% recaptcha_init %} to get reCaptcha widget displayed in the form.

That’s all …