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

Introducció a l'autenticació de Firebase

Següent ►
►

Què és l'autenticació de Firebase?

L'autenticació de Firebase és un servei que permet als desenvolupadors autenticar els usuaris a les seves aplicacions de manera senzilla i segura. Proporciona diverses opcions d'autenticació, incloent-hi correu electrònic i contrasenya, autenticació amb xarxes socials (com Google, Facebook, Twitter), i fins i tot autenticació anònima.

Característiques clau:

  • Diversos mètodes d'autenticació: Suporta múltiples proveïdors d'identitat.
  • Gestió d'usuaris: Permet gestionar els usuaris de manera eficient.
  • Seguretat: Proporciona mecanismes de seguretat robustos per protegir les dades dels usuaris.
  • Integració fàcil: Es pot integrar fàcilment amb altres serveis de Firebase com Firestore, Realtime Database, i Cloud Functions.

Per què utilitzar l'autenticació de Firebase?

  • Simplicitat: Simplifica el procés d'autenticació, permetent als desenvolupadors centrar-se en altres aspectes de l'aplicació.
  • Seguretat: Proporciona una seguretat sòlida, incloent-hi la verificació de correu electrònic i la recuperació de contrasenyes.
  • Escalabilitat: Pot gestionar un gran nombre d'usuaris sense problemes de rendiment.
  • Integració: Es pot integrar fàcilment amb altres serveis de Firebase, oferint una solució completa per a les aplicacions mòbils i web.

Com funciona l'autenticació de Firebase?

L'autenticació de Firebase funciona mitjançant la creació i gestió de comptes d'usuari que poden ser autenticats utilitzant diversos mètodes. Aquests comptes es poden crear i gestionar a través de la consola de Firebase o mitjançant l'API de Firebase Authentication.

Flux bàsic d'autenticació:

  1. Registre d'usuari: L'usuari es registra a l'aplicació utilitzant un mètode d'autenticació (per exemple, correu electrònic i contrasenya).
  2. Inici de sessió: L'usuari inicia sessió a l'aplicació utilitzant les seves credencials.
  3. Verificació: Firebase verifica les credencials de l'usuari i retorna un token d'autenticació.
  4. Accés a recursos: L'usuari autenticat pot accedir als recursos protegits de l'aplicació.

Exemple pràctic: Configuració bàsica de l'autenticació de Firebase

Pas 1: Afegir Firebase al teu projecte

  1. Crear un projecte a la consola de Firebase:

  2. Afegir l'SDK de Firebase al teu projecte:

    • Segueix les instruccions per afegir l'SDK de Firebase a la teva aplicació (Android, iOS, o web).

Pas 2: Configurar l'autenticació a la consola de Firebase

  1. Activar els proveïdors d'autenticació:
    • A la consola de Firebase, ves a la secció "Authentication".
    • Selecciona la pestanya "Sign-in method".
    • Activa els proveïdors d'autenticació que vulguis utilitzar (per exemple, correu electrònic i contrasenya).

Pas 3: Implementar l'autenticació a l'aplicació

Exemple de codi per a l'autenticació amb correu electrònic i contrasenya (JavaScript):

// Importar Firebase
import firebase from "firebase/app";
import "firebase/auth";

// 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"
};

// Inicialitzar Firebase
firebase.initializeApp(firebaseConfig);

// Funció per registrar un nou usuari
const registerUser = (email, password) => {
  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
      // Usuari registrat
      const user = userCredential.user;
      console.log("Usuari registrat:", user);
    })
    .catch((error) => {
      console.error("Error en registrar l'usuari:", error);
    });
};

// Funció per iniciar sessió
const loginUser = (email, password) => {
  firebase.auth().signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      // Usuari autenticat
      const user = userCredential.user;
      console.log("Usuari autenticat:", user);
    })
    .catch((error) => {
      console.error("Error en iniciar sessió:", error);
    });
};

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

Explicació del codi:

  1. Importar Firebase: Importem els mòduls necessaris de Firebase.
  2. Configuració de Firebase: Proporcionem la configuració del nostre projecte de Firebase.
  3. Inicialitzar Firebase: Inicialitzem Firebase amb la configuració proporcionada.
  4. Funció per registrar un nou usuari: Utilitzem createUserWithEmailAndPassword per registrar un nou usuari amb correu electrònic i contrasenya.
  5. Funció per iniciar sessió: Utilitzem signInWithEmailAndPassword per iniciar sessió amb correu electrònic i contrasenya.

Exercici pràctic

Objectiu:

Implementar l'autenticació amb correu electrònic i contrasenya en una aplicació web utilitzant Firebase.

Passos:

  1. Crea un projecte a la consola de Firebase.
  2. Afegeix l'SDK de Firebase al teu projecte web.
  3. Activa l'autenticació amb correu electrònic i contrasenya a la consola de Firebase.
  4. Implementa les funcions de registre i inici de sessió a la teva aplicació web.

Solució:

<!DOCTYPE html>
<html>
<head>
  <title>Autenticació de Firebase</title>
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
</head>
<body>
  <h1>Autenticació de Firebase</h1>
  <div>
    <h2>Registrar-se</h2>
    <input type="email" id="registerEmail" placeholder="Correu electrònic">
    <input type="password" id="registerPassword" placeholder="Contrasenya">
    <button onclick="registerUser()">Registrar-se</button>
  </div>
  <div>
    <h2>Iniciar sessió</h2>
    <input type="email" id="loginEmail" placeholder="Correu electrònic">
    <input type="password" id="loginPassword" placeholder="Contrasenya">
    <button onclick="loginUser()">Iniciar sessió</button>
  </div>

  <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"
    };

    // Inicialitzar Firebase
    firebase.initializeApp(firebaseConfig);

    // Funció per registrar un nou usuari
    const registerUser = () => {
      const email = document.getElementById('registerEmail').value;
      const password = document.getElementById('registerPassword').value;
      firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log("Usuari registrat:", user);
        })
        .catch((error) => {
          console.error("Error en registrar l'usuari:", error);
        });
    };

    // Funció per iniciar sessió
    const loginUser = () => {
      const email = document.getElementById('loginEmail').value;
      const password = document.getElementById('loginPassword').value;
      firebase.auth().signInWithEmailAndPassword(email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log("Usuari autenticat:", user);
        })
        .catch((error) => {
          console.error("Error en iniciar sessió:", error);
        });
    };
  </script>
</body>
</html>

Explicació del codi:

  1. HTML: Creem un formulari senzill amb camps per al correu electrònic i la contrasenya, i botons per registrar-se i iniciar sessió.
  2. JavaScript: Implementem les funcions registerUser i loginUser per gestionar el registre i l'inici de sessió utilitzant Firebase Authentication.

Conclusió

En aquesta secció, hem après què és l'autenticació de Firebase, per què és útil, com funciona, i hem implementat un exemple pràctic d'autenticació amb correu electrònic i contrasenya. Aquest coneixement és fonamental per gestionar la seguretat i l'accés dels usuaris a les nostres aplicacions. En la següent secció, explorarem com implementar l'autenticació amb correu electrònic i contrasenya en més detall.

◄ 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