Cierre sesión autenticación con Google

Clase 10 de 32 • Curso de Firebase para Web 2017

Saúl Gómez Navarrete

student•

Yo lo solucioné así

const btnLogin = document.getElementById('btnLogin');
const btnLogout = document.getElementById('btnLogout');
firebase.auth().onAuthStateChanged((user) => {
  console.log(user);
  if (user) {
    btnLogin.style.display = 'none';
    btnLogout.style.display = 'block';
  } else {
    btnLogin.style.display = 'block';
    btnLogout.style.display = 'none';
  }
});

// Event Listeners

btnLogout.addEventListener('click', (evt) => {
  btnLogin.style.display = 'block';
  btnLogout.style.display = 'none';
  firebase.auth().signOut();
});

btnLogin.addEventListener('click', (evt) => {
  evt.preventDefault();
  const provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  firebase.auth().signInWithPopup(provider).then((data) => {
    btnLogin.style.display = 'none';
    btnLogout.style.display = 'block';
    // console.log(data);
  }).catch((error) => {
    console.log(error);
  });
});```

Luis Rodriguez

student•

con la siguiente función se puede cerrar sesión

firebase.auth().signOut()

Eddy Arellanes

student•

Mi código para para el logout, me sorprende lo fácil que es manejar esto x)

//This Open Google Account Authentication method
var btnLogin = document.getElementById('btnLogin')
var btnLogout = document.getElementById('btnLogout')

btnLogin.addEventListener('click', function(){
    //Handle Funtionallity
    event.preventDefault()  
    //Specify that the only permission I want to google sign is user contacts
    var provider = new firebase.auth.GoogleAuthProvider()
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
    firebase.auth().signInWithPopup(provider)
    .then(function(userData){
        console.log(userData)
    })
    .catch(function(error){
        console.log(error)
    })
})
btnLogout.addEventListener('click', function(){
    //Funcionallity
    event.preventDefault()  
    firebase.auth().signOut()
  
  
})

//When a User for any method of Authentication Init or Close sesion, this appear
firebase.auth().onAuthStateChanged(function(user){
    if(user){
        //If User is authenticated
        btnLogin.style.display = "none"
        btnLogout.style.display = "block"
    }else{        
        btnLogin.style.display = "block"
        btnLogout.style.display = "none"
    }
    
})

Arístides Caballero Alfaro

student•

gracias por tu código, me funciono perfecto!

Eddy Arellanes

student•

Me alegro 😄

Juan Manuel Viveros Martinez

student•

Dejo el código de como iniciar y cerrar sesión.

var btnLogin = document.getElementById('btnLogin');
var btnLogout = document.getElementById('btnLogout');

firebase.auth().onAuthStateChanged(function(user){
  if (user) {
    //console.log(user);
    //obtengo el nombre del usuario en sesion
    var DisplayNameUser = user.displayName;
    //muestro el nombre del usuario en pantalla
    btnLogin.innerHTML = DisplayNameUser;
  }else {
    btnLogin.innerHTML = "Iniciar sesión";
    console.log("no tenemos usuario");
  }
});

//Agrego evento al enlace de iniciar sesion
btnLogin.addEventListener("click", function(){
  //event.preventDefault();
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  //defino en que leguaje le va a salir el Popup de autenticacion
  firebase.auth().languageCode = 'es';
  firebase.auth().signInWithPopup(provider).then(function(datosUsuario){
    //console.log(datosUsuario);
    //agrego el texto al enlace de cerrar cesion
    btnLogout.innerHTML = "Cerrar sesión";
  }).catch(function(){
    console.log("error");
  })
});

//agrego evento click al enlace de cerrar sesion
btnLogout.addEventListener("click", function(){
  firebase.auth().signOut().then(function() {
    // Sign-out successful.
    btnLogin.innerHTML = "Iniciar sesión";
    btnLogout.innerHTML = "";

  }).catch(function(error) {
    // An error happened.
    console.log(error);
  });
});

Andre Rivera

student•

Así es como me salió a mi =) saludos gente!

firebase.auth().onAuthStateChanged(function(user){
    var login= document.getElementById('login')
    var unLogin=document.getElementById('un-login')
    console.log(user)
    if(user ){
        console.log('Usuario Conectado')
        mostrarLogout()
        
    }
    else{
        console.log('Usuario no Conectado')
        mostrarLogin()
    }
    function mostrarLogout() {
        console.log("mostrar Logout");
        unLogin.style.display = "block";
        login.style.display = "none";
    }
    function mostrarLogin() {
        console.log("mostrar login");
        unLogin.style.display = "none";
        login.style.display = "block";
    }
})```

José Tuzinkievicz

student•

Al iniciar sesión por segunda vez ingresa sin elegir la cuenta. Para que aparezca el popup y poder elegir otra cuenta, agregué las líneas al objeto provider:

  provider.setCustomParameters({
    prompt: 'select_account'
  });

Julio Camacho

student•

Al iniciar sesión ya me pone la misma cuenta por defecto, como le hago para que me pida que escoja una?

Camilo Gonzalez

student•

No me está actualizando automáticamente luego de hacer modificaciones en el archivo “index.js”, ni siquiera si cierro el “serve” de firebase, la consola, y vuelvo a “lanzar” firebase serv y a abrir abrir navegador nuevamente.
Lo único que puedo hacer es borrar los temporales del navegador y ahí si toma los cambios.
Estoy usando linux “Manjaro” con Google Chrome.
Alguna ayuda?

Camilo Gonzalez

student•

Encontré la respuesta en otro chat del curso:
“Yo mantengo las dev tools de chrome abiertas y en la pestaña network hay una opción de desactivar cache, con esto no me da problema ni el css ni el js”

Brian Bentancourt

student•

dejo una forma mas prolija de escribir el codigo

function login(userData){
	console.log(userData)
}

function error(err){
	console.log(err)
}

btnLogin.addEventListener('click', function(){
	event.preventDefault()
	const provider = new firebase.auth.GoogleAuthProvider()
	provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
	firebase.auth().languageCode = 'es';
	firebase.auth().signInWithPopup(provider)
	.then(login)
	.catch(error)
})

Daniel Pereira Perez

student•

Una alternativa para usar un solo botón

var btn_login = document.getElementById('btn_login');
var user;

btn_login.addEventListener('click', function() {
  event.preventDefault

  if (user) {
    // logout
    firebase.auth().signOut();
  } else {
    // provider by google
    var provider = new firebase.auth.GoogleAuthProvider()
    // get access to contacts
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly')

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

// Change state on login
firebase.auth().onAuthStateChanged( function(userLogged) {
  // if is logged 
  if ( userLogged ) {
    btn_login.innerHTML = 'Cerrar Sesión';
  } else {
    // if don't exist
    btn_login.innerHTML = 'Iniciar sesión'
  }
  // user is user or null
  user = userLogged;
});

const btnLogin = document.getElementById('btnLogin');
const btnLogout = document.getElementById('btnLogout');
firebase.auth().onAuthStateChanged((user) => {
  console.log(user);
  if (user) {
    btnLogin.style.display = 'none';
    btnLogout.style.display = 'block';
  } else {
    btnLogin.style.display = 'block';
    btnLogout.style.display = 'none';
  }
});

// Event Listeners

btnLogout.addEventListener('click', (evt) => {
  btnLogin.style.display = 'block';
  btnLogout.style.display = 'none';
  firebase.auth().signOut();
});

btnLogin.addEventListener('click', (evt) => {
  evt.preventDefault();
  const provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  firebase.auth().signInWithPopup(provider).then((data) => {
    btnLogin.style.display = 'none';
    btnLogout.style.display = 'block';
    // console.log(data);
  }).catch((error) => {
    console.log(error);
  });
});```

//This Open Google Account Authentication method
var btnLogin = document.getElementById('btnLogin')
var btnLogout = document.getElementById('btnLogout')

btnLogin.addEventListener('click', function(){
    //Handle Funtionallity
    event.preventDefault()  
    //Specify that the only permission I want to google sign is user contacts
    var provider = new firebase.auth.GoogleAuthProvider()
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
    firebase.auth().signInWithPopup(provider)
    .then(function(userData){
        console.log(userData)
    })
    .catch(function(error){
        console.log(error)
    })
})
btnLogout.addEventListener('click', function(){
    //Funcionallity
    event.preventDefault()  
    firebase.auth().signOut()
  
  
})

//When a User for any method of Authentication Init or Close sesion, this appear
firebase.auth().onAuthStateChanged(function(user){
    if(user){
        //If User is authenticated
        btnLogin.style.display = "none"
        btnLogout.style.display = "block"
    }else{        
        btnLogin.style.display = "block"
        btnLogout.style.display = "none"
    }
    
})

var btnLogin = document.getElementById('btnLogin');
var btnLogout = document.getElementById('btnLogout');

firebase.auth().onAuthStateChanged(function(user){
  if (user) {
    //console.log(user);
    //obtengo el nombre del usuario en sesion
    var DisplayNameUser = user.displayName;
    //muestro el nombre del usuario en pantalla
    btnLogin.innerHTML = DisplayNameUser;
  }else {
    btnLogin.innerHTML = "Iniciar sesión";
    console.log("no tenemos usuario");
  }
});

//Agrego evento al enlace de iniciar sesion
btnLogin.addEventListener("click", function(){
  //event.preventDefault();
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  //defino en que leguaje le va a salir el Popup de autenticacion
  firebase.auth().languageCode = 'es';
  firebase.auth().signInWithPopup(provider).then(function(datosUsuario){
    //console.log(datosUsuario);
    //agrego el texto al enlace de cerrar cesion
    btnLogout.innerHTML = "Cerrar sesión";
  }).catch(function(){
    console.log("error");
  })
});

//agrego evento click al enlace de cerrar sesion
btnLogout.addEventListener("click", function(){
  firebase.auth().signOut().then(function() {
    // Sign-out successful.
    btnLogin.innerHTML = "Iniciar sesión";
    btnLogout.innerHTML = "";

  }).catch(function(error) {
    // An error happened.
    console.log(error);
  });
});

firebase.auth().onAuthStateChanged(function(user){
    var login= document.getElementById('login')
    var unLogin=document.getElementById('un-login')
    console.log(user)
    if(user ){
        console.log('Usuario Conectado')
        mostrarLogout()
        
    }
    else{
        console.log('Usuario no Conectado')
        mostrarLogin()
    }
    function mostrarLogout() {
        console.log("mostrar Logout");
        unLogin.style.display = "block";
        login.style.display = "none";
    }
    function mostrarLogin() {
        console.log("mostrar login");
        unLogin.style.display = "none";
        login.style.display = "block";
    }
})```

function login(userData){
	console.log(userData)
}

function error(err){
	console.log(err)
}

btnLogin.addEventListener('click', function(){
	event.preventDefault()
	const provider = new firebase.auth.GoogleAuthProvider()
	provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
	firebase.auth().languageCode = 'es';
	firebase.auth().signInWithPopup(provider)
	.then(login)
	.catch(error)
})

var btn_login = document.getElementById('btn_login');
var user;

btn_login.addEventListener('click', function() {
  event.preventDefault

  if (user) {
    // logout
    firebase.auth().signOut();
  } else {
    // provider by google
    var provider = new firebase.auth.GoogleAuthProvider()
    // get access to contacts
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly')

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

// Change state on login
firebase.auth().onAuthStateChanged( function(userLogged) {
  // if is logged 
  if ( userLogged ) {
    btn_login.innerHTML = 'Cerrar Sesión';
  } else {
    // if don't exist
    btn_login.innerHTML = 'Iniciar sesión'
  }
  // user is user or null
  user = userLogged;
});

Cierre sesión autenticación con Google

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