Steps for Using Facebook Login With the JavaScript SDK There are a few steps that you will need to follow to integrate Facebook Login into your web application, most of which are included in the quickstart example at the top of this page. At a high level those are: Checking the login status to see if someones already logged into your app. During this step, you also should check to see if someone has previously logged into your app, but is not currently logged in. If they are not logged in, invoke the login dialog and ask for a set of data permissions. Verify their identity. Store the resulting access token. Make API calls. Log out. Checking login status The first step when loading your web page is figuring out if a person is already logged into your app with Facebook login. You start that process with a call to FB.getLoginStatus. That function will trigger a call to Facebook to get the login status and call your callback function with the results. Taken from the sample code above, heres some of the code thats run during page load to check a persons login status: FB.getLoginStatus(function(response) { statusChangeCallback(response); }); The response object thats provided to your callback contains a number of fields: { status: connected, authResponse: { accessToken: ..., expiresIn:..., signedRequest:..., userID:... } } status specifies the login status of the person using the app. The status can be one of the following: connected. The person is logged into Facebook, and has logged into your app. not_authorized. The person is logged into Facebook, but has not logged into your app. unknown. The person is not logged into Facebook, so you dont know if theyve logged into your app. authResponse is included if the status is connected and is made up of the following: accessToken. Contains an access token for the person using the app. expiresIn. Indicates the UNIX time when the token expires and needs to be renewed. signedRequest. A signed parameter that contains information about the person using the app. userID is the ID of the person using the app. Once your app knows the login status of the person using it, it can do one of the following: If the person is logged into Facebook and your app, redirect them to your apps logged in experience. If the person isnt logged into your app, or isnt logged into Facebook, prompt them with the Login dialog with FB.login() or show them the Login Button. Logging people in If people using your app arent logged into your app or not logged into Facebook, you can use the Login dialog to prompt them to do both. Various versions of the dialog are shown below. If they arent logged into Facebook, theyll first be prompted to log in and then move on to logging in to your app. The JavaScript SDK automatically detects this, so you dont need to do anything extra to enable this behavior. There are two ways to log someone in: Use the Login Button. Use FB.login() from the JavaScript SDK. Using the Login Button Including the Login Button into your page is easy. Visit the documentation for the login button and set the button up the way you want. Then click Get Code and it will show you the code you need to display the button on your page. Note that in the example at the start of this document, we use the onlogin attribute on the button to set up a JavaScript callback that checks the login status to see if the person logged in successfully: This is the callback. It calls FB.getLoginStatus() to get the most recent login state. (statusChangeCallback() is a function thats part of the example that processes the response.) function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } Invoking the Login Dialog with the JavaScript SDK For apps that want to use their own button, you can invoke the Login Dialog with a simple call to FB.login(): FB.login(function(response){ // Handle the response object, like in statusChangeCallback() in our demo // code. }); As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isnt blocked by browsers). There is an optional scope parameter that can be passed along with the function call that is a comma separated list of permissions to request from the person using the app. Heres how you would call FB.login() with the same scope as the Login Button we used above. In this case, it would ask for a persons email address and a list of friends who also use the app: FB.login(function(response) { // handle the response }, {scope: public_profile,email}); Handling Login dialog response At this point in the login flow, your app displays the Login dialog, which gives people the choice of whether to cancel or to enable the app to access their data. Whatever choice people make, the browser returns to the app and response data indicating whether they connected or cancelled is sent to your app. When your app uses the JavaScript SDK, it returns an authResponse object to the callback specified when you made the FB.login() call: This response can be detected and handled within the FB.login call, like this: FB.login(function(response) { if (response.status === connected) { // Logged into your app and Facebook. } else if (response.status === not_authorized) { // The person is logged into Facebook, but not your app. } else { // The person is not logged into Facebook, so were not sure if // they are logged into this app or not. } }); Asking for Permissions One of the most important parts of launching the Login Dialog is choosing what data your app would like access to. These examples have all used the scope parameter, which is how you ask for access to someones data. These are all called Permissions. Permissions are covered in depth in our permissions guide. However, there are a few things to remember when dealing with permissions and the login dialog: You ask for permissions when the dialog is created. The resulting set of permissions is tied to the access token thats returned. Other platforms may have a different set of permissions. For example, on iOS you can ask for places a persons been tagged, while in the web version of your app that permission is not required for the experience. You can add permissions later when you need more capabilities. When you need a new permission, you simply add the permission you need to the list youve already granted, re-launch the Login Dialog and it will ask for the new permission. The Login Dialog lets people decline to share certain permissions with your app that you ask for. Your app should handle this case. Learn more about this in our permissions dialog. Apps that ask for more than public_profile, email and user_friends must be reviewed by Facebook before they can be made available to the general public. Learn more in our documentation for login review
Posted on: Thu, 11 Sep 2014 23:06:10 +0000
Trending Topics
Recently Viewed Topics
© 2015