Ionic 3 Login with Browser Facebook

 Ionic 3 Login with Browser Facebook 

Installation:

npm install ng2-cordova-oauth --save




 Create Your Project:

ionic start browserFacebookApp

Change Directory To Your Ionic Project:

cd browserFacebookApp

Add Page To Your Application : 

ionic g page browserPage

Add Provider To Your Application : 

ionic g page facebookService

Add the following in app.module.ts 

import { BrowserFacebookPage } from '../pages/browser-facebook/browser-facebook
import { HttpModule } from '@angular/http';
import { FacebookServiceProvider } from '../providers/facebook-service/facebook-service';

declarations:[
.....
BrowserFacebookPage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
entryComponents : [
....
BrowserFacebookPage
],
providers: [
....
FacebookServiceProvider
]

Add the following code in browser-facebook.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Browser Facebook</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding >
  <button ion-button block (click)="facebook()" *ngIf="!facebookEnable"> Login with Facebook</button>
  <ion-list *ngIf="facebookEnable">
    <h1>Facebook Details</h1>
    <!--<ion-item>{{remoteData.id}}</ion-item>-->
    <ion-item>Name : {{remoteData.name}}</ion-item>
    <ion-item>Email : {{remoteData.email}}</ion-item>
    <ion-item>Gender : {{remoteData.gender}}</ion-item>
    <ion-item>First Name : {{remoteData.first_name}}</ion-item>
    <ion-item>Last Name : {{remoteData.last_name}}</ion-item>
    <!--<img [src]="remoteData.picture.data.url" />-->
    <ion-item>
      Profile Picture : <br /><img [src]="photoUrl" /><br />
    </ion-item>
    <ion-item>
      Cover Photo : <br /><img [src]="remoteData.cover.source" height="200" width="200" />
      </ion-item>
</ion-list>
  <button ion-button block  *ngIf="facebookEnable" color="danger" (click)="logoutFb()">Logout </button>
</ion-content>

Add The Following Code In browser-facebook.ts:

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { Facebook} from "ng2-cordova-oauth/core";
import { OauthCordova } from 'ng2-cordova-oauth/platform/cordova';
import { FacebookServiceProvider } from './../../providers/facebook-service/facebook-service';

@Component({
  selector: 'page-browser-facebook',
  templateUrl: 'browser-facebook.html',
  providers: [FacebookServiceProvider]
})
export class BrowserFacebookPage {
  remoteData = [];
  access_token: any;
  authentication_code: any;
  facebookEnable: boolean;
  photoUrl: any;
  background: any;

  private oauth: OauthCordova = new OauthCordova();
  private facebookProvider: Facebook = new Facebook({
    clientId: "YOUR_APP_ID",
    responseType: 'code%20token',
    redirectUri: 'YOUR_AUTH_REDIRECT_URI',
    appScope: ["email"]
  })

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public facebookService: FacebookServiceProvider,
    private platform: Platform) {
    this.background = "";
  }

  public facebook() {
    var lobThis = this;
    this.platform.ready().then(() => {
      try {
        this.oauth.logInVia(this.facebookProvider).then(success => {
          lobThis.access_token = success["access_token"];
          lobThis.facebookService.setRemoteData(lobThis.access_token);
          this.facebookService.getRemoteData().subscribe(result => {
            this.facebookEnable = true;
            console.log("in data of linkedIn" + result);
            this.remoteData = result;
            this.background = this.remoteData["cover"];
            this.facebookService.setPhotoData(this.remoteData["id"]);
            this.facebookService.getRemoteFbPic().subscribe(res => {
              this.photoUrl = this.facebookService.getFbLargePic();
              console.log("Photo Url : " + this.photoUrl);
            });

          });
        }, error => {
          console.log("iam in fail");
          console.log("ERROR: ", error);
        });
      }
      catch (e) {
        console.log("error : " + e);
      }
    })
  }
  logoutFb() {
    this.facebookEnable = false;
  }
}

Add The Following Code In providers/facebook-service.ts:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/Observable';

@Injectable()
export class FacebookServiceProvider {
  serviceAccessToken: any;

  fbapi = "https://graph.facebook.com/v2.11/";

  querry: any;

  access_token: any;

  private fbLargePic;

  private url: any;

  private urlFbPic: any;

  constructor(public http: Http) {
    console.log('Hello FacebookServiceProvider Provider');
  }
  setRemoteData(token: any) {
    this.serviceAccessToken = token;
    console.log("serviceAccessToken : " + this.serviceAccessToken);
    this.querry = "me?access_token=" + this.serviceAccessToken + "&fields=id,name,email,cover,gender,first_name,last_name,middle_name,picture&method=get";
    this.url = this.fbapi + this.querry;
    console.log("url in setter" + this.url);
  }
  setPhotoData(userId: number) {
    this.urlFbPic = "http://graph.facebook.com/" + userId + "/picture?type=large";
  }
  setFbLargePic(picLarge: string) {
    this.fbLargePic = picLarge;
  }
  getFbLargePic() {
    console.log("get fb large pic service : " + this.fbLargePic)
    return this.fbLargePic;
  }
  getRemoteFbPic() {
    return this.http.get(this.urlFbPic)
      .do(res => {
        console.log("photo url service : " + res.url);
        this.setFbLargePic(res.url);
      })
      .map(res => {

      })
  }
  getRemoteData() {
    return this.http.get(this.url)
      .do(this.logResponseData)
      .map(this.extractResponseData)
  }
  private logResponseData(res) {
    return console.log(res);
  }

  private extractResponseData(res) {
    return res.json();
  }
}

Run The Application: 

ionic cordova run android

Input :

Click on login with facebook button and login to facebook in InAppBrowser you will redirect to the app and see the following fields: 
1. Name, Email, Gender, First Name, Last Name, Profile picture, Cover Photo

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. Ignore linking facebook with firebase.