Comment créer un système de connexion (espace membre) sur un site Blogger avec Firebase

© Firebase

Ajouter un système de connexion (un espace membre) à un site Blogger est tout à fait possible, même si la plateforme ne propose pas cette fonctionnalité en natif. Blogger n'héberge pas de base de données côté serveur : l'astuce consiste donc à s'appuyer sur un service tiers qui gère l'inscription, la connexion et les sessions à votre place — le tout en HTML, CSS et JavaScript, directement dans votre thème.

Dans ce tutoriel, nous utilisons Firebase Authentication, un service gratuit et sécurisé de Google, pour créer un espace membre sur votre blog. Suivez les étapes ci-dessous.

1. Étape 1 — Créer un projet Firebase

- Accédez à la [console Firebase]
- Créez un nouveau projet, donnez-lui un nom, puis suivez l'assistant jusqu'au bout. La création d'un projet Firebase est entièrement gratuite.

2. Étape 2 — Activer Firebase Authentication

Dans le menu Build > Authentication, cliquez sur « Commencer », puis activez la méthode E-mail / Mot de passe. C'est l'option la plus simple pour débuter ; vous pourrez ajouter Google, Facebook ou d'autres fournisseurs plus tard.

3. Étape 3 — Intégrer Firebase à votre thème Blogger

Dans le tableau de bord Blogger, ouvrez Thème, cliquez sur la petite flèche à côté du bouton « Personnaliser », puis sur Modifier le code HTML.

Juste avant la balise </head>, collez le SDK Firebase ainsi que votre objet de configuration (firebaseConfig), que vous trouverez dans la console sous Paramètres du projet > Vos applications. Bon à savoir : ces clés de configuration sont publiques par conception — la sécurité de vos données repose sur les règles Firebase, pas sur le secret de la clé.

4. Étape 4 — Créer le formulaire de connexion

Ajoutez, à l'endroit de votre choix (un article, une page ou un gadget HTML/JavaScript), un formulaire contenant deux champs — adresse e-mail et mot de passe — avec un bouton d'inscription et un bouton de connexion. Voici un exemple complet et prêt à l'emploi :

[HTML] 
 
  <form id="loginForm">

   <label for="email">Email:</label>

  <input type="email" id="email" required>

   <label for="password">Mot de passe:</label>

   <input type="password" id="password" required>

   <button type="button" onclick="signIn()">Se Connecter</button>
  

[CSS] Vous pouvez ajouter votre code CSS personnalisé

[JS]  function signIn() {

      const email = document.getElementById('email').value;

      const password = document.getElementById('password').value;

      firebase.auth().signInWithEmailAndPassword(email, password)

         .then((userCredential) => {

            // Connexion réussie

            const user = userCredential.user;

            console.log("Connecté en tant que:", user.email);

         })

         .catch((error) => {

            // Gestion des erreurs

            const errorCode = error.code;

            const errorMessage = error.message;

            console.error("Erreur de connexion:", errorMessage);

         });
          }
         

5. Étape 5 — Gérer la connexion en JavaScript

Reportez-vous à l'onglet JS du bloc de code ci-dessus.

La fonction s'appuie sur signInWithEmailAndPassword() de Firebase pour authentifier l'utilisateur, et gère les erreurs (mot de passe incorrect, compte inexistant…) afin d'afficher un message clair.

6. Étape 6 — Personnaliser l'espace membre

Une fois l'utilisateur connecté, servez-vous de onAuthStateChanged() pour détecter son état et afficher le contenu réservé aux membres (ou masquer le formulaire et proposer un bouton de déconnexion).

Pensez à tester soigneusement votre système et à appliquer les bonnes pratiques de sécurité : validez toujours les actions sensibles côté serveur (via des Cloud Functions ou des règles Firebase), n'accordez que les permissions strictement nécessaires et respectez les politiques de confidentialité de Google lorsque vous utilisez Firebase.

Info!
Si vous rencontrez des difficultés faites nous savoir en commentaires!!!

---