Recommended Solution for IFrames?

[Steve Lewis]

Hi,

I need to display an IFrame for use with Facebook Connect (OAuth) with a Sencha Touch App. What is the current recommended way of doing that (and still have all the touch events, etc still be propagated properly)? I tried using a Panel in the past with html tag loading a iframe but eventing gets messed up.

Thanks,
Steve

[jay@moduscreate.com]

Does the Facebook OAuth API allow you to register a callback handler?

[Steve Lewis]

Yes,

The basic flow is 1) User request auth 2) load a url from server which then 3) does a redirect over to Facebook (the redirect over to FB includes a callback function). 4) User then inputs credentials and is 5) redirected back to the URL on the app server with the auth status.

This is all pretty easy to do in an iFrame but loading one in a Panel has the problems described above.

[jeffbvox]

Has anyone had any success with facebook integration through sencha touch? I need to do the same thing.

Thanks,

Jeff B.

[jeffbvox]

I just wanted to let you know of my solution. I ended up using a combination of the javascript and using a redirect to the oauth login page. Using the MVC coding framework, it was pretty easy to get the user back to where they were at the time that the authentication was verified and redirected to FB for authentication if they haven't allowed the app yet. The FB object is created after including the facebook js libraries and calling the init method on it.

Here is the function I used (exposed as a method on the mvc application object--rename "applicationName" to your application's registered name to store the FB return tokens in your app's scope):

    verifyFBStatus: function(loginTheUser, redirectToController, redirectToAction, additionalParams) {
        console.log("social:verifyFBStatus");
        //check to see if we have authorized through facebook
        FB.getLoginStatus(function(response) {
            if (response.session) {
                //They are already logged in
                console.log("User is authorized for facebook. ");
                this.applicationName.fbAccessToken = response.session.access_token;
                this.applicationName.fbSession = response.session.session_key;
                this.applicationName.fbUserId = response.session.uid;
                Ext.dispatch({controller: redirectToController, action: redirectToAction, params: additionalParams});
            } else if(loginTheUser) {
                // no user session available yet
                console.log("user has not authorized for facebook yet, need to login");
                // see http://developers.facebook.com/docs/guides/mobile/#web for info
                // and http://developers.facebook.com/docs/reference/dialogs/oauth/
                var redirectTo = encodeURI(document.location.href.split('?')[0].split('#')[0]);
                if(redirectToController && redirectToController.length > 0) {
                    redirectTo = redirectTo + "&state=" + redirectToController + "," + redirectToAction;
                    if(additionalParams) {
                        redirectTo = redirectTo + "," + additionalParams
                    }
                }
                var appId = 'XXXXXXXXXXXXXXXX'; //prod app id
                //put the part of the URL that differentiates your dev URI from the prod one, so you can test and have something in prod at the same time.
                if(document.location.href.indexOf("dev") > -1) 
                   appId = 'YYYYYYYYYYYYYYY' //dev app id
                document.location.href = 'http://www.facebook.com/dialog/oauth?client_id=' + appId + '&redirect_uri=' + redirectTo + '&display=touch&scope=publish_stream&response_type=token';
            }
        });
    },

the launch operation on the application looks at the query string parameters to determine if this is a return from facebook by checking for "access_token".

        var code = this.getQueryStringParameter("access_token")
        var error = this.getQueryStringParameter("error");
        if(code == '' && error == '') {
            //not coming back from facebook
            Ext.dispatch({
                controller: 'home',
                action    : 'index'
            });
        } else if(code.length > 0) {
            //returned from facebook login popup. save fb properties and go redirect
            this.fbAccessToken = spinapp.getQueryStringParameter("access_token");
// these vars are not returned on the querystring.  Use FB.getLoginStatus(...) to get them
//            this.fbSession = spinapp.getQueryStringParameter("session_key");
//            this.fbUserId = spinapp.getQueryStringParameter("uid");
            //get the return to from the state vars
            var stateVars = spinapp.getQueryStringParameter("state");
            var controllerAction = stateVars.split(",");
            Ext.dispatch({controller: controllerAction[0], action: controllerAction[1], params: controllerAction[2]});
            this.DelayLoadingMask();
        } else {
            //there was an error
            alert("error returned from Facebook: " + error);
        }

This uses a redirect and return for the login dialog. I'm currently looking in to using iframes for comments but have run in to an issue with scrolling when the comment is larger than screen size. I need to use iframe for comments since there is no comments dialog If I find a solution for that, I'll post it here too.

[andorraclaim]

Here is the function I used (exposed as a method on the mvc application object

Do you mean as method under Ext.Application? I don't see a general method to use in the doc's and this doesn't seem like an event...

Sorry a little loss; any insight would be greatly appreciated.

[jeffbvox]

I originally had the verifyFBStatus function defined within the Ext.regApplication({}) method parameters (between the curly braces) along with all the other required properties and launch method, but have since moved it out into a utilities class. The code is the same whether it's part of regApplication or on it's own in another class. The only difference is how you reference the function.

I hope that helps.