Question

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?

Was it helpful?

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');
    }
},
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top