1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    33
    Vote Rating
    0
    Steve Lewis is on a distinguished road

      0  

    Default Recommended Solution for IFrames?

    Recommended Solution for IFrames?


    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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    33
    Vote Rating
    0
    Steve Lewis is on a distinguished road

      0  

    Default


    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.

  4. #4
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    jeffbvox is on a distinguished road

      0  

    Default


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

    Thanks,

    Jeff B.

  5. #5
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    jeffbvox is on a distinguished road

      0  

    Default


    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):


    Code:
        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".

    Code:
            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.
    Last edited by jeffbvox; 21 Mar 2011 at 3:29 PM. Reason: forgot to add the querystring param name

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Vote Rating
    0
    andorraclaim is on a distinguished road

      0  

    Default This is probably a noob question

    This is probably a noob question


    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.

  7. #7
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    jeffbvox is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Why does Ext recommended against a DTD for IE?
    By chinabuffet in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 15 Dec 2010, 3:32 PM
  2. Recommended book for Ext3.0
    By jpartogi in forum Community Discussion
    Replies: 4
    Last Post: 26 Aug 2009, 4:53 PM
  3. What is the recommended way of learning Ext.nd?
    By rvoith in forum Ext.nd for Notes/Domino
    Replies: 4
    Last Post: 14 Feb 2008, 10:12 PM

Thread Participants: 3