"Login with facebook" in Sencha! integrate into applications

Question

I am creating an application using Sencha and I need to integrate facebook login into it. When I click the "log in with facebook" button, if the user is not logged into facebook, he should display a pop-up window for entering the facebook email name and password, otherwise, if the user is already registered, he just needs to sign - with facebook authentication. How to implement this using sencha touch. Please help. It would be helpful if code for this function was provided. thanks

Answer 1

First of all, you need to create a JavaScript SDK application with facebook ( please follow this link ). After creating the application, you will have an APP identifier. 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"); } }); } }); 

On a website called "SiteURL:", a website will be created under the name Facebook Login when creating Facebook APP. This must be specified in the URL of your web application. (for example: http://example.com )

Answer 2

You can try using Phonegap Facebook Connect Plugin 0.4.0 (stable version) and use Phonegap Plugin Build to create a package for Android, Iphone, Windows Phone, BlackBerry, 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 for integration with sencha, which needs to add three script files cdv-plugin-fb-connect.js, phonegap.js and facebook-js-sdk.js in the index.html file and add the config.xml file to the project assembly to create a lock phone to create your own application (without using your own sencha packaging). To configure the config.xml file, see this config Help. If in doubt, see the github example here. Hope it works.