However one issue i've come across is trying to get Facebook Login to work correctly. Here I will explain the different ways to implement Facebook login with a Hybrid app and which method worked well for me.
If you try to use the standard Facebook JavaScript SDK you will encounter two errors. One loading the sdk over file:// means it doesn't load. The solution to this is to change the line:
js.src = "//connect.facebook.net/en_US/sdk.js";
To the following:
js.src = "http://connect.facebook.net/en_US/sdk.js";
However after the SDK loads, you get a second message preventing you accessing the API from a local file:// url.
A second potential solution is to use the Cordova Facebook Plugin which uses the Facebook native SDKs to bridge Cordova and the Facebook API. However I encountered many issues trying to get the Cordova project to detect the Facebook native SDK's which required going into Eclipse and Xcode to manage project assets and libraries. This was a real pain and I ended up not even being able to build a working app as easily as guides suggested.
Then I stumbled across a third solution which is working really well for me, and even better, no native code libraries! The trick here is to bypass the Facebook JavaScript SDK library and use the Facebook REST api endpoints directly. I am using OpenFB javascript library to make this job easier, rather than write the calls all myself, but you can do it either way. I've outlined the steps on how to get it to work below.
1) Create a Facebook app and update the URL settings under Basic and Advanced to allow callbacks using facebook or your local urls. Then copy the Facebook ID ready for the next step
2) If you haven't already, download and install Cordova to put the tools in your command line. Then navigate to your Sites folder and run the following commands to create the project and add your platforms:
cordova create your-project-name
cordova platform add ios
cordova platform add android
3) Now we need to add a Cordova plugin to handle pop-up windows from facebook logins. To add a plugin use the command:
cordova plugin add org.apache.cordova.inappbrowser
4) Now we just need to download and configure OpenFB inside our new Cordova project. For this example we will just use the test page they provide, so download it from the OpenFB Github page and extract the files into your cordova project /www/ folder. After this open the index.html and edit the following line with your Facebook App ID from step 1:
openFB.init({appId: 'YOUR_FB_APP_ID'});
5) You should now be able to run the example and login using your local browser setup. I had an issues at this point, which was that the console.log was logging out:
http://localhost:8888/cordova-open-fb/oauthcallback.html
http://localhost:8888/cordova-open-fb/www/logoutcallback.html
Which looks like a bug as the folder path should be:
http://localhost:8888/cordova-open-fb/www/oauthcallback.html
http://localhost:8888/cordova-open-fb/www/logoutcallback.html
The fix I came up with was to modify openfb.js line 20 from:
context = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)),
To be:
context = window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/")),
6) To test on iOS simulator you will need xCode installed then run the command:
To test on an android emulator you will need the Android SDK installed and then run the command:
To test on an iOS device connected with a cable, run following command:
cordova emulate ios
cordova emulate android
cordova run ios
To test on an Android device connected with a cable, run following command:
cordova run android
Here is a video of the app working on desktop and iPad:
No comments:
Post a Comment