¿Cómo implementar el inicio de sesión de Facebook en su aplicación web con Firebase?

Firebase ofrece una gran cantidad de opciones para implementar Login en su aplicación. Algunos de los cuales son:

• Usando el correo electrónico.
• Usando el número de teléfono.
• Usando Facebook.
• Uso de Google, etc

La mejor parte es que no tiene que preocuparse por manejar el flujo de inicio de sesión, Firebase se encarga de eso.

Acercarse:

En primer lugar, cree un proyecto de Firebase siguiendo estos pasos:

• Vaya a https://console.firebase.google.com/ e inicie sesión con su cuenta de Google.
• Cree un proyecto en Firebase.
• Agregue el kit de desarrollo de software Firebase (SDK) en su aplicación.

<!– Inserte estos scripts dentro de su etiqueta de cuerpo –>

<cuerpo>

<!–Este es el script más importante que debe agregarse –>

<secuencia de comandos src=”/__/firebase/7.14.4/firebase-app.js”></secuencia de comandos>

<!– Para usar el inicio de sesión de Google, agregue este script –>

<script src=”/__/firebase/7.14.4/firebase-auth.js”></script>
</body>

• Ahora que hemos agregado estos scripts en nuestra aplicación, ahora inicializaremos Firebase en nuestra aplicación.
• En la consola Firebase, vaya a la configuración de la aplicación, desde allí copie el objeto de configuración de la aplicación y péguelo en su código.
• El objeto de configuración de la aplicación se ve así.

var firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "the-sender-id",
  appId: "the-app-id",
  measurementId: "G-measurement-id",
};

• Si siguió estos pasos correctamente, su aplicación se registrará en Firebase.

Ahora habilitaremos el inicio de sesión de Facebook en nuestra aplicación siguiendo estos pasos:

• Abra Facebook para desarrolladores y cree una nueva aplicación.
• Después de crear la aplicación, vaya a la configuración básica y podrá obtener su ID de aplicación y un secreto de aplicación desde allí.
• Vaya a la consola de Firebase y abra la sección Auth
• Habilite el inicio de sesión de Facebook en la pestaña de método de inicio de sesión e ingrese su ID de aplicación y el secreto de la aplicación allí.
• Firebase le proporcionará su URI de redireccionamiento de OAuth, actualice este URI en la configuración de Facebook:
  Producto -> Configuración -> URI de redireccionamiento de OAuth válidos.
• En su aplicación, cree un objeto de proveedor de Facebook para manejar el flujo de inicio de sesión.

const FacebookAuth = new firebase.auth.FacebookAuthProvider();

• Autentica al usuario usando la instancia del objeto que creaste con Firebase.
• Puede redirigir al usuario a la página de inicio de sesión o abrir una ventana emergente.

firebase.auth().signInWithPopup(FacebookAuth); //Para iniciar sesión con ventana emergente.
firebase.auth().signInWithRedirect(FacebookAuth);//Para iniciar sesión con redirección.

• El método de inicio de sesión de Facebook está implementado en su aplicación, ahora está listo para comenzar.

Ejemplo:

Crearemos una aplicación web simple basada en reaccionar con solo el botón de inicio de sesión.

Código para el componente del botón:

import React, { Component } from "react";
import firebase from 'firebase';
  
class tutorial extends Component{
render(){
return(
<div>
   <button> {
           
         // Facebook provider object is created here.
          const FacebookAuth = 
              new firebase.auth.FacebookAuthProvider();
               
         // using the object we will authenticate the user.
           
             firebase.auth().signInWithPopup(FacebookAuth);
              }} >
          Sign in with Facebook
    </button>
 </div>
   );
  }
 }
 export default tutorial;

Código para su archivo Firebase.ts:

import * as firebase from 'firebase';
const firebaseConfig = {
  apiKey: "****",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://*****.firebaseio.com",
    projectId: "****",
    storageBucket: "****.appspot.com",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"
};
class Firebase {
  constructor() {
    firebase.initializeApp(firebaseConfig);
  }
}
  
export default Firebase;

Producción: