Blog

FWD:labs is all about going super fast forward through the doldrums and onto your latest and greatest work. Logging in or registering to a site via Facebook is sometimes a love/hate relationship, but we wanted to see if it was a viable option for new users to our site.

For a few months now, we’ve had Facebook’s “Login” (previously called “Connect”) as an option to login to FWD:labs. This month we rolled out Facebook’s “Login” to allow new users to create a new account here, too.

Before getting started, we were curious to research and implement how to connect with Facebook. According to a recent press release, there are 864 million daily active users. Chances are, right now, you’re logged into Facebook.

What we unveiled in January for FWD:labs is a quicker — but just as secure — way for users to sign up or login here using Facebook’s incredibly popular platform. For logging in, sure, there’s a win-win for skipping the username/password across any device. But for signing up, a handful of data like your full name and your e-mail address can be filled out for you right away.

We want to share with you how we tailored this functionality, which is not an embed, does not use any third-party services, and had little help from Facebook’s own documentation to develop.

First, we needed to set up a few things on Facebook. Here’s what we need:

• Create a Facebook app at developers.facebook.com/apps
• Save and upload one of the Facebook SDK libraries to your server
• Add the Facebook app ID and its app secret in the SDK’s config
• Review their developer documentation on the flow that Facebook needs (which lacks clear documentation for using Facebook Login with your own site)
• Eventually, make the app public, aka flip the switch to “make this app and all its live features available to the general public”

Second, we needed front-end code on our own site. We found a relatively easy way to get Facebook’s authentication to work on our site, which they call Facebook Login. It has some unique markup and can be demoed in the most basic way at developers.facebook.com/docs/plugins/login-button.

Our intent here is not here to force people to use Facebook. We’re just focused on saving a step to speed up a task, whether that’s the login process or bring a user on board for the first time with a few things filled out faster than if they did it by hand. (Don’t worry — we’ll still have our standard username/password option.)

Now, the way we’re using Facebook’s “login” doesn’t use the bleeding edge SDK release, which appears to change up frequently. We’re only asking for the base permissions (e.g. “email,public_profile,user_friends”), not “publishing” rights, which more people take issue with if done willy-nilly. We also hardly modified their front-end code because it works quite well.

When the user clicks on the “fb:login” button to connect via Facebook, the response that comes back from Facebook to our server shows three kinds of responses:

• “Connected,” meaning the user clicked the dialogue box to approve data sharing via your Facebook application
• “Not authorized,” meaning the user did not approve
• No response means the user is not logged into Facebook, so we can’t check yay or nay

Third, we need to process the new information via our back-end code. When “connected,” we can see the user’s e-mail, name, and Facebook ID. Maybe we want to display it back to them or — in our case, with logging in or signing up — we can use that to continue the process. Here’s what we do when you authorize our app on Facebook to login or sign up:

• We’re checking for the “accessToken” which verifies we’ve made the handshake on the previous page. This can also be remembered to allow for the page to refresh if need be, and it gets checked with Facebook so it can’t be spoofed.
• We’re loking at the data that we could use to pre-fill some fields, along with one more layer of information just for us: a username and password for accessing FWD:labs beyond Facebook’s connect functionality
  • If registering for the first time, we prompt the user to come up with a username and password for FWD:labs. Now, they saved a step by not having to type in their name or e-mail address, which is great. Once everything checks out, we save to our database the “handshake,” meaning the user’s Facebook ID that now corresponds to the user’s FWD:labs username. This comes in handy later to safely bypass the username/password-based login system on return visits.
  • If logging in, we use the Facebook ID to check against a FWD:labs username / Facebook ID match, which also saved time for everyone.
• Finally, we either want to redirect the user to the correct place, or display very friendly error messages to them about what exactly is amiss.

Last but not least, we wanted to cover the bases with error checking. You know the expression — “with great power comes great responsibility.” Rather than any user trying it out without us, here are some other scenarios we tested:

• You’re signed up to FWD:labs without Facebook and you either want to login or re-register with Facebook
• You are logged out of Facebook
• You are logged into Facebook as a page, as opposed to a personal profile
• You have a FWD:labs account but remove the FWD:labs app on Facebook; see facebook.com/settings?tab=applications if you’re curious
• You have a FWD:labs account but remove the Facebook connection within FWD:labs (under Account > Integrations when logged in) and perhaps change your mind later
• You close your FWD:labs account, but still have the FWD:labs app enabled on Facebook (for perhaps re-joining in the future)
• You disable JavaScript, but still wants some functionality and all the same security
• You are already logged into FWD:labs, so all of the above is unnecessary and we re-direct you to the right spot in no time

All in all, it’s been a fun experiment. Feel free to try it out — signing up or logging in — and let us know what you think!