At Stormpath, we recently built our own Facebook and Google Login integration — and figured we’d share what we’ve learned recently during this article.
This article will show you exactly how Facebook Login works, and the way you'll easily plug it into your website.
NOTE: If you’re trying to find a drop-dead easy thanks to do Facebook Login, you would possibly want to see out our fresh Facebook Login integration. i feel you’ll enjoy it.
High Level Overview
I’m sure you’ve used Facebook Login a minimum of once or twice (if not, where does one live? Under a rock!?).
The way Facebook Login works is theoretically quite simple:
A user visits your site and sees an enormous “Sign in with Facebook” button somewhere.
A user clicks that button, and gets a touch popup window asking the user to simply accept an array of permissions.
The user clicks “Okay”, the popup closes, and therefore the user is back on their original page — but this point , they’re “logged in”.
This high-level flow is what’s referred to as OAuth 2.0.
OAuth is convenient for users because it means they don’t got to manually create an account on each website they visit — they will use one account everywhere.
Adding Facebook Login to Your Site
Adding Facebook Login to a site may be a fairly involved process. the only thanks to roll in the hay is by using the Facebook Javascript SDK.
The idea is that you simply add a button to your site which, when clicked, redirects the user to Facebook to simply accept permissions, then back to your site when everything is completed .
The downside to using Facebook Login this manner is that each one authentication is completed via Javascript, so complex server-side applications require substantially more work to function.
This guide will cover using the Javascript SDK only (as it's much simpler to explain).
Getting Started: Create a Facebook App
The first thing you would like to try to to so as to support Facebook Login on your site is create a Facebook App.
To do this, you’ll want to go over to the Facebook Developer Center and make or log into your Facebook account.
Once you’ve logged in, you ought to be redirected back to the most Facebook Developer page, where you’ll see a top navbar that appears like this:
Facebook Dev Center Navbar
To create a replacement Facebook App, click the “Apps” navbar tab, then click “Create a replacement App”. You’ll now see a window where you'll enter a “Display Name” (usually the name of your website), and pick a “Category” (the category of your website).
You should see something that appears like this:
Enter these values, then click “Create App”. this may provision a replacement Facebook App for your website, eventually allowing users to log into your website.
After you’ve created your new Facebook App, you’ll be redirected to your new App dashboard! If all went well, you ought to now be at a page that appears like this:
This Dashboard page contains some useful stats (how many of us have logged into your website?) which you would possibly find useful within the future — also as your Application’s ID and Secret.
The Application ID and Secret are going to be used afterward .
In order to support Facebook Login, you would like to let Facebook know what URL(s) your website are going to be running at. This way, Facebook can verify that a user is really being asked for permissions from the right Facebook App.
To do this, click the “Settings” tab on the left nav menu, and click on the “Add Platform” button near rock bottom of the page.
When prompted, select “Website” as your platform.
In the “Site URL” box that appears, you’ll want to enter your website URL.
For this instance , I’m getting to enter “http://localhost:8000” — as I’m getting to be testing this out on my local machine, on port 8000. you would possibly want to line this to something like: “http://mysite.com” if you’re testing this out on a public domai.
The FB.getLoginStatus function provided by the Facebook Javascript SDK allows you to simply check to ascertain whether or not the present visitor is successfully authenticated with Facebook (or not).
This code above will redirect any non-authenticated users back to the login page (/login), and every one other users will remain on the page.
NOTE: While this is often great for easy apps, if you’re building something where security is a problem , you ought to probably use the more complicated server-side Facebook authentication flow. Stormpath makes this incredibly easy.
Conclusion
Facebook Login (via Javascript) isn’t that bad! It’s easy to implement and elegance (you can change your button styles with CSS), except for more complex authentication requirements, you ought to probably use the server-side flow.
Hopefully this short guide has been helpful! Have any questions? Shoot us an email! . Visit - Facebook login
