Does Parse.FacebookUtils.logIn only allow Facebook login via a pop up box?

Question

I'm trying to use parse.com Facebook SDK to allow my users to login to my site using the Fb login button.

I have this working fine for desk browsers and Safari, but there is a known issue with ios Chrome that creates the error discussed here.

My investigations have lead me to conclude that is the Parse.FacebookUtils.logInclass that is causing the Facebook pop up window to open, is that correct?

If so, is it not possible to open this as a page and not a pop up? which would avoid the above error.

I've built a workaround that works for a standard Facebook login, but doesn't work for Parse. Not sure if its possible to use this? Information for this work around came from here.

I've also seen the answer from Rahul here as a potential solution, but I'm unsure how to implement it

Any help would be gratefully received as I've been stuck on this for ages.

function getUserData() {
    FB.api('/me', function(response) {
        document.getElementById('response').innerHTML = 'Hello ' + response.name;
    });
}

window.fbAsyncInit = function() {
    //SDK loaded, initialize it
    Parse.FacebookUtils.init({
        appId      : '12345',
        xfbml      : true,
        version    : 'v2.3'
    });


    //check user session and refresh it
    var uri = encodeURI('http://mysite123.com/user_home.html');
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //user is authorized
            document.getElementById('loginBtn').style.display = 'none';
            getUserData();

        } else {
            //user is not authorized
        }
    });
};

//load the JavaScript SDK
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {

var ABSOLUTE_URI = "http://mysite123.com/user_home.html";
var FB_ID = "12345";

  // Open your auth window containing FB auth page 
  // with forward URL to your Opened Window handler page (below)

  var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI;
  var scope = "&scope=public_profile,email,user_friends";
  var url = "https://www.facebook.com/dialog/oauth?client_id=" + FB_ID + redirect_uri + scope;

  // notice the lack of other param in window.open
  // for some reason the opener is set to null
  // and the opened window can NOT reference it
  // if params are passed. #Chrome iOS Bug
  window.open(url);



function fbCompleteLogin(){

Parse.FacebookUtils.logIn(null, {
  success: function(user) {
    if (!user.existed()) {
      alert("User signed up and logged in through Facebook!");
    } else {
      alert("User logged in through Facebook!");
    }
  },
  error: function(user, error) {
    alert("User cancelled the Facebook login or did not fully authorize.");
  }
});

}

function requireLogin(callback){

    FB.getLoginStatus(function(response) {
        if (response.status != "connected"){
            showLogin();
        }else{
            checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){

              // Check FB tokens against your API to make sure user is valid
            });
        }
    });

}

}, false);

North · Accepted Answer · 2016-01-08T01:11:42.333

2

I stuck in the same question before, and solved it. If you don't want to pop up a new window, use OAuth to login with facebook.

You can use the parse-facebook-user-session to do it quickly. After doing that, just simply use hyperlink <a> to link the login page. And maybe you will face to error 209 invalid session token. You should just turn on the "Require Revocable Sessions" toggle on your Parse.com dashboard settings page.

If you still have some questions like how to retrieve users' access_token, I wrote some posts in my blog and maybe it will help you (Sorry, the posts were described in Chinese Traditional).

UPDATE:

I created a demo and GitHub, please check.

edited Jan 08 '16 at 01:11

answered Jul 28 '15 at 15:07

North

1,434
1
12
21

I'm about to sleep(23:48 UTC+8). I will post an simple example if I have time tomorrow. – North Jul 28 '15 at 15:48
looks promising - will have a good look later, so this uses embeded javascript? is there any addtional set up I need to do with my files or parse backend to make it work? or do I just drop the files into my existing file structure? – Dano007 Jul 29 '15 at 09:25
It uses node.js as Parse backend. To setup it, see the steps in GitHub. – North Jul 29 '15 at 09:37
Ok, can I set up the cloud part and app and run it along side my existing js code already being stored on my own server? – Dano007 Jul 29 '15 at 21:07
Yes, please see [this](http://hayageek.com/facebook-dialog-oauth/), you can follow the step and use another language to do this in backend server. – North Jul 30 '15 at 01:51
I think this looks like it solves the problem, its just my skill set to implement it into my existing code. I already have a parse app created so not sure how this fits – Dano007 Jul 30 '15 at 19:50
Try from simple to complex – North Jul 31 '15 at 01:33
Ive accepted the answer based on this appearing to fix the issue. If its ok, might need to ask you a few points in the future? – Dano007 Aug 02 '15 at 07:41
I'm glad to help you if I can. :) – North Aug 02 '15 at 09:27

score 1 · Answer 2 · answered Jul 31 '15 at 12:56

If you want control the login process yourself, you have to bypass some Parse part. My advice would be to logIn with Facebook, using the FB api, which you can customize.

After that you will get a Object from facebook, containing some information like token, expireDate, ... This object can be given to the Parse.FacebookUtils.logIn methods in order to link Facebook account to the Parse one.

Here is a snippet for cordova, there could be some adjustments to make.

$cordovaFacebook.getLoginStatus().then(function(rep){
  console.log(JSON.stringify(rep));
  var expDate = new Date(new Date().getTime() + rep.authResponse.expiresIn * 1000 ).toISOString();
  var authData = {
    id: String(rep.authResponse.userID),
    access_token: rep.authResponse.accessToken,
    expiration_date: expDate
  }
  return Parse.FacebookUtils.logIn(authData);
})

Does Parse.FacebookUtils.logIn only allow Facebook login via a pop up box?

2 Answers2