Autenticación con Google

Clase 9 de 32 • Curso de Firebase para Web 2017

Resumen

Una vez habilitado el inicio de sesión con Google, puedes incorporarlo a tu proyecto. Comienza a familiarizarte con los principales métodos de la autenticación de Firebase:

Saber si ya tenemos algún inicio de sesión
Mantener la sesión aunque el navegador se esté actualizando
Saber en qué momento está cambiando la sesión

Matias Cabido

student•

Deberían crear una cuenta para este tipo de proyectos y no usar cuentas personales, ya que cuando muestra la consola, aveces tiene que aplicar blur a los datos personales 😦

Miguel Angel Luna Nájera

teacher•

Totalmente de acuerdo 😄

Neider Rafael Tapia Avila

student•

Saludos, No entiendo algo, si los videos anteriores nos conectamos por terminal y eliminamos el script de inicializacion de firebase del Html (imagino que ese era el fin).
Ahora es necesario volver a colocar el Script de Inicializacion. para usar los SDK individuales?. no le veo el sentido de hacer lo anterior

Jose Luis Orozco Mejia

student•

Hola nrtapia0, en el script que se llamaba anteriormente no solo se inicializaba firebase, si no, que ademas se cargaban todas las funciones para interactuar con firebase (Autenticación, Bases de datos, Hosting, Storage, etc) y esto lo hace un script bastante pesado. Lo que se hace ahora por recomendación de google es agregar el script basico de firebase mas el script de cada librerías de firebase que fueses a usar, eso hace mas liviana la carga de tu aplicación.

Nicolas Gonzalez

student•

Estoy exactamente en la misma disyuntiva tengo que crear una pequeña base de datos y login de usuarios definidos por mi

Juan Manuel Viveros Martinez

student•

Me funciono todo correctamente, les dejo el codigo,

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

firebase.auth().onAuthStateChanged(function(user){
  if (user) {
    console.log(user);
    //nombre del usuario
    console.log(user.displayName);
  }else {
    console.log("no tenemos usuario");
  }
});

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);
  }).catch(function(){
    console.log("error");
  })
});

Carlos Jesús Fernández Salazar

student•

Agregando

event.preventDefault();

en el .js me daba un error en la página.
Lo que hice fue agregar # en la URL a la que apunta el botón para que no recargara la página y no me diera el error del .js

<a href="#" id="btnLogin">Iniciar sesion</a>

Carlos Jesús Fernández Salazar

student•

Evidentemente también borre la línea

event.preventDefault();

del .js

Juan Castro

teacher•

Si te da error puedes usar la etiqueta buttonen vez de la etiqueta a 😃.

Teofilo Rosales Gama

student•

aqui esta el codigo por si acaso :

btnLogin.addEventListener("click",function(){
  event.preventDefault();
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/plus.login');
  firebase.auth().languageCode = 'es';
  firebase.auth().signInWithPopup(provider)
  .then(function(datosUsuario){
    console.log(datosUsuario)
  }).catch(function(err){
    console.log(err)
  })
});

Gerardo Nava Pereda

student•

Saber si ya hay una sesión

firebase.auth().onAuthStageChanged(funtion(user){
console.log(user)
if (user){
console.log("tenemos-usuario")
} else{
console.log("no tenemos usuario")
}
})

Yonathan Gutierrez

student•

estaba mirando el curso nuevo y no me gusto que se usara ese proyecto con problemas en pleno 2020 de gulp y con uso de jquery para las peticiones basicas... se redunda en cosas innecesarias y lo que si debe ser comentado no se comenta... comencé con este que se supone ya puede estar desactualizado pero resulta que se esta esplicando lo propio... ojo, ojito...

Eden Gomez Gress

student•

Saludos companeros creo que mi archivo json esta mal configurado, alguien que me ayude?

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "./",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Juan Manuel Viveros Martinez

student•

Hola @EdenGg el archivo yo lo tengo asi:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public"
  }
}

tengo en hosting “public”: “public” por que en la carpeta raiz tengo una carpeta llamada public y por fuera de la carpeta public tengo el archivo de firebase.json se coloca “public”: “./” cuando no tienes una carpeta public es un tema de configuración

Daniel Muñoz Martín

student•

Alguno tiene el mismo error que yo ?

Error: invalid_scope

Miguel Angel Luna Nájera

teacher•

Espero que ya lo hayas resuelto, de no ser así compártenos tu código para ver qué pasó.

Usuario anónimo

user•

Me suena a error de dedo, en la linea donde agregas el Scope en el index.js

provider.addScope('https://www.googleapis.com/auh/contacts.readonly')

Claudia Barrera

student•

Hola, tengo un problema. Al hacer click en Iniciar Sesión se muestra el siguiente mensaje.
Ui {code: “auth/operation-not-supported-in-this-environment”, message: “This operation is not supported in the environment…chrome-extension and web storage must be enabled.”}
¿A alguien más le ha ocurrido? ¿Alguien que me pueda ayudar? Gracias.

Camilo Gonzalez

student•

Perdón, al revés, a mi no me pasa eso y veo que en la configuración de la consola de firebase tengo configurado como dominio autorizado “localhost” sin “http” o “https” y cuando ejectuo el local host en mi navegador tampoco lo estoy utilizando.
Por ahí es eso. Espero lo puedas solucionar.

Miguel Angel Luna Nájera

teacher•

Parece que es porque no se está ejecutando un ambiente de servidor, puede ser porque se abren los archivos directamente en el navegador y no a través de un servidor local.

Jansenio Gonzales Venegas

student•

me sale un error a la hora de compilar

Ui {code: “auth/operation-not-allowed”, message: “The given sign-in provider is disabled for this Fi…under the sign-in method tab of the Auth section.”}

Diego Alejandro Arevalo Valbuena

student•

Hola en la consola aparecen estos 2 errores y 2 warnings alguien sabe como solucionar este problema? ademas cuando recargo la pagina esta ya no me aparece por que se debe esto?

Mikele Guedes

student•

Los 2 errores es debido tu internet (está lenta) y el warning de "slow network is detected". Algo ahí se perdió y cuando actualizas ya se ve bien.

Sobre el otro warning, sólo esta diciendo que el youtube (que guarda cookie de navegación) no ha setado el atributo 'SameSite' y que el la proxima versión de Google Chrome sólo les entregará los cookies si setan este atributo.

Ruben Eduardo Acosta Vela

student•

Tengo un problema. En chrome y opera me abre bien la ventanita de autenticación, pero en firefox no la abre, por tanto no puedo hacer la autenticación. ¿Saben porque pasa esto?

Jose Ignacio Oyarzún Carrasco

student•

puede ser porque en el codigo de ejemplo en la linea 14 no declara event entre los argumentos de la funcion, chrome y opera detectan la variable event por defecto. Como dije “puede ser”.

Espero te funcione :smi

Ruben Eduardo Acosta Vela

student•

Si funcionó. Muchas gracias amigo.

Santiago Alzate Jaramillo

student•

Hola! Me dice que la variable firebase no esta declarada. Me podrian ayudar por favor?

Slds

Diego Alejandro Arevalo Valbuena

student•

porque la pagina no carga al acceso de cuentas?

Mario Conde

student•

me da un error 400, me dice que la API Key no es válida y seguí los pasos tal y como lo indican.

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

firebase.auth().onAuthStateChanged(function(user){
  if (user) {
    console.log(user);
    //nombre del usuario
    console.log(user.displayName);
  }else {
    console.log("no tenemos usuario");
  }
});

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);
  }).catch(function(){
    console.log("error");
  })
});

btnLogin.addEventListener("click",function(){
  event.preventDefault();
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/plus.login');
  firebase.auth().languageCode = 'es';
  firebase.auth().signInWithPopup(provider)
  .then(function(datosUsuario){
    console.log(datosUsuario)
  }).catch(function(err){
    console.log(err)
  })
});

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "./",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

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