Ionic 4 Tutorial: Facebook Login Example

by Didin J. on oct 02, 2019 Ionic 4 Tutorial: Facebook Login Example

A comprehensive step by step Ionic 4 tutorial on Facebook login example using Ionic Angular Facebook connect plugin

In this Ionic 4 tutorial, we will show you how to login to your Ionic apps using Ionic Native Facebook Connect. We will use the Ionic Angular Facebook Connect plugin to obtain access to the native FB application on iOS and Android. In other words, the Ionic app has the FB login feature for its security purpose.

Table of Contents:

The following tools, frameworks, libraries, and modules are required for this tutorial:

  1. Node.js (Recommended version)
  2. Ionic 4
  3. Angular 8
  4. Apache Cordova 
  5. Facebook Connect Plugin
  6. Facebook App ID
  7. Terminal or Node command line
  8. IDE or Text Editor (We are using Visual Studio Code)

Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI version 5 in your terminal or command line. Check the version by type this command.

ionic -v
5.4.1

Right now, we are using the latest Ionic CLI 5 version. Don't worry about the Angular version, we will use any version that generated with Ionic apps.


Setup a Facebook App

This step is about to set up or create a Facebook App to get the App ID and secret. Also, set the bundle ID for native iOS and Google Play package names for native Android. To set up or create a Facebook App, go to Facebook Developers Dashboard https://developers.facebook.com/apps/. Login with your Facebook developers' account or credentials.

Ionic Angular Facebook Login - Facebook App Dashboard

Click the `+ Add a New App` button. Enter the display name (we use `MyIonicApp` name) then click the `Create App ID` button. Make sure to use the valid name allowed by Facebook Developers.

Ionic Angular Facebook Login - New App

After checking the captcha dialog and click submit button, now, you can see App ID and Secret, write it to your notepad.

Ionic Angular Facebook Login - New App Dashboard

Scroll down and you will see Add product then click Facebook Login Set up button.

Ionic Angular Facebook Login - Choose Platform

Choose iOS first then on the iOS wizard scroll down to the bottom to enter iOS bundle ID that will supply on `config.xml` later.

Ionic Angular Facebook Login - Setup iOS

Select SDK: Cocoapods as a development environment before using Facebook Login for iOS then click the Next button.

Ionic Angular Facebook Login - Add Bundle Identifier

Enter iOS bundle ID that will supply on `config.xml` later (we use "com.djamware.myionicfacebook") then click save then click the Continue button.

Ionic Angular Facebook Login - Enable Single Sign On

Enabled the Single Sign-On feature then click Save and Next button a few times until the end of the iOS steps. Next, click on the Android tab then click Download Android SDK.

Ionic Angular Facebook Login - Download FacebookSDK Android

Click the Next button 2 times then fill the Android project package name (we use "com.djamware.myionicfacebook") and default Android Activity Class name.

Ionic Angular Facebook Login - Android Package Name

Click the save button and this setup will check to the Google Play for the existence of this package name. You can ignore the popup message if there's no package found in the Google Play. Click the Continue button.

Ionic Angular Facebook Login - Key Hashes

As you see, we need to create a Key Hashes. To get the key hashes, especially in development build open the terminal or command line then type this command.

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

Enter "android" as the Key Pass.

Enter keystore password:  android
K1IC8IKUNGj8tt2BHTpm11c7uRE=

Copy and paste the Key Hashes like above to the Key Hashes field of the Facebook Android Setup then click save and continue button.

Ionic Angular Facebook Login - Enable Signle Sign-On Android

Enabled Single Sign-On then click Next button a few times until the end of the Facebook Android setup.


Create a New Ionic Angular App

We will use the above latest Ionic CLI 5 to create a new Ionic Angular app. Type this command to create a new Ionic Angular app from your projects folder.

ionic start myionicfacebook blank --type=angular

Next, go to the newly created Ionic 4 project folder.

cd ./myionicfacebook

Check the installed Angular and CLI version and other information by typing this command.

ionic info

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : 0.2.5 (update available: 0.2.8)

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.11.3
   OS     : macOS Mojave

Next, run the Ionic 4 application for the first time using this command.

ionic serve -l

If there's a question like below, just type `Y`.

Looks like @ionic/lab isn't installed in this project.

       This package is required for this command to work properly. The package provides a
       CLI utility, but the ionic-lab binary was not found in your PATH.

? Install @ionic/lab? (Y/n)

The Ionic application will open automatically in your default web browser.

Ionic Angular Facebook Login - Ionic Lab


Install Ionic Native Facebook Connect Plugin

To install the Ionic Native Facebook Connect plugin, type this command on the terminal or Node command line after stopping running Ionic app by press `Ctrl+C`.

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="MyIonicFacebook"
npm install @ionic-native/facebook

Fill the APP_ID and APP_NAME the same as the previously created Facebook App on the Facebook Developer Dashboard. Next, open and edit `config.xml` then change the widget ID the same as the previously registered package or bundle ID on Facebook App Setup.

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

Next, open and edit `src/app/app.module.ts` then add this import of the Facebook module.

import { Facebook } from '@ionic-native/facebook/ngx';

Add that module to @NgModule providers array.

providers: [
  StatusBar,
  SplashScreen,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  Facebook
],


Implements Facebook Login and Logout

We will use just a single Ionic page to implements Facebook login and logout. Before doing FB login, the Ionic Home Page will contain a "Sign In With Facebook" button. After login to FB successfully, the Ionic Home Page will display the basic info of the currently logged in Facebook account. Now, open and edit `src/app/home.page.ts` then add this import of Facebook and FacebookLoginResponse module.

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

Inject Facebook module to the constructor.

constructor(private fb: Facebook) { }

Declare variables to check if the user logged in and holds Facebook user data before the constructor.

isLoggedIn = false;
users = { id: '', name: '', email: '', picture: { data: { url: '' } } };

Add the FB login status checker in the body of the constructor that sets the response to the isLoggedIn variable.

constructor(private fb: Facebook) {
  fb.getLoginStatus()
  .then(res => {
    console.log(res.status);
    if (res.status === 'connect') {
      this.isLoggedIn = true;
    } else {
      this.isLoggedIn = false;
    }
  })
  .catch(e => console.log(e));
}

Add the method or function of FB login after the constructor.

fbLogin() {
  this.fb.login(['public_profile', 'user_friends', 'email'])
    .then(res => {
      if (res.status === 'connected') {
        this.isLoggedIn = true;
        this.getUserDetail(res.authResponse.userID);
      } else {
        this.isLoggedIn = false;
      }
    })
    .catch(e => console.log('Error logging into Facebook', e));
}

That FB login function sets the options that only access public_profile, user_friends, and email. Also, call the FB user details to function using Facebook Graph API that added below.

getUserDetail(userid: any) {
  this.fb.api('/' + userid + '/?fields=id,email,name,picture', ['public_profile'])
    .then(res => {
      console.log(res);
      this.users = res;
    })
    .catch(e => {
      console.log(e);
    });
}

The response from that FB API function to get Facebook users will set to the users variable. Next, add a function to implements FB logout.

logout() {
  this.fb.logout()
    .then( res => this.isLoggedIn = false)
    .catch(e => console.log('Error logout from Facebook', e));
}

That function will clear all FB login status then set the state of isLoggedIn to false. Next, we will implement all of those functions to the Ionic View. Open and edit `src/app/home/home.page.html` then replace all HTML tags with these tags that contain a condition for FB login status, buttons and user information.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Facebook
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding" *ngIf="isLoggedIn === true">
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>Hi, {{users.name}}</ion-card-subtitle>
        <ion-card-title>{{users.email}}</ion-card-title>
      </ion-card-header>
      <img src="{{users.picture.data.url}}" width="100" alt="{{users.name}}" />
      <ion-card-content>
        <p>
          <ion-button expand="full" color="secondary" (click)="logout()">
            Logout
            <ion-icon name="log-out"></ion-icon>
          </ion-button>
        </p>
      </ion-card-content>
    </ion-card>
  </div>
  <div class="ion-padding" *ngIf="isLoggedIn === false">
    <ion-button expand="full" color="primary" (click)="fbLogin()">
      Login with
      <ion-icon name="logo-facebook"></ion-icon>
    </ion-button>
  </div>
</ion-content>


Run and Test Ionic 4 Facebook Login App

Now, we will run and test this Ionic 4 Facebook login app to the real iOS and Android devices. Before running the app to the devices, we have to prepare the Cordova platform for iOS and Android. Type these commands to adds them after install/update Cordova.

sudo npm i -g cordova
ionic cordova platform rm android
ionic cordova platform add android
ionic cordova platform rm ios
ionic cordova platform add ios

To prevent any error that comes with incompatibility FacebookSDK version with the Native iOS or Android version make sure you have updated the latest Cordova version before remove/adds platforms. We have this working version list that you might match it.

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (/Users/didin/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.15.1 (/usr/local/bin/node)
   npm               : 6.11.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

Cordova-res and Native-run can install manually after installing or updating Cordova.

sudo npm install -g cordova-res
npm install -g native-run

Now, run the Ionic Angular Facebook login app on the Device. To run to Android devices type this command, but make sure to check the connected Android device using `adb devices`.

ionic cordova run android

To run to the iOS device type this command to build it first.

ionic cordova build ios

Open XCode then open the `platforms/ios/MyApp.xcworkspace` file from the XCode. Connect the iPhone using data cable then run this app from XCode. You can see how to run this Ionic Angular Facebook app in this video.

That it's for now, Ionic 4 Tutorial: Facebook Login Example. You can grab the full source codes from our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

Thanks!

Loading…