Use Facebook Connect

In this article we will show you how to make your applications available to millions of Facebook users.

If you want to introduce some new web application, you can't ignore millions of users on social networks (such as Facebook, MySpace and LinkedIn). With these social networks, you can allow them to use your application without registration (remove one of the biggest barriers), post application updates to their newsfeed and even You can also invite their friends to use the application.

In this article, we will focus on the simplest task: using Facebook as a single sign-on server. Our application (simply Login.htm ) will authenticate users using Facebook accounts, allowing us to identify users without having to search the registration form.

Note : Other social networks (for example LinkedIn) also provide the same functionality; You can find more about them in the document.

Facebook integration options

To integrate your application with Facebook, you can choose from three platform options below:

Facebook Connect is the easiest integration method because it allows you to take advantage of Facebook integration by grouping some JavaScript code in selected application pages.

The integration between Facebook user accounts and authentication databases depends on whether you integrate an existing application or a completely new application.

If the new application requires an authentication or registration method, it is best to rely on Facebook authentication and allow Facebook users to access your application without having to worry about administration. However, you must still provide guests with an option to register on your site and use your application without using Facebook.

Existing applications can choose tight integration (this time a Facebook account can work as a one-time sign-in mechanism) or a very loose integration (now the user you have assessed has can decide to connect to Facebook on a necessary basis).

Note : Before starting to develop integrated code, consult carefully the policies of Facebook Connect to verify that what Facebook offers is consistent with your intentions.

Create a Facebook application

Before you can start the integrated programming on your website, you must create an original Facebook application to provide you with the integration parameters required by Facebook Connect.

The next page will display the application editing form (shown in Figure 1).

Use Facebook Connect Picture 1
Figure 1

The most important field in this form is Connect URL, which is the field where you must set up the directory in which the Facebook Connect application resides. If your application uses multiple directories, you must enter the directory containing the media page with Facebook.

Use Facebook Connect Picture 2
Figure 2

Tip : To avoid the complexities of related URLs, it is necessary to keep all the Facebook Connect-related sites active in the same directory.

Initialize the environment

Two simple steps allow you to access the full Facebook Connect functionality in your website:

Note : The exact location of the JavaScript library is subject to change; Check out the Facebook Connect guide for more details.

The FB.init function uses two arguments:

Note : Facebook developers do not use Ajax calls, but instead use a hidden IFRAME ( cross-domain communication channel ) to exchange data between your web pages and the Facebook server.

The content of the file xd_receiver.htm is best downloaded directly from the Facebook document, or from the sample application of Facebook Connect.

Tip : The sample application is located at SomethingToPutHere.com. There you will see a lot of information about Facebook.

After the Facebook Connect environment is initialized, you can query the connection status of the application with Facebook.

You can execute additional JavaScript functions immediately after the environment is set. For example, to adapt a piece of introductory text on your website by passing them inside the third parameter of the FB.init function. For example, the sample application in the article uses the following code to call fb_login (this is the function that changes the text displayed in the first page) if the user has connected the sample application to Facebook's account. they:

Create Login button

You can invest more time and effort into styling for the Facebook Connect login button, but it's best to use the login button provided by Facebook. The login button is created with the Facebook Markup Language tag (FBML) fb: login-button embedded in your website.

FBML tags will automatically render into their equivalent HTML elements using Facebook Connect's JavaScript library. However, you must have special provisions to ensure that all browsers recognize the extended namespace required by FBML; otherwise the Facebook Connect library will not be able to find FBML tags:

 "- // W3C // DTD XHTML 1.0 Transitional // EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

1. The HTML element must declare the default XHTML namespace and FBML namespace:

 xmlns = "http://www.w3.org/1999/xhtml" 

 xmlns: fb = "http://www.facebook.com/2008/fbml"> 

Note : Errors in Firefox 2.x and 3.x browsers prevent you from using XSL transformations to create XHTML documents. Therefore, sites that use Facebook Connect cannot use browser-side XSLT transformations unless you want to challenge Firefox users.

After the fb namespace is defined, you can use it in FBML tags. To group the Facebook Connect button on your website, use the code below:

You can style buttons with size, background, and length attributes.

You can also group onlogin event managers, which will be executed after the user connects the application to their Facebook account. The same function you used as the ifUserConnected value in the FB.init call:

size = "large" background = "white" length = "long">

Note : Alternatively, you can specify your page to be reloaded after the user has logged in by setting the reloadIfSessionStateChanged parameter in the FB.init call function .

The FBML library will set the class of the fb: login-button tab to fb_login_ready after the user has logged in, making it easy to hide the login button if the user is connected to Facebook. All you need is a CSS line:

.fb_login_ready {display: none; } }

Use Facebook information

After the user connects your application to Facebook, you can use the Facebook API to access some Facebook features. The easiest operation now is to display the image and user name, using the FBML tag fb: profile-pic and fb: name . To display the user's photo and Facebook name in the DIV frame, you can use the HTML and FBML tags below:

FBML tags will automatically render by the FBML part of the Facebook Connect library whenever the user's login status changes. Therefore, user data displayed on the website will always reflect their Facebook profile.

Use Facebook User ID

Another information that is also available after logging in is the Facebook user ID. The user ID is stored in a session cookie for your website, so the server scripts can use it immediately after the user logs in. Cookies set by Facebook's JavaScript library use the API key as a prefix, to ensure that they are unique for each application. For example, after logging into the example application in the article, the Facebook library set up the cookies shown in Figure 3. Note that all of them use API keys as prefixes.

Use Facebook Connect Picture 3
Figure 3

The APIKEY_user cookie includes a Facebook user ID and can be used directly by server scripts to identify users. When the cookie passes through the user's browser, its value is easily changed and plays another user. To avoid such phishing attacks, Facebook has created an MD5 hash for cookie parameters and a secure application lock (the key is only shared secretly between you and Facebook) so you can use it to verify that Users do not interfere with cookie data.

The value of APIKEY_session_key cookie can also be used by the web server to create live Facebook API requests; for example, the extraction of last name and user name. Alternatively, this information can be obtained through the JavaScript Facebook API, however the information provided by JavaScript may never carry a reliable credit, so you should not use it in the environment. school that privacy and security are vital.

Conclude

In this article, we have shown you how to use Facebook Connect to authenticate users of your web applications through their Facebook accounts. To perform this function, simply follow these simple steps: