🚧

Important Note!

Note that the option of creating new apps with the Ionic 4 framework was removed and we no longer support the projects that were created with it earlier.
Moreover, you are free to effortlessly migrate your Ionic 4 project(s) to their Ionic version with keeping both apps active.
Please check this page to learn how to do it.

Introduction

This sample app shows you how to add a social login feature to your application using the Facebook Login Appery.io plug-in.

📘

If you are looking for video instructions on how to to create an Ionic 4 application with the functionality of social authentication via Facebook by adding the Facebook Login plug-in, you might like our Ionic 4 Facebook Login App video tutorial:

But if you are interested in the detailed tutorials, please follow the steps below.So, to create the app:

Getting the App

1. From the App page, select Create new app > Ionic 4 > Ionic 4 Blank and click the Create button:

2. In the CREATE NEW dropdown, select From Plugin, check the Facebook Login plug-in, and press the Import selected plugins button:

You can see how the application looks in the Builder. It already has all the needed pages and services defined:

You can even check the app behavior in the preview:

1. Open the Project > Routing tab.
2. Change the default route page to FacebookLoginScreen and save:

Click TEST to open the app in preview where you can press the buttons to show the service response with the predefined data:

Now to make it work in full mode, we need to configure the application so that it is connected to the Facebook API.

Getting the Backend

Now, to get the native application, you need to define the app backend:

Registering a Facebook app

Log in or sign up to developers.facebook.com.

👍

Note

You should have a verified Facebook account.
Read here for more information.

1. Go to http://developers.facebook.com/ and log in.
2. Click My Apps > Create App.
3. In the new window, select More Options and confirm by clicking Continue:

4. Then, confirm your selection again:

5. A new window opens where you can provide the app name:

6. Then, if asked, complete the security check and start with adding the Facebook Login product.

7. Click Set Up, and, in the new window, select the needed platform:

We will start with setting the iOS platform up so let's select it.

Defining for the iOS platform

1. The first item does not need to be defined, so skip it by pressing Next:

2. For the app bundle ID, go back to your FacebookApp and open the App settings > iOS binary tab:

3. Copy it to the clipboard, switch back to your Facebook for Developers dashboard, paste it into the field provided and click Save, then Continue:

4. In the next step, enable the Single Sign On option and save:

5. The other steps do not require entering any user information, so you can just skip them all by pressing the Nextbutton for every item.
6. When ready, open the Basic settings tab, provide the Privacy Policy URL (in this case, https://docs.appery.io/), select the Category (here, Business and Pages) and, if needed, upload the app icon.
7. Then, click the In Development toggle - this will switch the project to Live and, lastly, click Save changes:

👍

Note the App ID

Now, when the app is saved, copy the App ID, which will be used to configure the Facebook API plug-in.

The project is now ready for integration!

iOS App Settings

1. Go back to your FacebookApp, open the App settings > Cordova plugins tab, enable the Facebook Connect plug-in and click its Options button:

2. Since the App ID is copied to your clipboard, paste it into the APP_ID field, the APP_NAME is appery.
3. Click Save options to complete:

4. Finally, you are ready to publish the app. To do it, go to the iOS binary tab, scroll down and upload your Apple certificate (.p12) and provisioning profile (.provision) under the corresponding sections:

👍

Building an iOS binary

If you need assistance on where you can get the Apple certificates, visit this page: https://docs.appery.io/docs/appexport-ios#publishing-for-ios.

Testing iOS App

This is how it should look like on the iOS device:

Defining for the Android platform

If you also need to add login on Android devices, you can follow the flow similar to what was done for iOS.

1. First, open your Facebook project on Facebook for Developers (https://developers.facebook.com/apps/), unfold the PRODUCTS > Quickstart folder and select the Android platform:

2. Skip the first two steps by pressing Next.
3. In step 3, you will need to define the package name. To locate it, go back to your Appery.io FacebookApp and, under App settings > Android binary, copy it to the clipboard:

4. Back in your Facebook project, insert the package name into the corresponding field. Also, duplicate this name as the main activity. Click Save:

5. Confirm you are ready to use this name and click Continue to get to step 4:

In this step, you will be required to provide your key hash.
6. To get it from your app, first, open App settings > Android binary and enable the Release option check box:

7. Then, go to the Resources tab and click Export to zip for the default apperyio.project certificate to save it to your drive:

8. Now, unpack the archive and copy the hash value of your certificate (here, it is the apperyio.project sha1 file).
9. Now, let's convert this Hex value to base 64 format on https://base64.guru/converter/encode/hex:

10. You can now copy this Base 64 code and paste it into the Key Hashes field. Save and click Continue:

11. In the next step, enable the Single Sign On option and save. Click Next.
12. The other steps do not require entering any user information, so you can just skip them all by pressing the Next button for every item.

Actually, your app is ready and you can build the app apk to install it on your device for testing:

Testing Android App

This is how it should look like on the Android device with the actual Facebook profile:

🚧

Important iOS information

For the app to work on the iOS platform you must set the project to Public.