{"id":10637,"date":"2013-08-20T10:07:49","date_gmt":"2013-08-20T04:37:49","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=10637"},"modified":"2013-08-26T10:09:10","modified_gmt":"2013-08-26T04:39:10","slug":"implementing-facebook-login-with-childbrowser-in-a-phonegap-app","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/implementing-facebook-login-with-childbrowser-in-a-phonegap-app\/","title":{"rendered":"Implementing facebook login with childbrowser in a phonegap app"},"content":{"rendered":"<p style=\"text-align: justify\">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.<\/p>\n<p style=\"text-align: justify\"><strong>We used the childbrowser plugin to handle this situation in following manner \u2013<\/strong><\/p>\n<p style=\"text-align: justify\">1. Created a URL on our server, which is used as a redirection to facebook for login.<br \/>\n2. When user clicks on facebook login in mobile app, a childbrowser opens this web page on our server.<\/p>\n<pre style=\"text-align: justify\">window.plugins.childBrowser.showWebPage(\u201cwww.example.com\/fbLogin\", {\r\n showLocationBar:false\r\n }\r\n );<\/pre>\n<p style=\"text-align: justify\">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.<\/p>\n<pre style=\"text-align: justify\">window.plugins.childBrowser.onLocationChange = function (loc) {\r\n if (loc.search(\/access_token\/) != -1) {\r\n \/\/parse url to get access token\r\n window.plugins.childBrowser.close();\r\n}\r\n};<\/pre>\n<p style=\"text-align: justify\">4. Similarly logout from facebook app can be implemented by opening a childbrowser window with facebook logout url, for example \u2013<\/p>\n<pre style=\"text-align: justify\">window.plugins.childBrowser.onLocationChange = function (loc) {\r\n if (loc.search(\/token\/) == -1) {\r\n alert(\"You have been logged out !!\");\r\n window.plugins.childBrowser.close();\r\n }\r\n };\r\n window.plugins.childBrowser.showWebPage(\"https:\/\/www.facebook.com\/logout.php?next=http:\/\/www.example.com&amp;access_token=\" + fbAccessToken, {\r\n showLocationBar:false\r\n }\r\n );<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2013 1. [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4},"categories":[1],"tags":[4845,1180,1041,921],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/10637"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=10637"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/10637\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=10637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=10637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=10637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}