Login with Facebook and retrieve user identities

Hank Chen's picture

Facebook, which is abbreviated as FB, is a social-network website. Many websites integrate FB for promotions. How to integrate FB into your website? There are

1.Your options for API:
Facebook official API can be divide to two parts: one part is web programming, which is implemented by JavaScript or PHP; another port is mobile programming for iOS or android. Because FB is so popular recently, many program languages also develop APIs for FB, such as SilverLight, Flash, .Net or Java. And this article choose JavaScript for example.

2.Before developing:
2.1.Sign up for a Facebook account.
2.2.Login your Facebook account and sign up for “Developer”. You can get information from following URL:
http://sofree.cc/fb-app-1/

3.Start creating your Facebook APP:
3.1.After complete Step 2, click the button “Create New APP”, to get your App ID and APP secret, just like the following screenshot with red box. Then, fill out the “Basic Info” form, like the following screenshot with blue box. For example, our website for testing is “me.cellpoint.com”, so you fill “me.cellpoint.com” in the field “App Domain”, and fill “http://me.cellpoint.com” in “URL”. Finally, click “Save” for complete your work.

3.2.In the folder “me.cellopoint.com”, add the new file “channel.html” and “index.html”, and open “channel.html” to add the JavaScript code as follows:

<script src="//connect.facebook.net/en_US/all.js"></script>
3.3.Open the file “index.html”, pasting the following codes into this file, and edit those two lines of code which is marked with red. Note if your JavaScript code paste after the <body> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
// App ID, please replace it to the App ID which you retrieved from Step 3.1
channelURL : '//me.cellopoint.com/channel.html',
// Please replace it to the real URL that you setup for the channel.html in Step 3.2

status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
};
</script>
</body>
</html>
3.4.Login and retrieve member’s personal information
Add JavaScript code as follows, and all the property of callback described as follows:
a.userID: the login user’s ID, which is retrieved as the following code marked in red. If your website try to integrate FB for login, you can identity your member by this ID.
b.If you want to retrieve user’s email, you have to setup the following code which is marked in green.
c.You can retrieve user name and email by using “/me” from FB.api as following code which is marked in blue.
function FBLogin(){
FB.login(function(response) {
if (response.authResponse) {
alert('Success');
alert('UserID' + response.authResponse.userID);
FB.api('/me', function(response) {
alert('UserName' + response.name);
alert('UserEmail' + response.email);
});
} else {
alert('Failed');
}
}, {scope: 'email'});
}

3.5.Logout: add JavaScript code as follows.
function FBLoginOut(){
FB.logout(function(response) {
alert('Logged out.');
});
}

4.If you want to remove this application, you can find out the option which is called “Apps” on your personal page, find out this application, and remove it.

5.Reference: http://developers.facebook.com/docs/reference/javascript/