This is continuation of my previous article, which is adding Facebook authentication to hybrid app using Angular 4 and Ionic 3, in my previous article I have explained how to build simple ionic login page using Angular 4 and Ionic 3

Here, I am using @ionic-native/facebook module to connect to the Facebook and using facebook graph API to read user information as well as user feed data and display it on an ionic page using ionic-grid and ionic-list

The code package is linked at the end of this article so, you can download it for reference

Create Facebook Application

The first thing is which I am going to do is creating a Facebook application by going to Facebook Developers dashboard for this you need to login to Facebook developers dashboard

Once the login is successful, on left side you will see a create new app link, you need to use this link to create new Facebook application and then fill up below fields, which appears on new facebook application id dialog

Once the Facebook application is created then the next step is go to the settings of recently created your Facebook application, refer below screen shot

Here, I am going to use cordova-plugin-facebook4 node module to connect to Facebook application from the hybrid application, you can install this module by running below command

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

Now, go to your Facebook application developer portal get app_id and app_name and execute the below command

ionic plugin add cordova-plugin-facebook4 --variable APP_ID="129888224253573" --variable APP_NAME="ionicapp" 1 ionic plugin add cordova - plugin - facebook4 -- variable APP_ID = "129888224253573" -- variable APP_NAME = "ionicapp"

Then the next step go to your Facebook dashboard and at bottom you will see “Add Platform” link, click on this and select “Android Platform” then fill up below fields

Google Play Package Name is your Android app package name, here it is “com.keysandstrokes.facebooklogin”, you can get it from config.xml file

Home Ionic Page

I have updated home.ts file with the below code.There are three methods login(),getUserInformation() and getUserFeeds()

( login ) -> {

This method executes when user clicks on “Login with Facebook” button, in this method we are making a request to facebook login API, by requesting permission for below things

‘public_profile’

‘user_friends’

’email”user_posts’

‘user_posts’

}

( getUserInformation ) -> {

In this method, I am requesting for additional details such as name, first_name, last_name etc… and assigning them to the local variables, while navigating to the My Profile page I am passing these as a nav params

}

( getUserFeeds ) -> {

In this method, I am making a request for user feeds and assigning feed data to the local variable

}

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private fb: Facebook) { } public userId: string; _firstName: String; _gender: String; _lastName: String; _name: String; _data:any; login() { this.fb.login(['public_profile', 'user_friends', 'email','user_posts']) .then((res: FacebookLoginResponse) => { this.userId = res.authResponse.userID this.getUserInformation(); // this.getUserFeeds(); this.navCtrl.push('MyprofilePage', { firstName: this._firstName, lastName: this._lastName, name: this._name, gender: this._gender, data:this._data }) }) .catch(e => console.log('Error logging into Facebook', e)); } getUserInformation() { this.fb.getLoginStatus().then((response) => { if (response.status == 'connected') { this.fb.api('/' + response.authResponse.userID + '?fields=id,name,gender,first_name,last_name', []).then((response) => { this._name = JSON.parse(JSON.stringify(response)).name; this._gender = JSON.parse(JSON.stringify(response)).gender; this._firstName = JSON.parse(JSON.stringify(response)).id; this._lastName = JSON.parse(JSON.stringify(response)).last_name; this.getUserFeeds(); }, (error) => { alert(error); }) } }) } getUserFeeds() { this.fb.getLoginStatus().then((res) => { if (res.status == 'connected') { this.fb.api('/me/feed', []).then((res) => { this._data = res.data; // alert(JSON.stringify(this._data)); }, (error) => { alert(error); }) } }) } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { Facebook , FacebookLoginResponse } from '@ionic-native/facebook' ; @ Component ( { selector : 'page-home' , templateUrl : 'home.html' } ) export class HomePage { constructor ( public navCtrl : NavController , private fb : Facebook ) { } public userId : string ; _firstName : String ; _gender : String ; _lastName : String ; _name : String ; _data : any ; login ( ) { this . fb . login ( [ 'public_profile' , 'user_friends' , 'email' , 'user_posts' ] ) . then ( ( res : FacebookLoginResponse ) = > { this . userId = res . authResponse . userID this . getUserInformation ( ) ; // this.getUserFeeds(); this . navCtrl . push ( 'MyprofilePage' , { firstName : this . _firstName , lastName : this . _lastName , name : this . _name , gender : this . _gender , data : this . _data } ) } ) . catch ( e = > console . log ( 'Error logging into Facebook' , e ) ) ; } getUserInformation ( ) { this . fb . getLoginStatus ( ) . then ( ( response ) = > { if ( response . status == 'connected' ) { this . fb . api ( '/' + response . authResponse . userID + '?fields=id,name,gender,first_name,last_name' , [ ] ) . then ( ( response ) = > { this . _name = JSON . parse ( JSON . stringify ( response ) ) . name ; this . _gender = JSON . parse ( JSON . stringify ( response ) ) . gender ; this . _firstName = JSON . parse ( JSON . stringify ( response ) ) . id ; this . _lastName = JSON . parse ( JSON . stringify ( response ) ) . last_name ; this . getUserFeeds ( ) ; } , ( error ) = > { alert ( error ) ; } ) } } ) } getUserFeeds ( ) { this . fb . getLoginStatus ( ) . then ( ( res ) = > { if ( res . status == 'connected' ) { this . fb . api ( '/me/feed' , [ ] ) . then ( ( res ) = > { this . _data = res . data ; // alert(JSON.stringify(this._data)); } , ( error ) = > { alert ( error ) ; } ) } } ) } }

MyProfile Ionic Page

I have updated my profile page with the below code

import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; /** * Generated class for the MyprofilePage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-myprofile', templateUrl: 'myprofile.html', }) export class MyprofilePage { firstName:String; gender:String; lastName:String; data:any; constructor(public navCtrl: NavController, public navParams: NavParams) { this.firstName = navParams.get("firstName"); this.lastName = navParams.get("lastName"); this.gender = navParams.get("gender"); this.data = navParams.get("data"); } ionViewDidLoad() { console.log('ionViewDidLoad MyprofilePage'); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import { Component } from '@angular/core' ; import { IonicPage , NavController , NavParams } from 'ionic-angular' ; /** * Generated class for the MyprofilePage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @ IonicPage ( ) @ Component ( { selector : 'page-myprofile' , templateUrl : 'myprofile.html' , } ) export class MyprofilePage { firstName : String ; gender : String ; lastName : String ; data : any ; constructor ( public navCtrl : NavController , public navParams : NavParams ) { this . firstName = navParams . get ( "firstName" ) ; this . lastName = navParams . get ( "lastName" ) ; this . gender = navParams . get ( "gender" ) ; this . data = navParams . get ( "data" ) ; } ionViewDidLoad ( ) { console . log ( 'ionViewDidLoad MyprofilePage' ) ; } }

The HTML for my profile page is below, I am using ionic-grid and list to display user related information and feed

<!-- Generated template for the MyprofilePage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header > <ion-navbar color="primary"> <ion-title>myprofile</ion-title> </ion-navbar> </ion-header> <ion-content padding color="light" > <ion-grid> <ion-row> <ion-col> <img src="https://graph.facebook.com/320442228411814/picture?width=100&height=100"> </ion-col> <ion-col> <ion-row> <ion-col> First Name </ion-col> <ion-col> {{firstName}} </ion-col> </ion-row> <ion-row> <ion-col> Gender </ion-col> <ion-col> {{gender}} </ion-col> </ion-row> <ion-row> <ion-col> LastName </ion-col> <ion-col> {{lastName}} </ion-col> </ion-row> </ion-col> </ion-row> </ion-grid> <ion-list *ngFor="let post of data" > <ion-card class="bg-style"> <ion-item class="bg-style"> <ion-avatar item-left> <img src="https://graph.facebook.com/320442228411814/picture?width=100&height=100"> </ion-avatar> <h2>Raj</h2> </ion-item> <ion-card-content > <ion-card-title> {{ post.message }} </ion-card-title> <div style="color:brown" [innerHTML]="post.story"></div> </ion-card-content> <ion-row> <ion-col> <button ion-button icon-left color="danger" clear small> <ion-icon name="thumbs-up"></ion-icon> <div> Likes</div> </button> </ion-col> <ion-col> <button ion-button clear small color="danger" icon-left> <ion-icon name='share-alt'></ion-icon> Share </button> </ion-col> </ion-row> </ion-card> </ion-list> </ion-content> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 < ! -- Generated template for the MyprofilePage page . See http : //ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation . -- > < ion - header > < ion - navbar color = "primary" > < ion - title > myprofile < / ion - title > < / ion - navbar > < / ion - header > < ion - content padding color = "light" > < ion - grid > < ion - row > < ion - col > < img src = "https://graph.facebook.com/320442228411814/picture?width=100&height=100" > < / ion - col > < ion - col > < ion - row > < ion - col > First Name < / ion - col > < ion - col > { { firstName } } < / ion - col > < / ion - row > < ion - row > < ion - col > Gender < / ion - col > < ion - col > { { gender } } < / ion - col > < / ion - row > < ion - row > < ion - col > LastName < / ion - col > < ion - col > { { lastName } } < / ion - col > < / ion - row > < / ion - col > < / ion - row > < / ion - grid > < ion - list * ngFor = "let post of data" > < ion - card class = "bg-style" > < ion - item class = "bg-style" > < ion - avatar item - left > < img src = "https://graph.facebook.com/320442228411814/picture?width=100&height=100" > < / ion - avatar > < h2 > Raj < / h2 > < / ion - item > < ion - card - content > < ion - card - title > { { post . message } } < / ion - card - title > < div style = "color:brown" [ innerHTML ] = "post.story" > < / div > < / ion - card - content > < ion - row > < ion - col > < button ion - button icon - left color = "danger" clear small > < ion - icon name = "thumbs-up" > < / ion - icon > < div > Likes < / div > < / button > < / ion - col > < ion - col > < button ion - button clear small color = "danger" icon - left > < ion - icon name = 'share-alt' > < / ion - icon > Share < / button > < / ion - col > < / ion - row > < / ion - card > < / ion - list > < / ion - content >

Execute”ionic cordova run android” to test it is on android device

Download Code

http://keysandstrokes.info/ionic-facebook-login.zip