"Sign-in with facebook" code in Sencha ! to integrate in apps - extjs

Question

I am creating an app using Sencha and I need to integrate the facebook login in it . When i click on the "login in with facebook " button , if the user is not logged in facebook ,it should show a pop-up to enter facebook email-id and password, else if the user has already logged in it should just sign-in with facebook authentication. How do I implement this using sencha touch . Please help . It would be helpful if the code for this functionality is provided.Thanks

Answer 1

First of all, you have to create JavaScript SDK app with facebook (please follow this link). After the app is created you will have APP ID. Then add the following code to app.js
Ext.application({
name: 'FBLogin',
launch: function() {
Ext.create('Ext.container.Viewport', {
items:[
{
xtype: 'panel',
html: '<center><div id="fblogin" class="fb-login-button">Login with Facebook</div></center>'
}
],
listeners:{
render: function(obj, eOpts){
window.fbAsyncInit = Ext.bind(this.onFacebookInit, this);
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
},
onFacebookInit: function(){
console.log('onFacebookInit');
var me = this;
FB.init({
appId : 'YOUR_APP_ID',
status : true,
xfbml : true
});
FB.Event.subscribe('auth.authResponseChange', Ext.bind(me.onFacebookAuthResponseChange, me));
},
onFacebookAuthResponseChange: function(response){
this.down('panel').setVisible(false);
alert("Success fully Logged in");
}
});
}
});
There will be a field called 'SiteURL:' under Website with facebook Login when you create Facebook APP. That should be pointed to your web app URL. (ex: http://example.com)

Answer 2

You could try using Phonegap Facebook Connect Plugin 0.4.0 (stable version)
and Use Phonegap Plugin Build to build package for Android,Iphone ,windows phone,blackbery,etc.
//on Device Ready
FB.init({ appId: "appid", nativeInterface: CDV.FB, useCachedDialogs: false });
// call for native app if there else give a popup for login
FB.login(
function(response) {
if (response.session) {
alert('logged in');
} else {
alert('not logged in');
}
},
{ scope: "email" }
);
Inorder to integrate with sencha which needs to add three script files cdv-plugin-fb-connect.js, phonegap.js and facebook-js-sdk.js in index.html file and add config.xml file to project build for phone gap build for building native app(without using the sencha native packaging).For config.xml file configuration please see this config Help
If any doubt please see github example here
Hope it works