Ionic 3 Login With Facebook Using Native Facebook Plugin

Ionic 3 Login With Facebook Using Native Facebook Plugin

Used Plugins:

Facebook Plugin:

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"

npm install --save @ionic-native/facebook

Firebase Installation:

npm install --save firebase

Create Your Project:

ionic start nativeFacebookApp

Change Directory To Your Ionic Project:

cd nativeFacebookApp

Add Page To Your Application : 

ionic g page nativeFacebook

Add the following in app,module.ts 

import { NativeFacebookPage } from '../pages/native-facebook/native-facebook';

declarations:[
.....
NativeFacebookPage
],
entryComponents : [
....
NativeFacebookPage
]

Add the following code in native-facebook.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Native Facebook</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <div *ngIf="!fbLoginBool">
    <button ion-button (click)="loginFb()" block>Login With Facebook</button>
  </div>
  <div *ngIf="fbLoginBool">
    <ion-card>
      <ion-item>
        <ion-avatar item-start>
          <img [src]="fbData.photoUrl">
        </ion-avatar>
        <h2>{{fbData.name}}</h2>
        <p>{{fbData.email}}</p>
      </ion-item>
      <img [src]="fbData.photoUrl" height="200">
    </ion-card>
    <button ion-button color="danger" (click)="logoutFb()" block>Logout From Facebook</button>
  </div>
</ion-content>

Add The Following Code In native-facebook.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Facebook } from '@ionic-native/facebook';
import firebase from 'firebase';

@Component({
  selector: 'page-native-facebook',
  templateUrl: 'native-facebook.html',
  providers: [Facebook]
})
export class NativeFacebookPage {
  fbData;
  fbLoginBool: boolean;
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public facebook: Facebook) {
    this.fbData = {
      name: "",
      photoUrl: "",
      email: ""
    }
    this.fbLoginBool = false;
  }

  loginFb() {
    this.facebook.login(['email']).then(res => {
      let fc = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
      firebase.auth().signInWithCredential(fc).then(fres => {
        console.log("firebase required data : " + JSON.stringify(fres["providerData"]));
        console.log("firebase required data : " + fres["providerData"][0]);
        this.fbData.name = fres["displayName"];
        this.fbData.photoUrl = fres["photoURL"];
        this.fbData.email = fres["email"];
        this.fbLoginBool = true;
        console.log("fb data obtained : " + JSON.stringify(this.fbData));
      }).catch(ferr => {
        console.log("firebase error : " + JSON.stringify(ferr));
      })
    }).catch(error => {
      console.log("login access denied  :  " + JSON.stringify(error))
    })
  }

  logoutFb() {
    this.fbLoginBool = false;
    this.facebook.logout().then(() => {
      console.log("logged Out");
    });
  }
}

Run The Application: 

ionic cordova run android

Input :

Click on login with facebook button you can see your facebook Display Name, Email , Profile picture

Note : 

1. You have to create an facebook APP ID and facebook APP NAME.
2. For creating the facebook developers app follow the steps in Creating APP_ID and APP_SECRET
3. After Installing firebase goto -> package.json in your project and you will find "firebase" : "^4.8.1". 
4. Change that line to "firebase" : "4.8.0" and run the application using " ionic cordova run android" 
5. Link Your Facebook App with Your Firebase Account.
6. For creating and linking the firebase with facebook follow the steps in Linking Facebook and Firebase