Angular 4 and Ionic 3 : Facebook Login

 

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

facebookintegration

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

facebookintegrationone

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

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

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

android-platform-facebook

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

}

MyProfile Ionic Page

I have updated my profile page with the below code

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

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

angular4-ionic3-hybrid-app

 

Download Code

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