Implementing facebook login with childbrowser in a phonegap app

20 / Aug / 2013 by Prakash Balodi 2 comments

Recently in one of my phonegap apps, I had to implement login with facebook functionality. Because the app was targeted towards multiple platforms (ios and android), so for this we needed a javascript based solution that can work on multiple platform.

We used the childbrowser plugin to handle this situation in following manner –

1. Created a URL on our server, which is used as a redirection to facebook for login.
2. When user clicks on facebook login in mobile app, a childbrowser opens this web page on our server.

window.plugins.childBrowser.showWebPage(“www.example.com/fbLogin", {
 showLocationBar:false
 }
 );

3. After user logins to facebook , we intercept the URL on childbrowser to find out if authorization is done successfully. At this point, the access token can be obtained by parsing the url, as it is part of the url itself.

window.plugins.childBrowser.onLocationChange = function (loc) {
 if (loc.search(/access_token/) != -1) {
 //parse url to get access token
 window.plugins.childBrowser.close();
}
};

4. Similarly logout from facebook app can be implemented by opening a childbrowser window with facebook logout url, for example –

window.plugins.childBrowser.onLocationChange = function (loc) {
 if (loc.search(/token/) == -1) {
 alert("You have been logged out !!");
 window.plugins.childBrowser.close();
 }
 };
 window.plugins.childBrowser.showWebPage("https://www.facebook.com/logout.php?next=http://www.example.com&access_token=" + fbAccessToken, {
 showLocationBar:false
 }
 );
FOUND THIS USEFUL? SHARE IT

comments (2)

  1. SK

    Hi Prakash!

    Can you mail me the complete procedure for fb login using PhoneGap? I am a complete noob and want to implement a simple facebook authentication for my PhoneGap app on iOS. If you could link me to the source files (just the fb part), it will be very helpful. Cus there are no solid examples out there that really works.. And I cannot download the fb plugin from GitHub.. 🙁

    Hoping for a reply!

    Reply

Leave a Reply to New Articles 2015 Cancel reply

Your email address will not be published. Required fields are marked *