Puedes permitir que tus usuarios se autentiquen con Firebase mediante sus cuentas de Facebook si integras el Acceso con Facebook en tu app. Puedes hacerlo si usas el SDK de Firebase para ejecutar el flujo de acceso o ejecutar el flujo del Acceso con Facebook de forma manual y pasar el token de acceso a Firebase.
Antes de comenzar
- Agrega Firebase a tu proyecto de JavaScript.
- En el sitio Facebook for Developers, obtén el ID de app y un Secret de app para tu aplicación.
- Habilita el Acceso con Facebook:
- En Firebase console, abre la sección Auth.
- En la pestaña Método de acceso, habilita el método de acceso con Facebook y especifica el ID de app y la clave secreta de la app que obtuviste de Facebook.
- Luego, asegúrate de que tu URI de redireccionamiento de OAuth (p. ej.,
my-app-12345.firebaseapp.com/__/auth/handler
) aparezca en la lista de URI de redireccionamiento de OAuth en la página de configuración de tu app en Facebook, en la sección Configuración, en Productos > Acceso con Facebook, del sitio Facebook for Developers.
Maneja el flujo de acceso con el SDK de Firebase
Si estás creando una aplicación web, la manera más fácil de autenticar a tus usuarios en Firebase con sus cuentas de Facebook es administrar el flujo de acceso con el SDK de Firebase JavaScript. Si deseas autenticar a un usuario en Node.js o en cualquier otro entorno que no sea de un navegador, debes manejar el flujo de acceso de forma manual.
Para manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:
- Crea una instancia del objeto proveedor de Facebook:
API modular web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
API con espacio de nombres web
var provider = new firebase.auth.FacebookAuthProvider();
- Opcional: Especifica los permisos adicionales de OAuth 2.0 que
deseas solicitarle al proveedor de autenticación. Para agregar un permiso, llama a
addScope
. Por ejemplo:API modular web
provider.addScope('user_birthday');
API con espacio de nombres web
provider.addScope('user_birthday');
- Opcional: Para ajustar el flujo de OAuth del proveedor según su idioma de preferencia sin pasar de forma explícita los parámetros OAuth personalizados pertinentes, actualiza el código de idioma en la instancia Auth antes de iniciar el flujo de OAuth. Por ejemplo:
API modular web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
API con espacio de nombres web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Opcional: Especifica los parámetros personalizados adicionales
del proveedor de OAuth que quieres enviar junto con la solicitud de OAuth. Para agregar un parámetro personalizado, llama a
setCustomParameters
en el proveedor inicializado con un objeto que contenga la clave que se indica en la documentación del proveedor de OAuth y su valor correspondiente. Por ejemplo:API modular web
provider.setCustomParameters({ 'display': 'popup' });
API con espacio de nombres web
provider.setCustomParameters({ 'display': 'popup' });
- Autentica con Firebase a través del objeto proveedor de Facebook. Puedes pedirles a los usuarios que accedan con sus cuentas de Facebook a través de una ventana emergente o redireccionándolos a la página de acceso. En dispositivos móviles, se prefiere el método de redireccionamiento.
- Para acceder con una ventana emergente, llama a
signInWithPopup
:API modular web
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
API con espacio de nombres web
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.
- Para acceder mediante el redireccionamiento a la página de acceso, llama a
signInWithRedirect
: Sigue las prácticas recomendadas cuando uses “signInWithRedirect”.API modular web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
API con espacio de nombres web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
cuando se cargue tu página:API modular web
import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
API con espacio de nombres web
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- Para acceder con una ventana emergente, llama a
Autentica con Firebase en una extensión de Chrome
Si desarrollas una app de extensión de Chrome, debes agregar el ID de la extensión de Chrome:
- Abre tu proyecto en Firebase console.
- En la sección Authentication, abre la página Sign-in method.
- Agrega un URI como el siguiente a la lista de dominios autorizados:
chrome-extension://CHROME_EXTENSION_ID
Solo las operaciones con ventanas emergentes (signInWithPopup
, linkWithPopup
y
reauthenticateWithPopup
) están disponibles para las extensiones de Chrome,
ya que estas no pueden usar redireccionamientos HTTP. Deberías llamar a estos métodos desde una página de secuencia de comandos en segundo plano en lugar de
una ventana emergente de acción en el navegador, ya que la ventana emergente de autenticación cancela la de acción del navegador. Los métodos
de ventana emergente solo se pueden usar en extensiones con
Manifest V2. El
Manifest V3 más reciente solo
permite secuencias de comandos en segundo plano en forma de service workers, que no pueden realizar operaciones de ventana
emergente.
En el archivo de manifiesto de tu extensión de Chrome, asegúrate de agregar la
URL https://apis.google.com
a la lista de entidades permitidas content_security_policy
.
Próximos pasos
Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.
-
En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto
Auth
. Luego podrás obtener la información de perfil básica del usuario a partir del objetoUser
. Consulta Administra usuarios en Firebase. En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, a partir de la variable
auth
, puedes obtener el ID del usuario único que accedió y usarlo para controlar a qué datos podrá acceder.
Para permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.
Para hacer que un usuario salga de la sesión, llama a
signOut
de la siguiente manera:
API modular web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
API con espacio de nombres web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });