Loggeando usuarios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:18

Loggeando usuarios

Curso de Angular 4

Clase 62 de 80

Clase 62 / 80

Recursos

Aprende a implementar el login con Firebase en Angular con una configuración segura: ajusta las reglas de la base de datos, usa angular/fire y verifica el JSON Web Token en Local Storage. Verás cómo solucionar el error the email address is badly formatted, conectar el formulario con ngModel y confirmar que los datos solo cargan cuando el usuario está autenticado.

¿Cómo activar login con Firebase y proteger lectura y escritura?

Configurar las reglas de seguridad es clave. Al inicio, lectura y escritura estaban en true, lo que permite acceso público. La mejora es exigir autenticación con la condición auth != null y publicar los cambios.

Antes: reglas abiertas para leer y escribir.
Ahora: reglas que requieren usuario autenticado.
Publicar cambios y refrescar para aplicar reglas.

Ejemplo de reglas en Firebase Realtime Database:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Un detalle importante: después de registrar, la librería angular/fire deja al usuario logueado automáticamente. Esto explica por qué, tras aplicar reglas, los datos aún se ven: existe una sesión activa en el navegador.

¿Dónde se guarda la sesión en el navegador?

En Chrome, la sesión se observa en Application > Local Storage > localhost bajo la clave Firebase Auth User. Ese objeto guarda el JSON Web Token, que se usa para autenticar solicitudes.

Eliminar esa clave provoca que falle la carga de datos.
Angular intenta recargar la lista y se muestra el error capturado en el módulo de HTTP.
Al refrescar, sin sesión, ya no se listan los lugares, como dictan las reglas.

¿Por qué apareció el error con el email y cómo se corrige?

Al intentar el primer login, surge el mensaje: the email address is badly formatted. No se debía a un correo mal escrito, sino a que se estaban enviando parámetros fijos en lugar de enlazar el formulario.

El template no tenía ngModel en los inputs.
El componente enviaba email y password hardcodeados.
Solución: replicar el patrón usado en registro, moviendo a un objeto de parámetros y enlazando con ngModel.

¿Qué cambios hacer en login.component y en el servicio?

En el HTML, enlazar inputs y enviar el objeto al hacer clic:

<input type="email" [(ngModel)]="loginParams.email" placeholder="correo" />
<input type="password" [(ngModel)]="loginParams.password" placeholder="contraseña" />
<button (click)="login(loginParams)">Login</button>

En login.component.ts, remover la llamada de autorización del constructor y crear el método login que use los parámetros del formulario:

login(loginParams: { email: string; password: string }) {
  this.autorizacionService.login(loginParams.email, loginParams.password);
}

En autorizacion.service, cambiar createUserWithEmailAndPassword por signInWithEmailAndPassword y ajustar el mensaje:

login(email: string, password: string) {
  return this.afAuth
    .signInWithEmailAndPassword(email, password)
    .then(() => alert('usuario logueado con éxito'))
    .catch(err => alert('un error ha ocurrido: ' + err.message));
}

Con estos cambios, al hacer login:

Se agrega de nuevo la clave de auth en Local Storage.
El token queda disponible para autenticar peticiones.
En inicio, la lista de lugares vuelve a cargar porque el usuario ya está autenticado.

¿Qué validar después del login para una mejor experiencia?

Una vez que el login funciona y las reglas protegen el acceso, aún es posible navegar por pantallas no restringidas sin estar autenticado. El siguiente paso recomendado es la protección de rutas para ocultar secciones y menú cuando no hay sesión activa.

Asegurar rutas sensibles con guardas de autenticación.
Ocultar elementos del menú que requieren sesión.
Mostrar estados claros: logueado o no logueado.

¿Quieres que profundicemos en la protección de rutas con Angular y Firebase? Deja tus dudas o comentarios y contemos qué parte te gustaría ver implementada paso a paso.

Mauricio Andres Vallejo Quesada

Hace 9 años

content-script.js:12 Unhandled rejection Error
    at child.onBeforeRender (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:4:18911)
    at Object._triggerMethod (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:7:15234)
    at child.triggerMethod (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:8:1287)
    at child.render (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:8:3436)
    at child.render (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:1:695)
    at child.render (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:8:18302)
    at child.render (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/frames.js:1:695)
    at onDocumentLoaded (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script.js:7:26954)
    at <anonymous>
From previous event:
    at HTMLDocument.<anonymous> (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script.js:7:27598)
    at fire (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script-libs.js:2:28013)
    at Object.fireWith [as resolveWith] (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script-libs.js:2:29202)
    at Function.ready (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script-libs.js:3:64)
    at HTMLDocument.completed (chrome-extension://cpaibbcbodhimfnjnakiidgbpiehfgci/scripts/content-script-libs.js:1:2164)
printWarning @ content-script.js:12
formatAndLogError @ content-script.js:12
fireRejectionEvent @ content-script.js:12
Promise._notifyUnhandledRejection @ content-script.js:12
(anonymous) @ content-script.js:11
setTimeout (async)
(anonymous) @ content-script.js:11
Promise.then (async)
schedule @ content-script.js:14
util.hasDevTools.Async.invokeLater @ content-script.js:11
Promise._ensurePossibleRejectionHandled @ content-script.js:12
Promise._reject @ content-script.js:13
Promise._rejectCallback @ content-script.js:13
Promise._settlePromiseFromHandler @ content-script.js:13
Promise._settlePromise @ content-script.js:13
Promise._settlePromise0 @ content-script.js:13
Promise._settlePromises @ content-script.js:13
(anonymous) @ content-script.js:11
Promise.then (async)
schedule @ content-script.js:14
util.hasDevTools.Async.settlePromises @ content-script.js:11
Promise._fulfill @ content-script.js:13
Promise._resolveCallback @ content-script.js:13
Promise._settlePromiseFromHandler @ content-script.js:13
Promise._settlePromise @ content-script.js:13
Promise._settlePromise0 @ content-script.js:13
Promise._settlePromises @ content-script.js:13
(anonymous) @ content-script.js:11
Promise.then (async)
schedule @ content-script.js:14
util.hasDevTools.Async.settlePromises @ content-script.js:11
Promise._fulfill @ content-script.js:13
Promise._resolveCallback @ content-script.js:13
(anonymous) @ content-script.js:13
(anonymous) @ content-script.js:7
sendResponseAndClearCallback @ extensions::messaging:419
messageListener @ extensions::messaging:451
EventImpl.dispatchToListener @ extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ extensions::utils:138
EventImpl.dispatch_ @ extensions::event_bindings:387
EventImpl.dispatch @ extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ extensions::utils:138
dispatchOnMessage @ extensions::messaging:392```

al hacer login y cargar el index me sale ese error

Comentarios (20)20 comentarios

Andres Gallardo

Hace 8 años

Edward Hurtado Hurtado

Brandon Iván Quiroa Loarca

Hace 7 años

Usuario anónimo

User

Carlos Augusto Hincapié Romero

LUIS CAIZA

Ivan Cardozo

Roger Abarca

Andres Felipe Valencia Benitez

Karol Cedillo

Ernesto Burbano

Maximiliano Fernández

Jesús Rubén Esparza Soto

Jovanny Hernandez

Jose Pech

veronica oviedo

Jesús Leonardo Perea Alarcón

Daniel Julián Gómez Silva

XAVIER MALDONADO

Carlos Uriel de Jesus Sánchez González

Luis Felipe Cardona Florez

Diego Forero

Team Platzi

Juan Alejandro León Lozano

Juan Diego Brocca

Geordano Polanco Rodríguez

Sergio Geovani Ruíz Reyes

Marifer Villarroel

Ricardo Celis

Profesor

JESUS ALBERTO LOPEZ VILLATORO

Juan Carlos Ortiz Huamán

Carlos Enrique Ramírez Flores

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina