Autenticación con Facebook

Clase 11 de 32 • Curso de Firebase para Web 2017

Fernando Daniel Jaime

student•

Hubiera quedado mejor si en lugar de eliminar el login de google quedan ambos funcionando. Para el ejemplo eliminar el usuario al tener el mismo mail no esta mal. Pero se pueden sincronizar ambas cuentas para que reconozcan al mismo usuario con algo de manejo de base de datos…

Gerardo Nava Pereda

student•

Completamente de acuerdo, mejor hubiera mantenido no sólo dos si no también 3 para ver como se hacia la sincronización de Facebook, Twitter y Google, incluso hasta con el Email. Muy mal estas clases de Autenticación. Incluso en otros medios gratuitos he encontrado mejores 😕

Andres Mauricio Shek Restrepo

student•

Si pensé lo mismo, pero si lo mantuve comentado. Ya cuando hice el de Twitter, preferí crear otro botón de inicio se sesíón para cada cuenta.

Rodolfo Sáenz

student•

Así quedó mi código JS. Con tres botones para login (Google, Facebook y Twitter) y un botón para logout.

var btnGLogin = document.getElementById("btnGLogin");
var btnFLogin = document.getElementById("btnFLogin");
var btnTLogin = document.getElementById("btnTLogin");
var btnLogout = document.getElementById("btnLogout");

firebase.auth().onAuthStateChanged(user => {

    if (user) {
        console.log("tenemos usuario");
        btnGLogin.style.display = "none";
        btnFLogin.style.display = "none";
        btnTLogin.style.display = "none";
        btnLogout.style.display = "block";
    } else {
        console.log("no tenemos usuario");
        btnGLogin.style.display = "block";
        btnFLogin.style.display = "block";
        btnTLogin.style.display = "block";
        btnLogout.style.display = "none";
    }
});

btnGLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnFLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnTLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.TwitterAuthProvider();
    //provider.addScope('public_profile');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnLogout.addEventListener("click", event => {
    event.preventDefault();

    firebase.auth().signOut()
        .then(() => alert("Se ha cerrado la sesion"));
});```

jhon de la rosa toxqui De la RosaToxqui

student•

a mi me salio con este codigo, si pude registrarme con twitter pero no me marca un correo en firebase con facebok y google si marca los correo pero en twitter no

var btnLogin = document.getElementById("btnLogin");
var btnLogout = document.getElementById("btnLogout");
console.log(btnLogout);





firebase.auth().onAuthStateChanged(function(user){
	console.log(user);
	if (user) {
		console.log('tenemos usuario');
		mostrarLogout();
	}else{
		console.log('no tenemos usuario ');
		mostrarLogin();

	}
})

btnLogin.addEventListener("click", function(){
	event.preventDefault();

	var provider = new firebase.auth.TwitterAuthProvider();
	 firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
var token = result.credential.accessToken;
var secret = result.credential.secret;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(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;
// ...
});


});


//onAuthStateChanged(function(user).funcion anonima  no tiene nombre especifico pero se hacen automaticamente 


btnLogout.addEventListener("click", function(){
	event.preventDefault();//para que la pagina no se recargue sola desde el principio 
	firebase.auth().signOut().then(function(){
		alert("se ha cerrado sesion")
	})	
})


function mostrarLogout(){
	console.log("funcion Logout ");
	btnLogout.style.display ="block"
	btnLogin.style.display = "none"
}
function mostrarLogin(){
	console.log("funcion Login");
	btnLogout.style.display ="none"
	btnLogin.style.display = "block"
}

Brian Anthony Sandoval Juárez

student•

a mi me sale este error:

auth.esm.js:121 POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=AIzaSyDfnA_28LUR-_bdyjHoDsZj3bMg0aEqGu8 400 ()

Diego Forero

Team Platzi•

Ese enlace me da 404 al parecer el archivo o endpoint no esta disponible.

Brian Anthony Sandoval Juárez

student•

Gracias

Javier Fdez

student•

Nada, no me sale, no se si es por que estoy en un servidor propio en lugar de el host de firebase, e añadido el enlace de la web a la lista pero algo se me escapa, ¿alguien mas esta como yo?

Diego Forero

Team Platzi•

Te lanza algún error en la consola del navegador? lo que no te funciona es el login con facebook? si es lo segundo entonces asegúrate que tu dominio usa https si no facebook no lo va a permitir, fue un restricción que impusieron hace un par de meses.

Rodolfo Orlando Lazo Vidaurre

student•

Javierfdez84 yo también lo hago con servidor local sin lanzar firebase serve y me funciona. Simplemente por descartar ya que no está indicado en el vídeo ¿Podría ser que tu app creada en Twitter no esté bien configurada ? Ten en cuenta que donde dice que pongas “Website url” debes de poner la url de devolución de llamada pero sin el : /auth/handler , es decir te debería de quedar algo así: y luego obviamente igual que con Facebook , en “Callback url” la url completa de devolución de llamada: /auth/handler

Eden Gomez Gress

student•

Buen dia companeros, trate de hacer el reto pero no pude. Cheque la documentacion y puse mi codigo de esta forma.

btnLogin.addEventListener("click", () => {
  event.preventDefault()
  const provider = new firebase.auth.TwitterAuthProvider();
 //(Iniciando Sesion con Google)...var provider = new firebase.auth.GoogleAuthProvider();
 //(Iniciando Sesion con Google)...provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
 //provider.addScope('public_profile');
 firebase.auth().signInWithPopup(provider)
 .then( (datosUsuario)=> {
   console.log(datosUsuario);
   var token = result.credential.accessToken;
   var secret = result.credential.secret;
   // The signed-in user info.
   var user = result.user;
  }).catch((error)=> {
   console.log(err);
    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;

  })
})

Solo que no hace el inicio de sesion con twitter, lo sigue haciendo con Facebook.

Caulquier sugerencia es bienvenida!

Andres Mauricio Shek Restrepo

student•

Saludos, ya pudiste resolver?

Brian Bentancourt

student•

Asi me quedo a mi 😄

Diego Alejandro Arevalo Valbuena

student•

No he podido arreglar este error cual podría ser la solución?

Gonzalo lopez

student•

al momento de iniciar sesión en con facebook
me sale esto:
"Can’t Load URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings"
ayuda por favor

David Toca

student•

debes ir a la configuración de la aplicación en Facebook y agregar el dominio de tu aplicación

Gonzalo lopez

student•

Gracias
había seguido todos lo pasos del vídeo , pero aun así tenia ese problema.
Reinicie la laptop y ya todo esta bien

var btnGLogin = document.getElementById("btnGLogin");
var btnFLogin = document.getElementById("btnFLogin");
var btnTLogin = document.getElementById("btnTLogin");
var btnLogout = document.getElementById("btnLogout");

firebase.auth().onAuthStateChanged(user => {

    if (user) {
        console.log("tenemos usuario");
        btnGLogin.style.display = "none";
        btnFLogin.style.display = "none";
        btnTLogin.style.display = "none";
        btnLogout.style.display = "block";
    } else {
        console.log("no tenemos usuario");
        btnGLogin.style.display = "block";
        btnFLogin.style.display = "block";
        btnTLogin.style.display = "block";
        btnLogout.style.display = "none";
    }
});

btnGLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnFLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('public_profile');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnTLogin.addEventListener("click", event => {
    event.preventDefault();

    var provider = new firebase.auth.TwitterAuthProvider();
    //provider.addScope('public_profile');

    //(opcional) defino en que leguaje le va a salir el Popup de autenticacion
    firebase.auth().languageCode = 'es';

    firebase.auth().signInWithPopup(provider)
        .then(datosUsuario => console.log(datosUsuario))
        .catch(err => console.log(err));
});

btnLogout.addEventListener("click", event => {
    event.preventDefault();

    firebase.auth().signOut()
        .then(() => alert("Se ha cerrado la sesion"));
});```

var btnLogin = document.getElementById("btnLogin");
var btnLogout = document.getElementById("btnLogout");
console.log(btnLogout);





firebase.auth().onAuthStateChanged(function(user){
	console.log(user);
	if (user) {
		console.log('tenemos usuario');
		mostrarLogout();
	}else{
		console.log('no tenemos usuario ');
		mostrarLogin();

	}
})

btnLogin.addEventListener("click", function(){
	event.preventDefault();

	var provider = new firebase.auth.TwitterAuthProvider();
	 firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
var token = result.credential.accessToken;
var secret = result.credential.secret;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(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;
// ...
});


});


//onAuthStateChanged(function(user).funcion anonima  no tiene nombre especifico pero se hacen automaticamente 


btnLogout.addEventListener("click", function(){
	event.preventDefault();//para que la pagina no se recargue sola desde el principio 
	firebase.auth().signOut().then(function(){
		alert("se ha cerrado sesion")
	})	
})


function mostrarLogout(){
	console.log("funcion Logout ");
	btnLogout.style.display ="block"
	btnLogin.style.display = "none"
}
function mostrarLogin(){
	console.log("funcion Login");
	btnLogout.style.display ="none"
	btnLogin.style.display = "block"
}

btnLogin.addEventListener("click", () => {
  event.preventDefault()
  const provider = new firebase.auth.TwitterAuthProvider();
 //(Iniciando Sesion con Google)...var provider = new firebase.auth.GoogleAuthProvider();
 //(Iniciando Sesion con Google)...provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
 //provider.addScope('public_profile');
 firebase.auth().signInWithPopup(provider)
 .then( (datosUsuario)=> {
   console.log(datosUsuario);
   var token = result.credential.accessToken;
   var secret = result.credential.secret;
   // The signed-in user info.
   var user = result.user;
  }).catch((error)=> {
   console.log(err);
    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;

  })
})

Autenticación con Facebook

Introducción a Firebase

Firebase: qué es

Documentación en Firebase para Web

Conectando un proyecto con Firebase

Consola de Firebase

Conexión manual desde la consola

Comprobación de la conexión

Conexión con firebase-tools

Conectar Firebase con otro proyecto en local

Authentication

Proveedores de autenticación

Autenticación con Google

Cierre sesión autenticación con Google

Autenticación con Facebook

Manejo de errores

Base de datos

Modelo no relacional, ¿cuándo usarlo?

Conectar la base de datos

Guardar información en la base de datos

Métodos para sobreescribir la base de datos

Leer un registro en Firebase Real Time

Agregar interacción al sitio web

Actualizar un registro en Firebase Real Time

Agregar más datos a la información del perfil del usuario

Reglas de seguridad

Tres niveles de seguridad de Firebase

Reglas de seguridad de Firebase

Reglas específicas para generar roles

Reglas adicionales para la indexación y validaciones

Roles

Roles de administrador

Aplicar reglas al proyecto

Storage

¿Qué es Storage?

Reto

Hosting

¿Qué es hosting?

Conclusiones del curso

Cloud Functions

Definición e Implementación de Cloud Functions