Facebook login en Ionic

Published Nov 10, 2017Last updated Nov 13, 2017
Facebook login en Ionic

Continuando con nuestra aplicación, vamos a hacerla un poco más interesante agregando soporte para accesar utilizando nuestra cuenta de Facebook de forma nativa. A continuación pongo las pantallas de la aplicación y poco a poco les iremos dando funcionalidad:

Página inicial

blob

Página de Acceso

blob

Paǵina para recuperar contraseña

blob

Configuración de proyecto

Para poder continuar es necesario tener una cuenta como desarrollador en Facebook y crear una nueva aplicación, en mi caso se llamara ion-pet justo como el proyecto que estamos trabajando, los detalles aparecen a continuación.

app-name.png

Es importante tener el nombre de la aplicación y el ID de la misma, ya que en el siguiente paso vamos a utilizarlo cuando agreguemos el plugin cordova-plugin-facebook4 con el comando:

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="375042099619583" --variable APP_NAME="ion-pet"

y

$ npm install --save @ionic-native/facebook

En mi caso el APP_ID es: 375042099619583 y el APP_NAME es ion-pet

Siguiendo con nuestras configuraciones, debemos modificar el ID de nuestra aplicación, esto se hace modificando el archivo > config.xml
confgi.png

y para terminar en la consola de Facebook agregamos el ID de nuestra aplicación para las plataformar iOS y Android

iOS

ios.png

Android

android.png

y esas serían todas las configuraciones necesarías para hacer uso de los servicios de Facebook, ahora vamos al momento esperado..... programar 😄.

Agregar funcionalidad

Describo los pasos que debe seguir nuestra aplicación:
1.- Al cargar la aplicación debe comprobar que estemos logueados
2.- De no estar logueado, debe mostrar a la página inicial
3.- En caso de estar en una sesión, la aplicación debe enviarnos al PageHome
4.- La alicación debe permitirnos salir de la sesión

Antes que nada crearemos un servicio que nos mantenga en memoria la información del perfil de usuario.

import {Injectable} from "@angular/core";
@Injectable()
export class SessionManagerService{
  public userProfile:any;
}

podrás darte cuenta que está bastante simple, pero sirve a nuestros propositos 😉.
Ahora debido a que utilizaremos autenticación por facebook, debemos agregar el servicio al apartado de providers a nuestra aplicación, en el módulo app.module de la siguiente forma:

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    WelcomePage,
    Login,
    ForgetPassword
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    EnviromentVariablesModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    WelcomePage,
    Login,
    ForgetPassword
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Facebook,//native facebook
    SessionManagerService,//servicio para tener en memoria información de usuario
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

En el código anterior añadimos tanto las dependencias de Facebook, como nuestro servicio que se encarga de tener la información del usuario.

Para comprobar que el usuario se encuentre logueado a Facebook agregaremos las siguientes líneas al archivo: app.component.ts

//inyectamos los componentes necesarios: Facebook y SessionManagerService
constructor(public platform: Platform, public statusBar: StatusBar,
              public fb:Facebook,
              public splashScreen: SplashScreen,
              public session:SessionManagerService)
    //esto debe ir dentro de platform.ready
    //verifica la sesión en Facebook
    this.fb.getLoginStatus().then((data)=>{
        if(data.status==='connected'){
          console.log("Success logged: ",data);
          this.fb.api("/me?fields=id,name,email,first_name,picture.width(500).heigth(500).as(picture_large)",[])
            .then(userProfile=>{
              this.session.userProfile = {
                email: userProfile.email,
                name:`${userProfile.name} ${userProfile.first_name}`,
                image:userProfile['picture_large']['data']['url']
              };
              //cambiamos el root page para ir directamente al home
              this.rootPage = HomePage;
            });
        }else{
          //aquí debe enviarnos a la página pricipal
          this.rootPage = WelcomePage;
        }
        //ocultamos el splash screen
        this.splashScreen.hide();
      }).catch(error=>{
        //error al comprobar la sesión, no llevaría a la pagina principal
        //aquí es donde ocultamos el splash screen
        console.error(error);
        this.rootPage = WelcomePage;
        this.splashScreen.hide();
      });          

Pagina de acceso

Para continuar agregamos el html y su correspondiente funcionalidad
Archivo login.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Acceso</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-padding class="container_page">
  <ion-grid class="container_login">
    <ion-row>
      <ion-col text-center col-12 class="login_with">
        <button ion-button color="twitter">Twitter</button>
        <button ion-button color="facebook" (click)="facebookLogin()">Facebook</button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="form_login" col-12>
        <ion-list>
          <ion-item>
            <ion-label floating>Correo</ion-label>
            <ion-input class="login-input"  #username="ngModel" [(ngModel)]="request.username"
                       name="username" id="username" type="text" value=""></ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating>Contraseña</ion-label>
            <ion-input class="login-input" #pasword="ngModel" [(ngModel)]="request.password"
                       name="password" id="password" type="password" value=""></ion-input>
          </ion-item>
        </ion-list>

        <div padding>
          <button ion-button color="taxi" block (click)="login()">Iniciar Sesión</button>
        </div>
      </ion-col>
      <ion-col text-center><button class="forgetpassword" ion-button clear full (click)="recoverPassword()">Olvidé mi contraseña</button></ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Archivo Login.ts


import {Component} from "@angular/core";
import {Facebook} from "@ionic-native/facebook";
import {HomePage} from "../home/home";
import {SessionManagerService} from "../../service/session.manager.service";
import {NavController, ToastController} from "ionic-angular";
import {ForgetPassword} from "../forget-password/forget.password";

@Component({
  selector:'page-login',
  templateUrl:'login.html'
})
export class Login{

  public request:any = {
    username:"",
    password:""
  };

  constructor(public facebook:Facebook,
              public session:SessionManagerService,
              public navCtrl:NavController,
              public toastCtrl:ToastController){

  }

  facebookLogin(){
    this.facebook.login(['public_profile','user_friends','email'])
      .then((res)=>{
        this.facebook.api("/me?fields=id,name,email,first_name,picture.width(500).heigth(500).as(picture_large)",[])
          .then(userProfile=>{
            this.session.userProfile = {
              email: userProfile.email,
              name:`${userProfile.name} ${userProfile.first_name}`,
              image:userProfile['picture_large']['data']['url']
            };
            this.navCtrl.setRoot(HomePage).then(()=>console.log("Go to home"));
          });
      }).catch(e=>this.toastCtrl.create({message:"Error al iniciar sesión con Facebook",position:'top',dismissOnPageChange:true,duration:4000}).present());
  }

  recoverPassword(){
    this.navCtrl.push(ForgetPassword).then(()=>console.log("To recover password"));
  }

  login(){
    //TODO add login functonallity
  }
}

Y finalmente agregamos el HomePage donde mostraremos el nombre, la imagen del perfil del usuario y su correo electrónico. Además de permitir que cierre sesión en nuestra aplicación.
Archivo home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ion Pet - Home</h3>
  <button ion-button secondary menuToggle>Toggle Menu</button>
  <p>
    URL: {{environment.REST_API_URL}}
  </p>
  <p>
    ENV_NAME: {{environment.ENV_NAME}}
  </p>
  <button *ngIf="session.userProfile" ion-button block color="facebook" (click)="facebookLogout()">Log out</button>
  <ion-card *ngIf="session.userProfile">
    <img [src]="session.userProfile.image" />
    <ion-card-content>
      <ion-card-title>
        {{session.userProfile.name}}
      </ion-card-title>
      <p>
        {{session.userProfile.email}}
      </p>
    </ion-card-content>
  </ion-card>
</ion-content>

Archivo home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              @Inject(EnvironmentVariables)public environment,
              private facebook:Facebook,
              public session:SessionManagerService) {

  }

  facebookLogout(){
    this.facebook.logout().then(()=>{
      this.session.userProfile = null;
      this.navCtrl.setRoot(WelcomePage).then(()=>console.log("Send to welcome after logout"));
    })
      .catch(error=>console.log(error));
  }

}

Puedes notar que se agrega un botón para que al momento de dar click elimine la sesión y además nos lleve a la página inicial, con esto tendríamos nuestro flujo de acceso funcionando, les muestro la pantalla que me lanza la aplicación al momento de solicitar el acceso a Facebook y también el HomePage.

Solicitud de acceso

blob

HomePage

blob

y... eso es todo!! ya podemos agregar inicio de sesión con Facebook, más adelante agregaremos Twitter 😃

Parte 1 Variables de entorno

Discover and read more posts from Victor de la Cruz
get started
Enjoy this post?

Leave a like and comment for Victor