Autentica mediante el Acceso con Facebook y JavaScript
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.
En la pestaña Método de acceso, habilita el método de acceso con Facebook y especifica el ID de la app y el secreto de 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 compilando 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:
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:
Opcional: Para ajustar el 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:
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:
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:
firebase
.auth()
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// The signed-in user info.
var user = result.user;
// 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;
// ...
});
Además, ten en cuenta que puedes recuperar el token OAuth del proveedor de Facebook que se puede usar para obtener datos adicionales mediante las API de Facebook.
Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta la documentación de referencia de Auth.
Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect como se indica a continuación:
Luego, para recuperar el token de OAuth del proveedor de Facebook, puedes llamar a
getRedirectResult cuando se cargue tu página:
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;
}).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 la documentación de referencia de Auth.
Maneja errores de cuentas que ya existen con otras credenciales
Si habilitaste la configuración Una cuenta por dirección de correo electrónico en Firebase console, aparecerá el error auth/account-exists-with-different-credential junto con un objeto AuthCredential (token de acceso de Facebook) cuando un usuario trate de acceder a un proveedor (como Facebook) con un correo electrónico que ya está vinculado al proveedor de otro usuario de Firebase (como Google). Para completar el acceso al proveedor deseado, el usuario primero debe acceder al proveedor existente (Google) y luego establecer el vínculo con el AuthCredential (token acceso de Facebook).
Modo de ventanas emergentes
Si usas signInWithPopup, puedes manejar los errores auth/account-exists-with-different-credential con un código como el siguiente:
// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
// An error happened.
if (error.code === 'auth/account-exists-with-different-credential') {
// Step 2.
// User's email already exists.
// The pending Facebook credential.
var pendingCred = error.credential;
// The provider account's email address.
var email = error.email;
// Get sign-in methods for this email.
auth.fetchSignInMethodsForEmail(email).then(function(methods) {
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[0] === 'password') {
// Asks the user their password.
// In real scenario, you should handle this asynchronously.
var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
auth.signInWithEmailAndPassword(email, password).then(function(result) {
// Step 4a.
return result.user.linkWithCredential(pendingCred);
}).then(function() {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
return;
}
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = getProviderForProviderId(methods[0]);
// At this point, you should let the user know that they already has an account
// but with a different provider, and let them validate the fact they want to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
auth.signInWithPopup(provider).then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account they own.
// Step 4b.
// Link to Facebook credential.
// As we have access to the pending credential, we can directly call the link method.
result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
});
});
}
});
Modo de redireccionamiento
Este error se maneja de manera similar en el modo de redireccionamiento, con la diferencia de que la credencial pendiente debe almacenarse en caché entre acciones de redireccionamiento de páginas (por ejemplo, el uso de almacenamiento de sesión).
Avanzado: Administra el flujo de acceso manualmente
También puedes autenticar con Firebase con una cuenta de Facebook. Para ello, debes administrar el flujo de acceso con el SDK JavaScript del Acceso con Facebook:
Para integrar el servicio de Acceso con Facebook en tu app, sigue las indicaciones de los documentos para programadores.
Asegúrate de configurar el Acceso con Facebook con tu ID de la app de Facebook:
<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
FB.init({
/**********************************************************************
* TODO(Developer): Change the value below with your Facebook app ID. *
**********************************************************************/
appId : '<YOUR_FACEBOOK_APP_ID>',
status : true,
xfbml : true,
version : 'v2.6'
});
</script>
También se configura un agente de escucha en el estado de autenticación de Facebook:
En la devolución de llamada de estado de la autenticación con Facebook, intercambia el token de autenticación de la respuesta de autenticación de Facebook por una credencial de Firebase y accede con Firebase:
function checkLoginState(response) {
if (response.authResponse) {
// User is signed-in Facebook.
var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
unsubscribe();
// Check if we are already signed-in Firebase with the correct user.
if (!isUserEqual(response.authResponse, firebaseUser)) {
// Build Firebase credential with the Facebook auth token.
var credential = firebase.auth.FacebookAuthProvider.credential(
response.authResponse.accessToken);
// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
.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;
// ...
});
} else {
// User is already signed-in Firebase with the correct user.
}
});
} else {
// User is signed-out of Facebook.
firebase.auth().signOut();
}
}
Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta la documentación de referencia de Auth.
También debes verificar que el usuario de Facebook no haya accedido previamente a Firebase, para evitar una nueva autenticación innecesaria:
function isUserEqual(facebookAuthResponse, firebaseUser) {
if (firebaseUser) {
var providerData = firebaseUser.providerData;
for (var i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
providerData[i].uid === facebookAuthResponse.userID) {
// We don't need to re-auth the Firebase connection.
return true;
}
}
}
return false;
}
Para autenticar con Firebase en una aplicación de Node.js:
Inicia la sesión del usuario con su cuenta de Facebook y obtén su token de acceso de Facebook. Por ejemplo, haz que el usuario acceda en un navegador, como se describe en la sección Administra el flujo de acceso de manera manual, pero envía el token de acceso a tu aplicación de Node.js en lugar de usarlo en la app cliente.
Después de obtener el token de ID de Facebook del usuario, úsalo para crear un objeto de
credencial y haz que el usuario acceda con la credencial:
// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
.then((result) => {
// Signed in
var credential = result.credential;
// ...
})
.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;
// ...
});
En la sección Aut., abre la página Método de acceso.
Agrega un URI como el siguiente a la lista de dominios autorizados:
chrome-extension://CHROME_EXTENSION_ID
Solo las operaciones con ventanas emergentes (signInWithPopup y linkWithPopup) 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 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.
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 lista de anunciantes permitidos content_security_policy.
Personaliza el dominio de redireccionamiento para acceder a Facebook
Cuando crees un proyecto, Firebase le otorgará un subdominio único: https://my-app-12345.firebaseapp.com.
También se usará como mecanismo de redireccionamiento para acceder a OAuth. Todos los proveedores de OAuth admitidos deberían permitir el dominio. Sin embargo, es probable que los usuarios vean ese dominio cuando accedan a Facebook antes de que se los redireccione a la aplicación; p. ej.: Continúa a https://my-app-12345.firebaseapp.com.
Sigue estos pasos para que la URL del mensaje muestre un dominio personalizado; p. ej.: Continúa a https://auth.custom.domain.com
Crea un registro CNAME para el dominio personalizado que dirija al subdominio del proyecto en firebaseapp.com:
Agrega tu dominio personalizado a la lista de dominios autorizados en Firebase console: auth.custom.domain.com.
Incluye la URL de la página de redireccionamiento en la lista blanca de la consola para desarrolladores de Facebook o en la página de configuración de OAuth. Podrás acceder a ella desde tu dominio personalizado: https://auth.custom.domain.com/__/auth/handler.
Cuando inicialices la biblioteca JavaScript, especifica el dominio personalizado en el campo authDomain:
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. Puedes obtener la información básica de perfil del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.
En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID del usuario único que accedió a partir de la variable auth y usarlo para controlar a qué datos podrá acceder.
