Parse.com Express complete login process with Facebook

Question

I am trying to tweak the Parse Express tutorial:

https://www.anyimg.org/ and https://github.com/ParsePlatform/Anyimg

Basically, instead of starting with their default home page, I always show a login page if the user has not been logged in. I was able to do that by adding a simple check for Parse.User.Current() at the Homepage endpoint and redirecting to login if they are not looged in.

For my next step, I want to allow Facebook login. So I tweaked the login.ejs as follows:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        Parse.FacebookUtils.init({
            appId      : '254642391362596',
            status     : true,
            xfbml      : true
        });
    };

(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'));

function fLogin() {

/*Parse.FacebookUtils.logIn(null, {
    *//*success: function(user) {
        alert("login success with user " + JSON.stringify(user));
        if (!user.existed()) {
            alert("User signed up and logged in through Facebook!");
        } else {
            alert("User logged in through Facebook!");
        }
        //FB.api('/me', function(response) {
        //  alert("got fb me api=" + JSON.stringify(response));
        //});

    },
    error: function(user, error) {
        alert("User cancelled the Facebook login or did not fully authorize.");
    }*//*
});*/

// log in with Parse
Parse.FacebookUtils.logIn(authData, {
    success: this._fbLoginSuccess,
    error: this._fbLoginError
});
}
</script>


<button class="btn-facebook btn-large" onclick="fLogin();"><img src="./images/FB-f-Logo__blue_58.png"> <span class="btn-facebook-text">Login with Facebook</span></button>

The good news: When I try the commented block without the login block, I get a FaceBook login prompt, and I can go to the DataBrowser and see AuthData there.

However, if I use the //Login block, nothing seems to happen.

Also, if FB login is a success what do I change in app.js or user.js to allow the home page to render? I have been searching docs and SO for a day now, and I don't see any clear docs on this.

Thanks for your help!

Note: I am rather new to both Parse and Express, but I have been able to make progress mostly on my own (please see my other postings here).

I have made progress. The code above essentially works. Remove unwanted alerts from above and use window.location.href = '"home"/one-of-my-routes". However, I am still unable to send a post to my users.js page. Any help will be appreciated

Albert Vila Calvo Albert Vila Calvo · Accepted Answer · 2015-04-02T09:38:38

What you are trying to do is definitely possible (I've done it), but can't be achieved with the method you are using right now. Basically you can't access the Parse.User.current() in Express on the server if you do a login with Facebook JS SDK on the browser. It doesn't work. (See this question in Parse forums.)

The only way you can achieve what you want, as far as I know, is using the undocumented parseFacebookUserSession middleware.

Edit: Add step-by-step detailed instructions

To log in the user with Facebook on Express (server) you simply need to follow the steps detailed on the middleware's github repo. Start by adding the file parse-facebook-user-session.js into the cloud folder. Then add the code shown on the readme to app.js, like this:

var parseExpressHttpsRedirect = require('parse-express-https-redirect');
var parseExpressCookieSession = require('parse-express-cookie-session');
var parseFacebookUserSession = require('cloud/parse-facebook-user-session');

app.use(parseExpressHttpsRedirect());  // Require user to be on HTTPS.
app.use(express.bodyParser());    // Middleware for reading request body
app.use(express.cookieParser('123456789')); // YOUR_SIGNING_SECRET
app.use(parseExpressCookieSession({ cookie: { maxAge: 3600000  } }));

var fbLogin = parseFacebookUserSession({
  clientId: 'FB_APP_ID',
  appSecret: 'FB_APP_SECRET',
  verbose: true,
  redirectUri: '/profile' // where the user will be redirected to after getting a token from Facebook
});   

// This route will require FB login. If the user is not logged in, it will be redirected to FB
app.get('/events/new', fbLogin, events.new);

// A route to log out
app.get('/logout', function(req, res) {
  Parse.User.logOut();
  res.redirect('/');
});

Some notes:

You must use HTTPS
You must enable the 'Add Field' Class Level Permission for the _User class using the Data Browser
You must enable 'Allow client class creation' in the app Settings (see the readme)
A new class ParseFacebookTokenRequest will be created on the Data Browser. Disable all it's Class Level Permissions (again, see the readme)

Important: According to a Parse Engineer, it's possible to log in the user client side using the FB JS SDK. I haven't done this but it's somewhat explained in this issue.

Parse.com Express complete login process with Facebook

2 Answers