Search code examples
cordovaoauth-2.0access-tokenfacebook-oauthinappbrowser

Facebook oAuth with Phonegap 2.3.0 not returning token as url param at success url


I am trying to integrate Facebook oAuth with my Phonegap 2.3.0 application so that I can post to the user's wall. I am able to use the library from here: Phonegap oauth with some modifications to account for childbrowser now being called InAppBrowser and part of core Phonegap - see below.

function FBConnect()
{
    this.facebookkey = 'facebook';
    this.childBrowser = null;
}

FBConnect.prototype.connect = function(options)
{
    this.client_id = options.consumerKey;
    this.client_secret = options.consumerSecret
    this.redirect_uri = options.callbackUrl;
    oauth = OAuth(options);
    var authorize_url  = "https://m.facebook.com/dialog/oauth?";
        authorize_url += "client_id=" + this.client_id;
        authorize_url += "&redirect_uri=" + this.redirect_uri;
        authorize_url += "&display=touch";
        authorize_url += "&response_type=token";
        authorize_url += "&type=user_agent";
        authorize_url += "&scope=email,read_stream,publish_stream";

    var self = this;
    self.childBrowser = window.open(authorize_url, '_blank', 'location=no');
    self.childBrowser.addEventListener('loadstart', function(event){ console.log('event fired: '+event);self.onLocationChange(event.url);});
}

FBConnect.prototype.onLocationChange = function(loc)
{

    console.log("onLocationChange : " + loc);

    // If user hit "No, thanks" when asked to authorize access
    if (loc.indexOf("login_success.html?error_reason=user_denied") >= 0) {
        this.childBrowser.close();
        return;
    }

 // here we get the code
    if (loc.indexOf("access_token") >= 0) {

        var access_token = loc.match(/access_token=(.*)$/)[1];
        console.log("facebook token" + access_token); 
        window.localStorage.setItem(window.plugins.fbConnect.facebookkey, access_token);
        this.childBrowser.close();
        this.onConnect();
    }
}

I am able to open the InAppBrowser to send the user to the authorization page. The user first logs in with their Facebook account, then sees the application page and when they click OK, they are then able to grant access followed by the permissions screen. The user then grants permissions to my app and is then sent to the callbackUrl set as: http://www.facebook.com/connect/login_success.html. However, at this stage, I am expecting a token to be attached to the URL as a query parameter. There is nothing in the URL.

Am I missing something?


Solution

  • I am doing it like this and it is working for me as I am getting code url param when redirected:

    openFBLogin : function() {
        var my_client_id  = Properties.FB_APP_ID,
        my_redirect_uri   = "http://www.myweb.com?fb_redirect=tabapp",
        my_display        = "touch";
    
        var authorize_url  = "https://graph.facebook.com/oauth/authorize?";
        authorize_url += "client_id="+my_client_id;
        authorize_url += "&redirect_uri="+my_redirect_uri;
        authorize_url += "&display="+my_display;
        authorize_url += "&scope=publish_actions%2Cuser_birthday%2Cuser_interests%2Cuser_likes%2Cuser_location%2Cuser_relationships%2Cemail%2Cuser_checkins%2Cuser_hometown%2Cpublish_stream";
        Helper.iabRef = window.open(authorize_url, '_blank', 'presentationstyle=formsheet');
        Helper.iabRef.addEventListener('loadstop', Helper.iabFBLoginLoadStop);
        Helper.iabRef.addEventListener('loadstart', Helper.iabFBLoginLoadStart);
        console.log(Helper.iabRef);
    },
    iabFBLoginLoadStart : function(event){
        Helper.onUrlChange(event.url);
    },
    iabFBLoginLoadStop : function(event){
        Helper.onUrlChange(event.url);
    },
    /**
     * Given the FB redirection URL it will check it for success/failure
     * If success it will do login else dump error message before closing the browser window
     * @param {} url
     */
    onUrlChange : function(url){
        var error = null;
        if(url.indexOf("http://www.myweb.com") == 0){
            // User is redirected that means FB job is done
            if(/code=/.test(url)){
                // If Code param is available that means authentication done
                var fbCode = url.match(/code=(.*)$/)[1];
                console.log("logged in with fbCode = "+fbCode);
                // TODO call login service with this code and
                // on success save user credentials returned by service
            } else if(/error_description=/.test(url)) {
                // if error_description param is present that means login unsuccessful
                error = (url.match(/error_description=(.*)$/)[1]).replace(/[^A-Za-z0-9 ]/g, " ");
                console.log("Error message : "+error);
            }
    
            if(Helper.iabRef){
                Helper.iabRef.close();
            }
        }
        if(error){
            Ext.Msg.alert('Error','Unable to login using facebook : '+error);
        } else{
            Ext.Msg.alert('Success','Thanks for logging in');
        }
    },