Intégration HTML & JS

À insérer dans votre fichier login.html pour afficher le bouton et gérer le clic.

1. Le Code HTML (Bouton)

<!-- Script Google (Requis) -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<!-- Configuration du bouton (Invisible) -->
<div id="g_id_onload"
     data-client_id="VOTRE_CLIENT_ID_ICI.apps.googleusercontent.com"
     data-context="signin"
     data-ux_mode="popup"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>

<!-- Affichage visuel du bouton -->
<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signup_with"
     data-size="large"
     data-logo_alignment="left">
</div>

2. Le Script Javascript

Ce script intercepte la réponse de Google et l'envoie à votre serveur.

<script>
function handleCredentialResponse(response) {
    // Optionnel : Afficher un loader ici
    // document.getElementById('login-loader').style.display = 'block';

    // Envoi du token au backend Django
    fetch("/auth/google/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ credential: response.credential })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            window.location.href = "/home/"; 
        } else {
            alert("Erreur : " + data.message);
        }
    })
    .catch(e => {
        console.error(e);
        alert("Erreur de connexion serveur.");
    });
}
</script>

Code Python (Django)

Ce code reçoit le jeton, le valide, et crée la session utilisateur.

Fichier : accounts/custom_login_views.py

import json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.contrib.auth import login, get_user_model
from google.oauth2 import id_token
from google.auth.transport import requests as google_requests

# REMPLACER PAR VOTRE VRAI ID CLIENT
GOOGLE_CLIENT_ID = "972885369398-XXXXX.apps.googleusercontent.com"

@csrf_exempt
def google_auth_receiver(request):
    if request.method == "POST":
        try:
            data = json.loads(request.body)
            token = data.get('credential')

            # 1. Validation Google
            idinfo = id_token.verify_oauth2_token(
                token, 
                google_requests.Request(), 
                GOOGLE_CLIENT_ID,
                clock_skew_in_seconds=10
            )

            # 2. Gestion User
            email = idinfo['email']
            User = get_user_model()
            
            try:
                user = User.objects.get(email=email)
            except User.DoesNotExist:
                user = User.objects.create(
                    username=email, 
                    email=email,
                    first_name=idinfo.get('given_name', ''),
                    last_name=idinfo.get('family_name', '')
                )
                user.set_unusable_password()
                user.save()

            if not user.is_active:
                return JsonResponse({'success': False, 'message': 'Compte désactivé'})

            # 3. FIX : Force Backend
            user.backend = 'django.contrib.auth.backends.ModelBackend'
            
            login(request, user)
            return JsonResponse({'success': True})

        except ValueError as e:
            return JsonResponse({'success': False, 'message': str(e)})
            
    return JsonResponse({'success': False})

Paramètres Django (Settings.py)

Configuration finale pour autoriser les popups sécurisés.

# settings.py

# Nécessaire pour Google Sign-In (Cross-Origin-Opener-Policy)
SECURE_CROSS_ORIGIN_OPENER_POLICY = 'same-origin-allow-popups'

Urls.py

# urls.py
from django.urls import path
from . import custom_login_views

urlpatterns = [
    # ...
    path('auth/google/', custom_login_views.google_auth_receiver, name='google_auth_receiver'),
]