Ionic

How to add facebook login to your Ionic App

Introduction

This section explains how you can create an app with user registration using Facebook Login and Parse Server core features through Back4App.

After following this tutorial, you will be able to do this:

Geo Points Example App

At any time, you can access the complete Android Project built with this tutorial at our GitHub repository.

Prerequisites

To complete this quickstart, you need:

Step 1 - Facebook Set up

To start using Facebook functions, you need to:

  1. Go to the Facebook Developer Website and create an account and log in.
  2. Go to My Apps and click on Add a New App:
  3. At the left panel, click on Settings > Basic. In this page:

    Verification emails block

    • Take note of your App ID
    • Add a Privacy Police URL
    • Select a Category
    • Scroll down and hit Save changes
  4. At the top of the same page, click on the Off button and Confirm to make your app live.

    Verification emails block

  5. Scroll down at the same page and click on Add platform.
    • For this tutorial, let’s choose Android
    • Add your Google Play Package Name which in our case is com.back4app.myapp
    • Add the Key Hashes of your machine (run keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 to find out yours)
    • Save changes
  6. At the left panel, to back to Dashboard, scroll down and click on Facebook Login.

    Verification emails block

  1. Go to your App dashboard at Back4App Website and click on Server Settings.
  2. Find the “Facebook Login” block and click on Settings. The “Facebook Login” block looks like this:

    Facebook Login Block at Back4App

  3. Add the Facebook App ID taken note in the previous step.

Step 3 - Set up

In this tutorial, we will be starting from where we left off in the previous User registration with email verification one.

Step 4 - Facebook Login

Let’s first install Facebook cordova plugins:

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

Now, let’s implement the facebookLogin() method:

login.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  async facebookLogin() {
    try {
      // Log in to Facebook and request user data
      let facebookResponse = await this.facebook.login(['public_profile', 'email']);
      let facebookAuthData = {
        id: facebookResponse.authResponse.userID,
        access_token: facebookResponse.authResponse.accessToken,
      };

      // Request the user from parse
      let toLinkUser = new Parse.User();
      let user = await toLinkUser._linkWith('facebook', {authData: facebookAuthData});

      // If user did not exist, updates its data
      if (!user.existed()) {
        let userData = await this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture)', []);
        user.set('username', userData.name);
        user.set('name', userData.name);
        user.set('email', userData.email);
        await user.save();
      }

      this.navCtrl.setRoot('HomePage');
    } catch (err) {
      console.log('Error logging in', err);

      this.toastCtrl.create({
        message: err.message,
        duration: 2000
      }).present();
    }
  }

Finally, let’s add a button to our Login page and make it call the method we just created:

login.html

1
2
3
4
5
    <div text-center>
      <button ion-button color="facebook" (click)="facebookLogin()">
        LOG IN WITH FACEBOOK
      </button>
    </div>

Step 5 - Test your app

  1. Since Facebook log in does’t work on a browser, test your app by running ionic cordova run android.
  2. Login at Back4App Website.
  3. Find your app and click on Dashboard > Core > Browser > User to see the user that you’ve created!

It’s done!

At this stage, you can log in, register and log out of your app with Facebook using Parse Server core features through Back4App!