Facebook Integration with IOS in Phonegap
Posted By : Avilash Choudhary | 26-May-2014
If you want users to login with facebook in your phonegap project this can be done easily with only few steps to follow:
Project setup requirements: Xcode, phonegap facebook plugin and Facebook SDK.
Register your app with facebook developers page and get APP_ID(https://developers.facebook.com/apps).
In App dashboard on Facebook. select Apps > create an app then fill the Display Name and Namespace for your app and click on Create App button.
Next, you need to set the Bundle Identifier and configure your Facebook application.
In "Settings" click on "Add Platform" and choose "iOS". Then you need to add in the “Bundle ID” field your bundle identifier and save the changes.
Bundle Identifier can be found in Xcode in the Project tab.
Facebook SDK for iOS
Download the latest Facebook SDK for iOS, then just add the SDK. Drag the FacebookSDK.framework folder into frameworks in project navigator in Xcode.
Choose create groups for any added folders and deselect copy items into destination group’s folder When draging the FacebookSDK.framework into your Framework section.
You need to download the cordova facebook plugin to get things work.
Configure your Xcode .plist file
Follow these three steps:
- Create a key called FacebookAppID and add the app ID there with a string value.
- Create a key called FacebookDisplayName and add the Display Name with a string value you configured in the App Dashboard.
- Create an array key called URL types with a single array sub-item called URL Schemes. Give this a single item with your app ID prefixed with fb. This is used to ensure the application will receive the callback URL of the web-based OAuth flow.
Facebook Plugin for Cordova
- Create a group "ios" in the plugins section of Project Navigator in xcode
- Copy FacebookConnectPlugin.h and FacebookConnectPlugin.m from the src/ios folder in Cordova Facebook Plugin folder into "ios" group.
- In the config.xml file in the project navigator and add a new entry as a child to the widget tag:
<feature name="org.apache.cordova.facebook.Connect"> <param name="ios-package" value="FacebookConnectPlugin" /> </feature>
Copy the cdv-plugin-fb-connect.js and facebook-js-sdk.js from the Cordova Facebook Plugin www folder into the www directory in Xcode. Copy the content of index.html from the example/Simple folder into your index.html file in www directory in Xcode. add the phonegap.js, facebook-js-sdk.js and cdv-plugin-fb-connect.js. in script tags in index.html and replace the appID.
FB.init({ appId : your app-id, nativeInterface : CDV.FB, useCachedDialogs : false });
var facebook = {}; facebook.pushLogin = function() { FB.login(function(response) { if (response.status == "connected") { alert(response.authResponse.accessToken) // this is your access token } }, scope : "email" }); };
In FB.init appId is your application id when you have registered it with facebook.With Fb login you can get the access token. With the help of access token you can get all user information.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avilash Choudhary
Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.