Facebook Connect

Add Facebook Login to an Ionic App. Learn how we integrated Facebook Authentication in Ion2FullApp Ionic Template to allow users to log in using Facebook Native App.

We have integrated the possibility to login and signup with Facebook app.

You can find all the code needed for this in: src/pages/facebook-login

In order to provide your users with the possibility to connect your app with Facebook, you need to create a Facebook App and get an APP_ID and APP_NAME. Follow the STEP 1 from this link.

After you have created you Facebook app it’s time to install the plugin into your app. Follow these steps to get this DONE:

• Execute the following command on the terminal changing the variables with your own values. Replace APP_ID and APP_NAME variables with your Facebook app values

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication" --save
$ npm install --save @ionic-native/facebook

Then in src/pages/facebook-login/facebook-login.service.ts set your APP_ID to the variable: FB_APP_ID

FB_APP_ID: number = 123456789;

If you want to get more information from the user you need to have the correct permissions. You can read here which permissions do you need for each action.

In src/pages/facebook-login/facebook-login.service.ts inside the method doFacebookLogin() you will find the following line where you have to include the permissions you need.

Facebook.login(["public_profile"]).then(...

["public_profile"] is the array of permissions, you can add more if you need.

We save the user data in the NativeStorage, but you may want to save it in your database.

When you go to Functionalities/Facebook Integration in the app you will see a screen with the data extracted from Facebook. Please note that in this example the friends and photos lists are populated with dummy data.

Learn more about facebook login in ionic.