Facebook Native Authentication

Ionic Cloud has been deprecated. To continue using Ionic services, migrate to Ionic Pro before Jan. 31, 2018.

Setup

Create a Facebook App

If you are migrating from the old Facebook Auth Provider, you can skip this segment.

The first step in setting up your Facebook authentication integration is to create an app on Facebook.

Add Facebook Login

Upload App ID & Secret to Ionic

Now that you’ve got an app setup, you need to let us know about the App ID and App Secret. Both can be found on your Facebook app dashboard.

Device Specific Configuration

Head to the Facebook Developer Console and open up your newly created app.

iOS

Android

Generating a Key Hash

You are going to need an Android Key Hash.

For a development Key Hash on Mac:

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

Development Key Hash on Windows:

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

To generate a release Key Hash go to:

Adding Android Platform

At the bottom of the page, hit add platform and select Android

App Implementation

Setup

Cloud Configuration

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  },
  'auth': {
    'facebook': {
      'scope': ['permission1', 'permission2']
    }
  }
};
$ionicCloudProvider.init({
  "core": {
    "app_id": "APP_ID"
  },
  "auth": {
    "facebook": {
      "scope": ["permission1", "permission2"]
    }
  }
});

Plugin Installation

cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"

Injecting FacebookAuth and User

Import FacebookAuth and User from the Cloud Client and specify them as dependencies in your component constructor.

  • facebookAuth is a service that deals with user authentication.
  • user is a reference to the current user, whether that user is anonymous or authenticated.
import { Component } from '@angular/core';
import { FacebookAuth, User } from '@ionic/cloud-angular';

@Component( ... )
export class LoginPage {
  constructor(public facebookAuth: FacebookAuth, public user: User) {
    ...
  }
}

Specify ionic.cloud as a dependency for your module. This gives you access to $ionicFacebookAuth and $ionicUser.

  • $ionicFacebookAuth is a service that deals with user authentication.
  • $ionicUser is a reference to the current user, whether that user is anonymous or authenticated.
angular.module('myapp.controllers', ['ionic.cloud'])

.controller('MyCtrl', function($scope, $ionicFacebookAuth, $ionicUser) {
  ...
})

Login

this.facebookAuth.login().then( ... );
$ionicFacebookAuth.login().then( ... );

Logout

Logging out clears the current user context.

this.facebookAuth.logout();
$ionicFacebookAuth.logout();

Additional Information

Social Data

We store social data in user.social.facebook. Unlike your custom data which uses user.get() and user.set(), user.social.facebook is just an object with the following properties.

uid Facebook user ID
data Facebook data object
data.profile_picture Facebook profile picture
data.email Facebook email
data.full_name The user’s full name
data.raw_data The data object straight from Facebook

Example:

const full_name = this.user.social.facebook.data.full_name;
const profile_picture = this.user.social.facebook.data.profile_picture;
const facebook_raw_data = this.user.social.facebook.data.raw_data;
var full_name = $ionicUser.social.facebook.data.full_name
var profile_picture = $ionicUser.social.facebook.data.profile_picture
var facebook_raw_data = $ionicUser.social.facebook.data.raw_data;

Services

    API

      General