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

Gestió d'usuaris

Següent ►
►

En aquest tema, aprendrem com gestionar els usuaris en una aplicació que utilitza Firebase per a l'autenticació. La gestió d'usuaris inclou operacions com la creació, actualització, eliminació i recuperació d'informació dels usuaris. També veurem com gestionar la sessió d'usuari i com implementar la recuperació de contrasenyes.

Continguts

  1. Creació d'usuaris
  2. Actualització del perfil d'usuari
  3. Eliminació d'usuaris
  4. Recuperació de contrasenyes
  5. Gestió de la sessió d'usuari

Creació d'usuaris

Per crear un nou usuari amb correu electrònic i contrasenya, utilitzem el mètode createUserWithEmailAndPassword de Firebase Authentication. Aquest mètode crea un nou compte d'usuari associat amb l'adreça de correu electrònic i la contrasenya proporcionades.

Exemple de codi

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Usuari creat correctament
    var user = userCredential.user;
    console.log("Usuari creat:", user);
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    console.error("Error en crear l'usuari:", errorCode, errorMessage);
  });

Explicació

  1. firebase.auth().createUserWithEmailAndPassword(email, password): Aquest mètode crea un nou usuari amb l'adreça de correu electrònic i la contrasenya proporcionades.
  2. then((userCredential) => { ... }): Si la creació de l'usuari és exitosa, es retorna un objecte userCredential que conté informació sobre l'usuari creat.
  3. catch((error) => { ... }): Si hi ha un error durant la creació de l'usuari, es captura i es mostra el codi i el missatge d'error.

Actualització del perfil d'usuari

Després de crear un usuari, podem actualitzar el seu perfil, com ara el nom d'usuari i la foto de perfil.

Exemple de codi

var user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Nom d'usuari",
  photoURL: "https://example.com/foto-de-perfil.jpg"
}).then(() => {
  // Actualització correcta
  console.log("Perfil actualitzat correctament");
}).catch((error) => {
  // Error en actualitzar el perfil
  console.error("Error en actualitzar el perfil:", error);
});

Explicació

  1. firebase.auth().currentUser: Obtenim l'usuari actualment autenticat.
  2. user.updateProfile({ ... }): Actualitzem el perfil de l'usuari amb el nom d'usuari i la foto de perfil proporcionats.
  3. then(() => { ... }): Si l'actualització és exitosa, es mostra un missatge de confirmació.
  4. catch((error) => { ... }): Si hi ha un error durant l'actualització, es captura i es mostra el missatge d'error.

Eliminació d'usuaris

Per eliminar un usuari, utilitzem el mètode delete de l'objecte User.

Exemple de codi

var user = firebase.auth().currentUser;

user.delete().then(() => {
  // Usuari eliminat correctament
  console.log("Usuari eliminat correctament");
}).catch((error) => {
  // Error en eliminar l'usuari
  console.error("Error en eliminar l'usuari:", error);
});

Explicació

  1. firebase.auth().currentUser: Obtenim l'usuari actualment autenticat.
  2. user.delete(): Elimina l'usuari actualment autenticat.
  3. then(() => { ... }): Si l'eliminació és exitosa, es mostra un missatge de confirmació.
  4. catch((error) => { ... }): Si hi ha un error durant l'eliminació, es captura i es mostra el missatge d'error.

Recuperació de contrasenyes

Firebase proporciona una manera senzilla de permetre als usuaris recuperar les seves contrasenyes mitjançant el mètode sendPasswordResetEmail.

Exemple de codi

var auth = firebase.auth();
var emailAddress = "usuari@example.com";

auth.sendPasswordResetEmail(emailAddress).then(() => {
  // Correu de recuperació enviat correctament
  console.log("Correu de recuperació enviat");
}).catch((error) => {
  // Error en enviar el correu de recuperació
  console.error("Error en enviar el correu de recuperació:", error);
});

Explicació

  1. firebase.auth(): Obtenim l'objecte d'autenticació de Firebase.
  2. auth.sendPasswordResetEmail(emailAddress): Enviem un correu de recuperació de contrasenya a l'adreça de correu electrònic proporcionada.
  3. then(() => { ... }): Si l'enviament és exitós, es mostra un missatge de confirmació.
  4. catch((error) => { ... }): Si hi ha un error durant l'enviament, es captura i es mostra el missatge d'error.

Gestió de la sessió d'usuari

És important gestionar la sessió d'usuari per assegurar-se que l'usuari estigui autenticat abans de permetre-li accedir a certes parts de l'aplicació.

Exemple de codi

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // Usuari autenticat
    console.log("Usuari autenticat:", user);
  } else {
    // Usuari no autenticat
    console.log("Usuari no autenticat");
  }
});

Explicació

  1. firebase.auth().onAuthStateChanged((user) => { ... }): Aquest mètode s'executa cada vegada que l'estat d'autenticació de l'usuari canvia.
  2. if (user) { ... } else { ... }: Si l'usuari està autenticat, es mostra la informació de l'usuari. Si no, es mostra un missatge indicant que l'usuari no està autenticat.

Exercicis pràctics

Exercici 1: Crear un nou usuari

Crea un formulari que permeti als usuaris registrar-se amb el seu correu electrònic i contrasenya. Implementa la funcionalitat per crear un nou usuari utilitzant Firebase Authentication.

Exercici 2: Actualitzar el perfil d'usuari

Afegeix funcionalitat al teu formulari per permetre als usuaris actualitzar el seu nom d'usuari i foto de perfil.

Exercici 3: Recuperació de contrasenyes

Implementa una funcionalitat que permeti als usuaris recuperar la seva contrasenya mitjançant un correu de recuperació.

Solucions

Solució a l'Exercici 1

document.getElementById("registerForm").addEventListener("submit", (event) => {
  event.preventDefault();
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
      var user = userCredential.user;
      console.log("Usuari creat:", user);
    })
    .catch((error) => {
      console.error("Error en crear l'usuari:", error.code, error.message);
    });
});

Solució a l'Exercici 2

document.getElementById("updateProfileForm").addEventListener("submit", (event) => {
  event.preventDefault();
  var displayName = document.getElementById("displayName").value;
  var photoURL = document.getElementById("photoURL").value;

  var user = firebase.auth().currentUser;

  user.updateProfile({
    displayName: displayName,
    photoURL: photoURL
  }).then(() => {
    console.log("Perfil actualitzat correctament");
  }).catch((error) => {
    console.error("Error en actualitzar el perfil:", error);
  });
});

Solució a l'Exercici 3

document.getElementById("resetPasswordForm").addEventListener("submit", (event) => {
  event.preventDefault();
  var emailAddress = document.getElementById("email").value;

  firebase.auth().sendPasswordResetEmail(emailAddress).then(() => {
    console.log("Correu de recuperació enviat");
  }).catch((error) => {
    console.error("Error en enviar el correu de recuperació:", error);
  });
});

Conclusió

En aquest tema, hem après com gestionar els usuaris en una aplicació que utilitza Firebase per a l'autenticació. Hem vist com crear, actualitzar, eliminar usuaris i com gestionar la sessió d'usuari. També hem après a implementar la funcionalitat de recuperació de contrasenyes. Aquests conceptes són fonamentals per a la gestió d'usuaris en qualsevol aplicació moderna. En el següent tema, explorarem la base de dades en temps real de Firebase.

◄ 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