Please go to our Blogger site at blog.backspace.academy This site will no longer be updated.
Facebook Sign in with OpenFB
Christophe Coenraets has created a excellent lightweight library for Facebook integration with Cordova/PhoneGap. Download it from https://github.com/ccoenraets/OpenFB .
After you have downloaded OpenFB, create a template PhoneGap Build application and put logoutcallback.html and oauthcallback.html in the root folder with index.html.
Create a folder called js and put openfb.js in it.
In order to improve the way OpenFB works with PhoneGap/Cordova we need to make a couple of changes. OpenFB uses the deviceready event to identify whether the app is using PhoneGap/Cordova. For reliability I prefer to pass this directly to OpenFB on initialisation. Also the address bar is not used when the inappbrowser is opened. This means if anything goes wrong the user is presented with a blank white screen.
Open in your editor openfb.js and add a cordova parameter to the init function:
Also change all window.open calls to 'location=yes';
Now open your config.xml file and add the inappbrowser plugin.
Now lets create a simple index.html page with our login buttons and status output. This will load Jquery and the AWS Javascript SDK.
Next create a file app.js in the js folder. Create a self-invoking anonymous function to contain our code.
Add variables in app.js:
AWS_ACCOUNT_ID - This is your AWS account number.
COGNITO_IDENTITY_POOL_ID - You can get this from your Cognito dashboard by selecting Edit Identity Pool
IAM_ROLE_ARN - This is the IAM role created when you created your Cognito pool. You can get this from the the main Services menu - IAM - Roles - then select the role for your identity pool.
FACEBOOK_APP_ID - From the facebook app page.
Now add some code for our button events and clearing our status areas.
Now lets add our call to OpenFB.init and functions for handling login, logout, revoke permissions (not used here) and getting user info. I won't go into much detail here as this is explained on the OpenFB Github. There is a call to a function getCognitoID() in the callback of getInfo() below, please comment this out for now as we will be building this later.
Now you can build and run your app. You should be able to login to Facebook.
Now that we have our Facebook session token we will use this in the next page to get our Cognito ID credentials.