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

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)