Intégrer l’authentification sociale (Facebook, Twitter, GitHub) avec Django

L’intégration de l’authentification sociale dans une application Django permet aux utilisateurs de se connecter rapidement en utilisant leurs comptes existants sur des plateformes telles que Facebook, Twitter ou GitHub. Dans cet article, nous allons voir comment configurer cette fonctionnalité à l’aide de la bibliothèque social-auth-app-django, l’une des plus complètes et flexibles pour gérer l’OAuth dans Django.

1. Installation de la bibliothèque

Commencez par installer la dépendance via pip :

pip install social-auth-app-django

Ajoutez ensuite l’application dans la configuration INSTALLED_APPS de votre projet :

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'social_django',  # <-- Authentification sociale
    'mysite.core',
]

Appliquez ensuite les migrations :

python manage.py migrate

2. Configuration du middleware et des context processors

Ajoutez le middleware SocialAuthExceptionMiddleware à la fin de la liste :

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'social_django.middleware.SocialAuthExceptionMiddleware',  # <--
]

Dans la section TEMPLATES, ajoutez les deux context processors suivants :

'social_django.context_processors.backends',
'social_django.context_processors.login_redirect',

3. Définition des backends d’authentification

Dans votre fichier settings.py, précisez les backends utilisés :

AUTHENTICATION_BACKENDS = (
    'social_core.backends.github.GithubOAuth2',
    'social_core.backends.twitter.TwitterOAuth',
    'social_core.backends.facebook.FacebookOAuth2',
    'django.contrib.auth.backends.ModelBackend',
)

Ces backends permettent de gérer la connexion via GitHub, Twitter et Facebook.

4. Configuration des routes

Dans votre fichier urls.py, ajoutez les routes liées à Social Auth :

from django.conf.urls import url, include
from django.contrib import admin
from django.contrib.auth import views as auth_views
from mysite.core import views as core_views

urlpatterns = [
    url(r'^$', core_views.home, name='home'),
    url(r'^login/$', auth_views.LoginView.as_view(), name='login'),
    url(r'^logout/$', auth_views.LogoutView.as_view(), name='logout'),
    url(r'^oauth/', include('social_django.urls', namespace='social')),  # <--
    url(r'^admin/', admin.site.urls),
]

5. Redirections après connexion

LOGIN_URL = 'login'
LOGOUT_URL = 'logout'
LOGIN_REDIRECT_URL = 'home'

6. Création de la vue principale

Créez une vue simple qui affiche le nom d’utilisateur connecté :

from django.contrib.auth.decorators import login_required
from django.shortcuts import render

@login_required
def home(request):
    return render(request, 'core/home.html')

Et le template home.html :

{% extends 'base.html' %}
{% block content %}
  <h2>Accueil</h2>
  <p>Bonjour {{ user.username }} !</p>
{% endblock %}

Authentification GitHub

Pour permettre la connexion via GitHub, rendez-vous sur GitHub Developer Settings et créez une nouvelle application OAuth.

Utilisez l’URL de rappel suivante :

http://localhost:8000/oauth/complete/github/

Après création, récupérez votre Client ID et Client Secret, puis ajoutez-les dans settings.py :

SOCIAL_AUTH_GITHUB_KEY = 'YOUR_CLIENT_ID'
SOCIAL_AUTH_GITHUB_SECRET = 'YOUR_CLIENT_SECRET'

7. Création du template de connexion

{% extends 'base.html' %}
{% block content %}
  <h2>Connexion</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Se connecter</button>
  </form>
  <p><strong>Ou connectez-vous avec :</strong></p>
  <a href="{% url 'social:begin' 'github' %}">GitHub</a>
{% endblock %}

Dès qu’un utilisateur se connecte via GitHub, Django crée automatiquement un compte associé. S’il n’a pas encore de mot de passe, il pourra en définir un plus tard via la page des paramètres.

Authentification Twitter

Connectez-vous sur developer.twitter.com et créez une nouvelle application. Définissez le Callback URL comme suit :

http://localhost:8000/oauth/complete/twitter/

Ajoutez ensuite les clés dans settings.py :

SOCIAL_AUTH_TWITTER_KEY = 'YOUR_API_KEY'
SOCIAL_AUTH_TWITTER_SECRET = 'YOUR_API_SECRET'

Et mettez à jour le template de connexion :

<a href="{% url 'social:begin' 'twitter' %}">Twitter</a>

Authentification Facebook

Sur developers.facebook.com, créez une nouvelle application et configurez l’URL de site :

http://localhost:8000

Ajoutez les identifiants Facebook à vos paramètres :

SOCIAL_AUTH_FACEBOOK_KEY = 'YOUR_APP_ID'
SOCIAL_AUTH_FACEBOOK_SECRET = 'YOUR_APP_SECRET'

Et ajoutez un lien dans le template :

<a href="{% url 'social:begin' 'facebook' %}">Facebook</a>

Gestion des connexions sociales

Vous pouvez proposer une page “Paramètres” à l’utilisateur pour gérer ses connexions sociales : ajouter, supprimer ou définir un mot de passe.

@login_required
def settings(request):
    user = request.user
    github_login = user.social_auth.filter(provider='github').first()
    twitter_login = user.social_auth.filter(provider='twitter').first()
    facebook_login = user.social_auth.filter(provider='facebook').first()
    can_disconnect = user.social_auth.count() > 1 or user.has_usable_password()
    return render(request, 'core/settings.html', {
        'github_login': github_login,
        'twitter_login': twitter_login,
        'facebook_login': facebook_login,
        'can_disconnect': can_disconnect,
    })

Le template associé permettra de connecter ou déconnecter chaque service selon l’état de l’utilisateur.

Conclusion

Grâce à social-auth-app-django, l’intégration de l’authentification via des services tiers devient rapide et sécurisée. Cette approche améliore l’expérience utilisateur et réduit la friction lors de la création de compte.

Pour aller plus loin, il est recommandé d’utiliser un fichier .env pour sécuriser vos identifiants OAuth et de consulter la documentation officielle.