Login/Registro de usuarios con Facebook

Clase 32 de 57 • Curso de Ionic Avanzado 2017

Resumen

Ya contamos con login y registro mediante email y contraseña, es momento de implementar autenticación con Firebase a través de redes sociales, en este caso Facebook.

En caso de que no tengas una cuenta de Facebook para desarrolladores, el primer paso es crearte una. Una vez tengas tu cuenta de Facebook para desarrolladores deberás crear una nueva aplicación, integrar el Facebook Login y darle next hasta que te indique que estas listo. Dirígete a Settings para copiar tu App ID y App Secret en Firebase. Configura la dirección url a donde va a redirigir Facebook usando la url que te proporciona Firebase.

Ahora vamos a crear un método en nuestro archivo auth.ts que se encargara de realizar el registro con Facebook mediante un provider de Firebase. Este método nos regresará información del usuario que, en caso de ser un nuevo usuario, guardaremos la información en nuestra base de datos y luego iniciaremos sesión en la aplicación, en caso de no ser un usuario nuevo simplemente se hará inicio de sesión en la aplicación.

Leonardo Omaña

student•

Cuando compilo la app en mi teléfono, y me autentico con facebook, de la app me manda al navegador, ingreso mis datos de facebook, pero no me regresa a la app, ahora si regreso manualmente a la app, esta se bolquea, así que me toca reiniciarla. El usuario si queda registrado en firebase, pero desde mi teléfono no puedo realizar el flujo completo de inicio de sesión con facebook. ¡Ayuda porfa! gracias!

Eduardo de la Cruz Ibarra

teacher•

Hola! Podrías revisar en consola si te sale algún error cuando ocurre el bloqueo?

Leonardo Omaña

student•

Hola Eduardo, esque el bloqueo de la app ocurre en el teléfono… el flujo que hago es: abrir la app, iniciar sesión con facebook, me redirecciona a chrome(del teléfono) ingreso mis credenciales de facebook y luego ahí se queda, no regresa a la app en el teléfono. Así que cuando regreso manualmente a la app, esta permanece como en un loop, ya que de chrome no regresó a la app.

dana camelo

student•

en uid: data.user.uid me dice: the property user does not exist on type 'void' ¿alguien sabe cual puede ser la razon?

 register() {
  	if(this.password !== this.password2) {
      alert('Las contraseñas no coinciden');
      return;
    }
    this.authentication.registerWithEmail(this.email, this.password).then((data) => {
      const user: User = {
        nick: this.nick,
        email: this.email,
        status: this.status,
        uid: data.user.uid,
        active: true
      };
      this.userservice.createUser(user).then((data) => {
        let toast = this.toastCtrl.create({
          message: 'Usuario registrado con éxito',
          duration: 3000,
          position: 'bottom'
        });
        toast.present();
        this.operation = 'login';
        console.log(data);
      }).catch((error) => {
        alert('Ocurrió un error');
        console.log(error);
      });
    }).catch((error) => {
      console.log(error);
    });
  }```

Carlos Uriel de Jesus Sánchez González

student•

buena forma de logueo

Login/Registro de usuarios con Facebook

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Amigos

Planeación previa para la característica / Cómo generaremos las solicitudes

Enviando una solicitud de amistad

Revisando solicitudes de amistad

Aceptando solicitudes de amistad

Mostrando sólo amigos

Componentes anidados (con paso de parámetros)

Deploy

Exportando app para iOS y complementando con Xcode

Exportando app para web, complementando con Firebase Hosting

Conclusiones del curso

Contenido Bonus

Publicando nuestra aplicación en Android y iOS stores

Cuéntanos