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

Autenticació amb xarxes socials

Següent ►
►

Introducció

L'autenticació amb xarxes socials permet als usuaris iniciar sessió a la teva aplicació utilitzant els seus comptes de xarxes socials com Google, Facebook, Twitter, entre d'altres. Firebase facilita la integració d'aquestes opcions d'autenticació, proporcionant una experiència d'usuari més fluida i reduint la fricció en el procés de registre i inici de sessió.

Configuració prèvia

Abans de començar, assegura't de tenir configurat el teu projecte de Firebase i haver seguit els passos bàsics d'autenticació. Si no ho has fet, revisa els temes anteriors del mòdul d'autenticació.

Autenticació amb Google

Pas 1: Configuració a la consola de Firebase

  1. Accedeix a la consola de Firebase.
  2. Selecciona el teu projecte.
  3. Navega a la secció "Authentication".
  4. Fes clic a la pestanya "Sign-in method".
  5. Activa el proveïdor de Google.
  6. Proporciona l'ID de client i el secret de client que pots obtenir des de la Google Developer Console.

Pas 2: Integració al codi

Exemple en JavaScript

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

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

firebase.initializeApp(firebaseConfig);

// Proveïdor de Google
const provider = new firebase.auth.GoogleAuthProvider();

// Funció per iniciar sessió amb Google
const signInWithGoogle = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithGoogle();

Pas 3: Prova l'autenticació

  1. Desplega la teva aplicació.
  2. Fes clic al botó d'inici de sessió amb Google.
  3. Segueix les instruccions per iniciar sessió amb el teu compte de Google.

Autenticació amb Facebook

Pas 1: Configuració a la consola de Firebase

  1. Accedeix a la consola de Firebase.
  2. Selecciona el teu projecte.
  3. Navega a la secció "Authentication".
  4. Fes clic a la pestanya "Sign-in method".
  5. Activa el proveïdor de Facebook.
  6. Proporciona l'ID de l'aplicació i el secret de l'aplicació que pots obtenir des de la Facebook Developer Console.

Pas 2: Integració al codi

Exemple en JavaScript

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

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

firebase.initializeApp(firebaseConfig);

// Proveïdor de Facebook
const provider = new firebase.auth.FacebookAuthProvider();

// Funció per iniciar sessió amb Facebook
const signInWithFacebook = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithFacebook();

Pas 3: Prova l'autenticació

  1. Desplega la teva aplicació.
  2. Fes clic al botó d'inici de sessió amb Facebook.
  3. Segueix les instruccions per iniciar sessió amb el teu compte de Facebook.

Autenticació amb Twitter

Pas 1: Configuració a la consola de Firebase

  1. Accedeix a la consola de Firebase.
  2. Selecciona el teu projecte.
  3. Navega a la secció "Authentication".
  4. Fes clic a la pestanya "Sign-in method".
  5. Activa el proveïdor de Twitter.
  6. Proporciona la clau de l'API i el secret de l'API que pots obtenir des de la Twitter Developer Console.

Pas 2: Integració al codi

Exemple en JavaScript

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

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

firebase.initializeApp(firebaseConfig);

// Proveïdor de Twitter
const provider = new firebase.auth.TwitterAuthProvider();

// Funció per iniciar sessió amb Twitter
const signInWithTwitter = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithTwitter();

Pas 3: Prova l'autenticació

  1. Desplega la teva aplicació.
  2. Fes clic al botó d'inici de sessió amb Twitter.
  3. Segueix les instruccions per iniciar sessió amb el teu compte de Twitter.

Exercicis pràctics

  1. Implementa l'autenticació amb Google a la teva aplicació.
  2. Implementa l'autenticació amb Facebook a la teva aplicació.
  3. Implementa l'autenticació amb Twitter a la teva aplicació.
  4. Prova cada mètode d'autenticació i assegura't que els usuaris poden iniciar sessió correctament.

Solucions

Solució per a l'exercici 1

// Proveïdor de Google
const provider = new firebase.auth.GoogleAuthProvider();

// Funció per iniciar sessió amb Google
const signInWithGoogle = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithGoogle();

Solució per a l'exercici 2

// Proveïdor de Facebook
const provider = new firebase.auth.FacebookAuthProvider();

// Funció per iniciar sessió amb Facebook
const signInWithFacebook = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithFacebook();

Solució per a l'exercici 3

// Proveïdor de Twitter
const provider = new firebase.auth.TwitterAuthProvider();

// Funció per iniciar sessió amb Twitter
const signInWithTwitter = () => {
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      console.log(result.user);
    })
    .catch((error) => {
      console.error(error);
    });
};

// Crida a la funció d'inici de sessió
signInWithTwitter();

Conclusió

L'autenticació amb xarxes socials és una eina poderosa per millorar l'experiència d'usuari a la teva aplicació. Firebase facilita la integració amb proveïdors populars com Google, Facebook i Twitter. Amb els exemples i exercicis proporcionats, hauràs après a configurar i implementar aquests mètodes d'autenticació a la teva aplicació. En el següent tema, explorarem com gestionar els usuaris autenticats.

◄ 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