Facebook Website Log In

                                                Facebook Website Log In

Facebook Website Log In

Add Facebook Login to your Ionic 3 App — The Step-by-Step Guide
In this article, I’ll show you how to easily implement the Facebook Login API into your beautiful Ionic 3 app in just a few steps and lines of code. This guide is beginners friendly, it means that everyone who has some basic programming knowledge should be able to understand and replicate it.

Before starting, I assume you already have Ionic 3 installed on your computer. If it’s not the case, you just need to follow this official tutorial on how to set-up your environment.
1. Creating the Ionic 3 App

The very first step of this tutorial will be to create a basic Ionic 3 appwhere we can later implement the Facebook SDK and a login button. This part is done using the terminal to type some command lines — but if you are a Windows user, you can skip this part (1) and use Visual Studio Comminity instead which already contains all the tools to get you started.

We will create blank app so we are not distracted by a menu or a tab. To do this, just execute this command :

Related Posts:
ionic start fb-tutorial blank

Then, execute this one to see if everything is correctly set up :

ionic cordova serve

It should automatically launch your browser with a page representing your app.

To finish with this part, just open your newly created project in your favorite code editor. I personally use Visual Studio Code which is easy-to-use and works perfectly with Ionic.
2. Creating the Facebook App

Integrating Facebook Login requires the creation of an app on the Facebook developers platform.

Open the Facebook developers website and click on “My Apps” > “Add a New App” on the top right dropdown menu. Once it is created, you will be redirected to your new app page.

Now we need to add the platforms we want to use with the Facebook SDK. Click on the “Settings” menu link and “Add Platform”. Pick iOs or/and Android and paste your “Bundle ID” (for iOs) or “Google Play Package Name” for Android. This information can be found / edited at Line 2 in the “config.xml” file of your Ionic project; in my case :

<widget id="com.axelhardy.fbtutorial" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Finally, just click on the “Dashboard” menu link and copy your App Name and App ID. We will need these infos for the step 3.
3. Integrating the Facebook SDK into your Ionic App

Ionic makes it easy to install plugins with just a few commands. Make sure you are still in your Ionic app directory and execute this one :
Facebook Website Log In Facebook Website Log In Reviewed by Efukikata Efet on 13:17 Rating: 5

No comments