13

Abr

Publicado por: Radu Matei | app development | development | framework | Ionic

Cómo crear un login desde Facebook en una App hecha en Ionic

Hoy en día, en el que el tiempo es uno de los elementos más preciados por cualquiera, en el que los usuarios están acostumbrados a tenerlo todo inmediatamente y somos, por lo general, impacientes, cualquier elemento que nos permita ahorrar ese preciado tiempo, aunque solo sean segundos, tendrá éxito.

Por ello, creo que la mayoría coincidiremos en que una de las tareas más tediosas que podemos encontrar en el “mundo digital” es rellenar los datos de registro de cualquier site.

Así pues, en esta ocasión te mostraré cómo dar solución a esta necesidad y crear un login con Facebook, la red social por excelencia, para una app en Ionic.
Por cierto, si te interesa este framework, te adjunto aquí otro artículo de este mismo blog donde te explico “Cómo testear a una app con Ionic3“.

Preparación previa

Paso 1: Agregar tu app en Facebook

Antes que nada, dirígete al espacio para Developers de Facebook para crear la app en este sitio. Para ello, es imprescindible tener una cuenta en Facebook.
Una vez dentro, tendrás que agregar tu app en Facebook pulsando en “Agregar un nueva aplicación”. Indistintamente de si se trata de una app Android y iOS. Aunque, si en tu caso necesitas crearlo para ambas tecnologías, deberás realizar el proceso por duplicado.

Paso 2: Obtener el identificador.

Después de agregar las apps en Facebook, dirígete a “Configuración” → “Básica”. En este apartado encontrarás la información de la app como el “Identificador” de la misma, este deberás guardarlo para crear el login.

Para Apps Android.

Si en tu caso se trata de una app Android, el proceso para poder utilizar el modo “Desarrollo” tendrás que añadir el “hash” de tu ordenador en el apartado “Hash de Claves” de Facebook para que se pueda utilizar en este modo. Aquí tienes un enlace directo, en el que se explica paso a paso cómo realizar este proceso.

¡Empecemos!

Ahora sí, una vez realizados los pasos previos, pongámonos en marcha para crear el login con Facebook en una app con Ionic.
Primero, debemos crear una aplicación en blanco ejecutando esta orden:

ionic start ionic-login-facebook blank
cd ionic-login-facebook

Luego, tendrás que añadir el plugin de Facebook a tu aplicación así:

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="2234954286919734" --variable APP_NAME="myApplication"
npm install --save @ionic-native/facebook

Después de esto, añade el “Provider” de Facebook en “src/app/app.module.ts”. Esto debería quedarte tal que así:

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';

import {MyApp} from './app.component';
import {Facebook} from '@ionic-native/facebook';
import {HomePage} from "../pages/home/home";

@NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Facebook
]
})
export class AppModule {
}

Cuando lo tengas, ha llegado el momento de hacer un login contra Facebook para así poder obtener la información del usuario que estuviera realizando el registro. Para no alargar demasiado este artículo, en esta ocasión te explicaré como crear el “login” en la única página de la app, en la “Home”.

Primer paso.

Lo primero es hacer el login contra Facebook, en este se solicita la información básica y el email del usuario. Lo interesante de esto es el “ID” de usuario que devuelve Facebook, pues es el que podrás utilizar después para recuperar la información.

onClickFacebook() {
this.fb.login(['public_profile', 'email'])
.then((res: FacebookLoginResponse) => this.getUserInfo(res.authResponse.userID))
.catch(e => this.loginFacebookError(e));
}

Cuando esté correctamente realizado el login, el siguiente paso será recuperar la información del usuario (nombre, email, foto, etc.).

getUserInfo(userId: string) {
this.fb.api('me?fields=' + ['name', 'email', 'first_name', 'last_name', 'picture.type(large)'].join(), null)
.then((res: any) => this.setFacebookUserInfo(res))
.catch(e => this.loginFacebookError(e));
}
setFacebookUserInfo(user: any) {
this.user = user;
}

Si la información se ha recuperado correctamente, deberían aparecer en la pantalla los datos del usuario.

Aclaraciones finales

En realidad, crear el login no es un proceso complejo, aunque sí requieres tener en cuenta un conjunto de elementos. En función de la configuración de la cuenta del usuario, podría generar algún error para obtener el email de confirmación o registro, el elemento básico para identificar al usuario y, no poderlo identificar podría suponer un problema. Mi recomendación cuando esto te suceda es pedirle esta información al propio usuario directamente.

Así pues, cuando hayas conseguido toda la información del usuario solo debes guardarla para poderla usar en el momento en que el usuario entre de nuevo. Pues, solo deberás comprobar su identidad con su email o el ID de Facebook del propio usuario. Entonces, debes tener una orden para que la app haga “login” cuando encuentra al usuario o, de lo contrario, devuelva una excepción si no lo encuentra.

El funcionamiento para identificar al usuario es el siguiente: Si Facebook no te devuelve el email del usuario, pero tu lo tienes guardado, se utiliza el identificador que proporciona Facebook. En el supuesto que no tengas al usuario guardado en la base de datos, deberías pedirle al usuario que te proporcione su email para poderlo identificar.

En el caso que de no encontrar el email facilitado, se supone que ese usuario no está registrado, por lo que deberías proceder a registrarlo como nuevo registro.Si lo encuentras por el email, deberás hacer “update” al registro con toda la información de Facebook obtenida.

Para obtener el repositorio con el código del ejemplo pulsa aquí.

Y así concluye esta guía sobre el registro de Facebook con Ionic. Si quieres continuar aprendiendo a usa Ionic, te recomiendo continuar con otro artículo de nuestro blog sobre “Cómo trazar una ruta GPS con Ionic3”.

CTA-careers-development-justdigital

 

Barcelona
Passeig Gaiolà 13
+34 933 801 144
Lleida
Carrer Agustins 7
+34 973 988 222
Andorra
(Escaldes-Engordany)
Parc de la Mola 10, AD700
Bogota
Carrera 9A #99-07 Piso 9. Despacho 02
Torre la Equidad