Ionic Framework & Facebook Login with ParseClearly Innovative | Web and Mobile Development

Ionic Framework & Facebook Login with Parse

Overview

Creating mobile solutions with any platform is always a challenge when first getting started, it is easy to find part of a solution in the documentation, but integrating that solution in a real application is what you are really trying to do. Building an Ionic Framework application and Facebook Integration with Parse Account creation is one of those integration points we have encountered in the past and is a common pattern in applications.

In this blog post, we will show one approach for using a users Facebook credentials to create a Parse User Account in an Ionic Framework mobile application.

Check Out Ionic Framework Videos Here

 

We are assuming you are familiar with Promises, if not or you need a review, here is a great reference http://www.html5rocks.com/en/tutorials/es6/promises/#toc-javascript-promises

Using previously mentioned Ionic Framework Application Template Ionic-Parse-Starter, we need to add a few plugins along with ngCordova

Getting Started With Required Plugins

Follow directions here for installing and using  ngCordova with your Ionic Framework mobile solution – Click For Directions

Make sure you set the javascript file properly in the index.html

Most importantly be sure to make inject ngCordova  as a dependency into your application

Install the inAppBrowser, it is required for – Click For Directions

Then install the Facebook Plugin using the following commands – Click For Directions

The APP_ID  and the APP_NAME  come from your Facebook app setup. You can get additional information on setting up you app for facebook from this link – Click For Additional Information

At this point your application should be all set with facebook integration, now lets connect it to Parse to create accounts and login using the Parse credentials.

Pattern For Logging In Facebook User Account w/Parse in Ionic Framework

We will do the following steps:

  1. Login to Facebook using $cordovaFacebook.login  function – See Plugin Documentation $cordovaFacebook.login
  2. Convert the date returned from the login into the correct ISO format for Facebook
  3. Login to Parse using credential information for the “authData” – See Parse Documentation for Parse.FacebookUtils.logIn
  4. After the successful login, make an API call using the Facebook Plugin to get the user information – See Plugin Documentation $cordovaFacebook.api
  5. With the returned information, update the Parse.User object
  6. Be sure to include the dependency on $cordovaFacebook  in the controller or service where  you are handling the login, see example below

You can see from the code below that we are using promises to structure the asynchronous calls  to ensure things happen in order and the errors are handled properly.

 

We believe Ionic Framework is a great cross-platform framework that an be utilized to build awesome solutions. When paired with Parse.com and the set of functionality provided by the platform, you can get powerful full featured solutions up and running in no time at all.

 

Links And Videos On Ionic Framework