This article show how to use Facebook Login (Facebook Connect) for integrating your website with Facebook. After your website connected with one of Facebook account, your website can post into Facebook user walls, get list of user friends, etc. But these article show how to connect to Facebook “session” only, after that you can improving other functionality by your self.
I wrap this example in Java web application using Spring MVC and a little help using JQuery but not used many Java API here, basically every page in the example will run in other language (like PHP) or just in HTML.
First you need to make your website Facebook Application page at https://developers.facebook.com/apps then click “Create New App” button. Enter your App name then Continue, your App will get App ID and App Secret, this App ID and App Secret will be used somewhere in the code later.
Because we will be running our application from local computer we set the App Domains to “localhost” and set the Site URL as your web application URL. As far as I know if our website domain not matched with App Domains value it will not able to connect, so later if your website is yourdomain.com you need to change the App Domains to “yourdomain.com” also set the Site URL.
Now download example code from here or here It’s use Maven structure, if you know Maven and Spring you will know how to run it 🙂 . Let’s run it and the main page will look like:
We are going to use two approaches/techniques in using Facebook Login, which is using Facebook Javascript SDK and direct OAuth link. If there any other technique please mention me.
Javascript SDK
The first example is based on this tutorial, it’s using Javascript SDK. On page load it will automatically make connection to Facebook and will open dialog box window if it’s not connected. The dialog will be different between user who is already sign-in to Facebook and who is not.
After click Login Button (means that user authorize and allow your website to do something in user page) the dialog box window will be closed and main page page will look like below picture.
In first example I believe the experience is not so convenience for many users, that’s why I fix it in second example. There is “Connect with Facebook” button that user can click if he wants to. If he click it will open dialog box window and the rest is the same.
Some code:
<a id="fb_login_link" href="" onclick="loginFacebook(); return false;" ><img src="<%=request.getContextPath()%>/_images/facebook-connect-button.png" /></a>
<script type="text/javascript"> function loginFacebook() { FB.login(function(response) { if (response.authResponse) { // connected $('#fb_login_link').css('display', 'none'); loginStatusInfo(); testAPI(); } else { // cancelled } }, {scope: 'read_friendlists,user_about_me,user_birthday,user_videos,user_activities,user_interests,email,user_status,publish_stream'}); } function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { $('#id').text(response.id); $('#name').text(response.name); $('#first_name').text(response.first_name); $('#last_name').text(response.last_name); $('#link').text(response.link); $('#username').text(response.username); $('#birthday').text(response.birthday); $('#email').text(response.email); $('#user_info').css('display', 'block'); }); } function loginStatusInfo() { FB.getLoginStatus(function(response) { if (response.status === 'connected') { $('#fb_status').text('Connected'); $('#accessToken').text(response.authResponse.accessToken); $('#expiresIn').text(response.authResponse.expiresIn); $('#userID').text(response.authResponse.userID); $('#user_auth_info').css('display', 'block'); } }); } </script> language="javascript"
Direct OAuth Link
Using direct OAuth link basically only hit URL in form of:
http://www.facebook.com/dialog/oauth/?client_id=%5BAPP_ID%5D&redirect_uri=%5BURL_AFTER_LOGIN%5D&scope=%5BSCOPE%5D
We need to supply these parameters: client_id is App ID as explained above, redirect_uri is URL’s that will be redirected to after Login, scope is comma-separated list of permissions as describe in this docs (sample “user_about_me,user_birthday,email,publish_stream“).
For redirect_uri let’s says we want to redirect to URL http://localhost:8080/facebook-lat/login3.htm, we need to encode it first if we want to use it as parameter value. In Java we can use below code:
public static void main(String args[]) { try { String url = "http://localhost:8080/facebook-lat/login3.htm"; String urlEncode = URLEncoder.encode(url, "UTF-8"); System.out.println(url + " --> " + urlEncode); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } }
So sample OAuth link will look like https://www.facebook.com/dialog/oauth/?client_id=your_app_id&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Ffacebook-lat%2Flogin3.htm&scope=user_about_me,user_birthday,email,publish_stream
For direct OAuth link there are three examples, example 1 & example 2 will not open dialog box window (new browser window), instead will keep redirect on the same browser (redirect to Facebook login page then back to example page). In the example 3 will open dialog box just like using Javascript SDK.
After user already login with Facebook we can try last example to post message to user wall.