Registrando 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:29

Registrando usuarios

Curso de Angular 4

Clase 61 de 80

Clase 61 / 80

Recursos

Aprende a implementar un flujo de registro robusto en Angular con Firebase Authentication. Verás cómo inyectar AngularFireAuth, usar el método createUserWithEmailAndPassword, manejar errores con .then y .catch, y conectar tu formulario con two-way data binding mediante ngModel. Todo optimizado para un desarrollo claro y mantenible.

¿Cómo registrar usuarios en Firebase con Angular?

Para habilitar el registro, se agrega un constructor al servicio de autenticación e inyecta AngularFireAuth. Este objeto permite ejecutar operaciones de autenticación en Firebase y acceder a su API de usuario.

Inyectar el service de AngularFireAuth en el constructor.
Usar el objeto auth y el método createUserWithEmailAndPassword.
Manejar la respuesta con .then y los errores con .catch.

¿Qué hace AngularFireAuth y cómo inyectarlo?

Este objeto expone las operaciones de autenticación. Se inyecta como dependencia privada para usarlo dentro del servicio.

// authorizationService.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable({ providedIn: 'root' })
export class AuthorizationService {
  constructor(private angularFireAuth: AngularFireAuth) {}

  registro(email: string, password: string) {
    return this.angularFireAuth.auth
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
        alert('Usuario registrado con éxito');
        console.log(response);
      })
      .catch((error) => {
        alert('Un error ha ocurrido');
        console.log(error);
      });
  }
}

¿Cómo usar createUserWithEmailAndPassword con promesas?

El flujo usa promesas. A diferencia de .subscribe en Observables, aquí se encadenan .then y .catch para éxito y error.

.then(response) para confirmar el registro y depurar con console.log.
.catch(error) para informar al usuario y registrar el error.

¿Cómo manejar errores de autenticación correctamente?

Es clave informar al usuario y registrar el detalle técnico. Por ejemplo, mostrar un alert y usar console.log(error) para el diagnóstico.

Mensaje claro para el usuario.
Registro del error para depuración.

¿Cómo conectar el formulario de registro con el servicio?

El botón de “Registrar” debe llamar una función registrar() en el componente. Los datos del formulario viajan mediante two-way data binding con ngModel hacia un objeto registro con email y password.

¿Cómo preparar registro.component.ts con two-way data binding?

Se crea un objeto local y una función que delega en el servicio.

// registro.component.ts
import { Component } from '@angular/core';
import { AuthorizationService } from './authorizationService';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html'
})
export class RegistroComponent {
  registro: any = { email: '', password: '' };

  constructor(private authService: AuthorizationService) {}

  registrar() {
    this.authService.registro(this.registro.email, this.registro.password);
  }
}

¿Cómo enlazar el botón Registrar en registro.component.html?

Se usa two-way data binding con ngModel y se llama a registrar() en el click.

<!-- registro.component.html -->
<input type="email" [(ngModel)]="registro.email" placeholder="Correo" />
<input type="password" [(ngModel)]="registro.password" placeholder="Contraseña" />
<button (click)="registrar()">Registrarse</button>

Datos sincronizados con el objeto registro.
Acción centralizada en la función registrar().

¿Cómo habilitar el método email/password en Firebase Authentication?

Si aparece un error de “operación no permitida” y falta un provider para sign-in, es porque el método Email/Password está deshabilitado en Firebase.

¿Qué mensaje de error indica que falta un provider?

El sistema notifica que la operación no está permitida y que no existe un provider para ese sign-in. Esto apunta a la configuración de Authentication en el panel de Firebase.

Error visible tras intentar registrarse.
Indica que falta habilitar el método.

¿Cómo verificar el usuario creado en el dashboard?

Tras habilitar Email/Password en Authentication y repetir el registro, se confirma el éxito con un alert. Luego, en el dashboard de Firebase, en la sección Users, aparece el nuevo usuario.

Habilitar Email/Password con el lápiz y el switch.
Guardar la configuración con “save”.
Revisar la lista de usuarios en Users.

¿Tienes dudas sobre la integración con AngularFireAuth o el enlace con ngModel? Cuéntame en comentarios qué parte te gustaría ver en más detalle.

Armando Zabala

Hace 9 años

Buenas como haria para registrar otros datos que acompañen ese correo y ese password??? deberia agregarlo en database de firebase? por ejemplo agregar una edad, sexo por que veo que la authentication de firebase solo es email y password

Geordano Polanco Rodríguez

Hace 9 años

Por defecto Firebase no te da acceso directo a la tabla donde guarda la info de los usuarios.

una solución común es:

Registrar el usuario como lo ha hecho Eduardo.
Guardar recibidos del registro en un nodo (/Users) de tu base de datos.
En el nuevo nodo agrega toda la información que quieras.
Un ejemplo:

public regitro = (email, password) => {
    this.authFb.auth.createUserWithEmailAndPassword(email, password)
      .then((response) => {
        const $id = this.authFb.auth.currentUser.uid;
        this.afDB.database.ref('Users').child($id).set({
          Pais: 'Rep. Dominicana',
          Edad: 30,
          Genero: 'M',
          provider: 'facebook'
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

Esto te crea un nuevo nodo (Users), con el ID del usuario como $key.

Lo malo es que tienes que mantener la información en dos lugares.

Puedes leer la documentación, hay eventos que se lanzan cuando cambia el estado del usuario, te puede ayudar a matener la tabla Users.

Firebase user-auth

Carlos Andrés Charris S

Hace 9 años

puedes hacer lo siguiente:

export interface Usuario {
  email: string;
  password: string;
  pais: string;
  edad: number;
  genero: string;
  provider: string;
}

crearUsuario (user : Usuario){
    this.authFb.auth.createUserWithEmailAndPassword(user.email, user.password)
      .then(() => {
        this.authFb.list ( '/usuarios' ).push ( user );
      })
      .catch((error) => {
        console.log(error);
      });
}

Comentarios (15)15 comentarios

Nelson Oswaldo Gonzalez Santiago

Diego Vallejo

Hace 8 años

Alexis Antonio Moraga Gallardo

Edward Hurtado Hurtado

Milciades Vargas Liz

Irving Sarmiento

Roberto Antonio González Medina

Emilio Jose Ugeda Sanoja

Hace 7 años

Juan Daniel Gualtero Diaz

Carlos Uriel de Jesus Sánchez González

Jovanny Hernandez

Rodolfo Sáenz

Usuario anónimo

User

Andres Gallardo

Diego Forero

Team Platzi

Mabel Exalta Peña Garcia

Roger Abarca

Jose Pech

Juan Alejandro León Lozano

moises mannarino

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