Hybrid-09 : Login with Facebook.

All most all App now used Facebook login intrgration.User can login with facebook email id and password without pre signup.In this tutorial I will show you how to integrate facebook login with your app and reveal the user information.

Plugins id- “cordova-plugin-facebook4”

Plugins Version- “1.7.4”

Click Here For Plugins Doc.

See The Demo.

***Remember:  This Plugins only works properly with minimum android sdk version 15 and lader. So, be sure you set mimimum android sdk version=15 in your build setting. and be sure you add your proper facebook app_id and app name when add this plugins.

#index.html

<div class="views"> <div class="view view-main"> <div class="pages navbar-fixed toolbar-fixed"> <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Login with Facebook</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" > <center> <div id="profile"> </div> </center> <div class="content-block" style="margin-top:-10px"> <center> <div id="profile"> </div> </center> <p id="login_button" class="button active" onclick="fblogin();"> Login with facebook</p> <p id="logout_button" class="button active" onclick="logout();"> Logout with facebook</p> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div>

#my-appp.js

var fblogin = function () { if (window.cordova.platformId == "browser") { var appId = "REPLACE_WITH_YOUR_FACEBOOK_APP_ID"; facebookConnectPlugin.browserInit(appId); alert(JSON.stringify(facebookConnectPlugin)) } facebookConnectPlugin.login( ["email"], function (response) { myApp.alert("Your have successfully login!"); $$("#login_button").hide(); try{ facebookConnectPlugin.api( "me/?fields=first_name,last_name,picture", ["public_profile"], function (response) { $$("#profile").html('<h2> '+response.first_name+' '+response.last_name+'</h2> <img src="'+response.picture.data.url+'" />'); }, function (response) { myApp.alert(JSON.stringify(response)) }); } catch(err) { message.innerHTML = "Input is " + err; } $$("#logout_button").show(); }, function (response) { myApp.alert(JSON.stringify(response)) }); } var logout = function () { facebookConnectPlugin.logout( function (response) { myApp.alert("You have successfully log out!"); $$("#login_button").show(); $$("#logout_button").hide(); $$("#profile").html(" "); }, function (response) {"Failed to Logout"+ myApp.alert(JSON.stringify(response)) }); }

Don't forgot to replace your valid facebook app id in my-app.js file.

How to get Facebook App ID.

Login facebook developer account with your facebook account and add a new app from MyApp option of right upper corner. After Successfully create your App you need to set some Setting of your app from Setting Option. For better understanding you can watch my video.

Video coming soon...
Generate Hash key On LINUX:
Open Terminal and type following command to get your Hash Key.
For Debug Build: keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64
For release Build: keytool -exportcert -alias Replace_your_aliasName -keystore Replace_your_keystore_FilePath | openssl sha1 -binary | openssl base64

For more Click here.