Creating a user account and logging in are core features of any app. Facebook offers a Javascript SDK (Software Development Kit) to make this easier for developers. The feature is said to increase conversion of new members by eliminating the need for them to create a new account, username and password.
-
Get a Facebook Developers Account Why? Because you will need a Facebook ID for your app and you can't get that without a developer account. You can use your current Facebook account to login for one - shocker, I know! Link: Facebook Developers
-
Get an App ID for your App You will register your app with Facebook including the URL so Facebook's servers can communicate with your app. Facebook needs two things for this:
- Site URL
- App Domains
SPOILER ALERT: It's probably the same thing in two places. Link: Facebook Apps Also, there is a "secret" key that you can use to customize routes and such if you going higher level on your Facebook Login game.
- Add Facebook Code in HTML Get ready, here comes some Facebook magic!
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// declares a callback function used in a second
function statusChangeCallback(response) {
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// callback function for the login button
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
//initializes Facebook login
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}', //remember that App ID you registerred for? It goes here
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use graph api version 2.5
});
//declares another call back function, so modular!
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously aka super magic Facebook code
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// this give you dialogue in the browser to let the user know if it worked or not
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
//here is your login button with it's callback
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
//this seems to call the initializing facebook magic
<div id="status">
</div>
</body>
</html>
If you're in a development environment (localhost:3000) you'll likely need to redirect the domain for testing before you deploy. This takes a few more steps.
-
You might need to add your base url to your server file. (remember Node.js and that server.js file? Go there!)
-
To test this you'll need to turn your localhost:3000 url into a url Facebook can read, this means editing your ```/etc/hosts`` file. Your what?!?! It's pronounced "etsy" not "et cetera".
Link: How to edit your /etc/hosts file
- Make sure you account for this local testing domain in the Facebook config at both Site URL and App Domains. Facebook no likely localhost:3000.
Facebook Login Quickstart - Web App Facebook's step-by-step directions for plug and play Facebook Login Facebook JavaScript SDK: Login and Get Basic User Info A great YouTube tutorial. It's rough and the video pauses but he actually shows you how to get it working and explains what Facebook's plug and play code is actually doing. Thank you YouTube!