Native Facebook Login

Firetask uses cordova-plugin-facebook4 to allow authentication and identification of users with Facebook Sign-In for both iOS and Android. Out of the box, you gets email, display name, profile picture url and user id.

Make sure you have before followed all these installing notes

Overview

Since social logins requires a long and tedious setup, keep in mind that the lines below are a basic steps to get the login working out on device. The work can be long and tedious if you have not already prepared a deployable environment.

If you are a beginner, we strongly recommend that you practice first with empty applications generated by Ionic CLI.

Enabling the OAuth option

Go to your app on developers.facebook.com and activate the Facebook Login product with OAuth for browser embedded

enable facebook oauth option

Input the OAuth uri

These uri can be found at your firebase account.

facebook oauth uri

Adding android platform on Facebook

Go to your app on developers.facebook.com and in the Basic Settings add the Google Play package name for the Android app.

facebook platform android

In the same screen you must to add the key hashes described below

Generating a development key hash

on windows

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

on mac/linux

keytool -exportcert -alias androiddebugkey -keystore ~\.android\debug.keystore | openssl sha1 -binary | openssl base64

Now you can just paste on key hashes text input, located in android tab of your facebook app settings.

Configuring Facebook Auth

Go to your Firebase account console and fill the fields like in the image below

google firebase facebook auth

Edit build.json file

We use cordova's build.json file to deploy Ionic applications on device.

Open the build.json file located at project root and replace with your own android debug, release keys.

Installing the platform

$ ionic platform add android // or ios

Installing the plugin

We do not recommend to install plugins individually because it can break out something in building process of cordova, forcing you to re-add the ionic platform. Anyway for just testing purposes, you can

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="facebook_app_id" --variable APP_NAME="facebook_app_name"
$ cordova prepare

Running on device

If everything went well you can

$ ionic run android // or ios

To get the logs you should navigate to chrome://inspect

Note: if you are receiving errors, maybe the cordova aren't assigning the app correctly with debug.keystore. Check out again the build.json step.

results matching ""

    No results matching ""