El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Autenticació amb correu electrònic i contrasenya

Següent ►
►

Introducció

L'autenticació amb correu electrònic i contrasenya és una de les formes més comunes i senzilles d'autenticar usuaris en una aplicació. Firebase proporciona una API fàcil d'utilitzar per implementar aquest tipus d'autenticació de manera segura i eficient.

Configuració inicial

Pas 1: Activar l'autenticació amb correu electrònic i contrasenya a la consola de Firebase

  1. Accedeix a la consola de Firebase.
  2. Selecciona el teu projecte.
  3. A la barra lateral, fes clic a "Authentication" (Autenticació).
  4. A la pestanya "Sign-in method" (Mètode d'inici de sessió), activa l'opció "Email/Password" (Correu electrònic/Contrasenya).

Pas 2: Afegir Firebase al teu projecte

Assegura't d'haver afegit Firebase al teu projecte seguint les instruccions de configuració inicial proporcionades per Firebase. Aquí tens un exemple per a una aplicació web:

<!-- Inclou la llibreria de Firebase -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>

<script>
  // Configuració de Firebase
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  // Inicialitza Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Crear un nou usuari

Per crear un nou usuari amb correu electrònic i contrasenya, utilitza el mètode createUserWithEmailAndPassword de Firebase Authentication.

Exemple de codi

// Referència a l'objecte d'autenticació de Firebase
const auth = firebase.auth();

// Funció per registrar un nou usuari
function registerUser(email, password) {
  auth.createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
      // Usuari registrat correctament
      const user = userCredential.user;
      console.log('Usuari registrat:', user);
    })
    .catch((error) => {
      // Gestió d'errors
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error('Error en registrar l\'usuari:', errorCode, errorMessage);
    });
}

// Exemple d'ús
registerUser('[email protected]', 'password123');

Iniciar sessió amb un usuari existent

Per iniciar sessió amb un usuari existent, utilitza el mètode signInWithEmailAndPassword.

Exemple de codi

// Funció per iniciar sessió
function loginUser(email, password) {
  auth.signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      // Usuari ha iniciat sessió correctament
      const user = userCredential.user;
      console.log('Usuari ha iniciat sessió:', user);
    })
    .catch((error) => {
      // Gestió d'errors
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error('Error en iniciar sessió:', errorCode, errorMessage);
    });
}

// Exemple d'ús
loginUser('[email protected]', 'password123');

Tancar sessió

Per tancar la sessió de l'usuari actual, utilitza el mètode signOut.

Exemple de codi

// Funció per tancar sessió
function logoutUser() {
  auth.signOut()
    .then(() => {
      // Usuari ha tancat sessió correctament
      console.log('Usuari ha tancat sessió');
    })
    .catch((error) => {
      // Gestió d'errors
      console.error('Error en tancar sessió:', error);
    });
}

// Exemple d'ús
logoutUser();

Gestió d'errors comuns

Errors comuns i les seves solucions

Codi d'error Descripció Solució
auth/email-already-in-use El correu electrònic ja està en ús per un altre compte. Utilitza un correu electrònic diferent o recupera la contrasenya si l'usuari ha oblidat.
auth/invalid-email El correu electrònic no té un format vàlid. Verifica que el correu electrònic tingui un format correcte.
auth/weak-password La contrasenya és massa dèbil. Utilitza una contrasenya més forta (mínim 6 caràcters).
auth/user-not-found No existeix cap usuari amb aquest correu electrònic. Verifica que el correu electrònic sigui correcte o registra un nou usuari.
auth/wrong-password La contrasenya és incorrecta. Verifica que la contrasenya sigui correcta o recupera la contrasenya si l'usuari l'ha oblidat.

Exercicis pràctics

Exercici 1: Crear un formulari de registre

Crea un formulari HTML que permeti als usuaris registrar-se amb el seu correu electrònic i contrasenya. Implementa la funció registerUser per gestionar el registre.

Exercici 2: Crear un formulari d'inici de sessió

Crea un formulari HTML que permeti als usuaris iniciar sessió amb el seu correu electrònic i contrasenya. Implementa la funció loginUser per gestionar l'inici de sessió.

Exercici 3: Afegir un botó de tancament de sessió

Afegiu un botó que permeti als usuaris tancar sessió. Implementa la funció logoutUser per gestionar el tancament de sessió.

Solucions als exercicis

Solució a l'exercici 1

<form id="registerForm">
  <input type="email" id="registerEmail" placeholder="Correu electrònic" required>
  <input type="password" id="registerPassword" placeholder="Contrasenya" required>
  <button type="submit">Registrar-se</button>
</form>

<script>
  document.getElementById('registerForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.getElementById('registerEmail').value;
    const password = document.getElementById('registerPassword').value;
    registerUser(email, password);
  });
</script>

Solució a l'exercici 2

<form id="loginForm">
  <input type="email" id="loginEmail" placeholder="Correu electrònic" required>
  <input type="password" id="loginPassword" placeholder="Contrasenya" required>
  <button type="submit">Iniciar sessió</button>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    loginUser(email, password);
  });
</script>

Solució a l'exercici 3

<button id="logoutButton">Tancar sessió</button>

<script>
  document.getElementById('logoutButton').addEventListener('click', function() {
    logoutUser();
  });
</script>

Conclusió

En aquesta secció, hem après com configurar l'autenticació amb correu electrònic i contrasenya utilitzant Firebase. Hem vist com registrar nous usuaris, iniciar sessió amb usuaris existents i tancar sessió. També hem abordat la gestió d'errors comuns i hem proporcionat exercicis pràctics per reforçar els conceptes apresos. En la següent secció, explorarem l'autenticació amb xarxes socials per oferir més opcions d'inici de sessió als usuaris.

◄ Anterior
◄
Següent ►
►

Curs de Firebase

Mòdul 1: Introducció a Firebase

Mòdul 2: Autenticació de Firebase

Mòdul 3: Base de dades en temps real de Firebase

Mòdul 4: Cloud Firestore

Mòdul 5: Emmagatzematge de Firebase

Mòdul 6: Missatgeria en el núvol de Firebase

Mòdul 7: Analítica de Firebase

Mòdul 8: Funcions de Firebase

Mòdul 9: Monitoratge del rendiment de Firebase

Mòdul 10: Laboratori de proves de Firebase

Mòdul 11: Temes avançats de Firebase

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats