1 - Authenticate

This tutorial walks you through authenticating a player with Facebook on canvas via the Facebook SDK for PHP.

The first stage of this process is getting the player authenticated through Facebook, so we can display their name, profile picture and friend list inside the game. Let's update the codebase to support Facebook Login.

We will be using the Facebook SDK for PHP for this step. Download the latest version of the SDK from github, extract the files and copy the facebook-php-sdk/src directory into the web-friend-smash/friendsmash/server directory.

Once you have the PHP SDK downloaded and present on your web server copy and paste the following code into the top of /friendsmash/index.php:

<?php
    require 'server/fb-php-sdk/facebook.php';

    $app_id = 'APP_ID';
    $app_secret = 'APP_SECRET';
    $app_namespace = 'APP_NAMESPACE';
    $app_url = 'https://apps.facebook.com/' . $app_namespace . '/';
    $scope = 'email,publish_actions';

    // Init the Facebook SDK
    $facebook = new Facebook(array(
         'appId'  => $app_id,
         'secret' => $app_secret,
));

// Get the current user
$user = $facebook->getUser();

// If the user has not installed the app, redirect them to the Login Dialog
if (!$user) {
        $loginUrl = $facebook->getLoginUrl(array(
        'scope' => $scope,
        'redirect_uri' => $app_url,
        ));

        print('<script> top.location.href=\'' . $loginUrl . '\'</script>');
}
?>

Be sure to replace 'APP_ID', 'APP_SECRET' and 'APP_NAMESPACE' with the values that pertain specifically to your app. You can get these values from the Basic Settings in the App Dashboard.

This code performs the following steps:

• Import the PHP SDK
• Set a number of globals and use these to initialize the PHP SDK
• Attempt to get the current player's ID with $user = $facebook->getUser();. This is making use of the Signed Request parameter which apps residing inside Canvas automatically receive.
  
  • If the player has previously authorized the app, this would return their player ID. If they have not, it will return 0.
  • If the player ID is 0 then create the Login URL. This Login URL uses the Login Dialog to prompt the player to authorize the game. We then direct the player to this URL in order to authenticate them. An important note: since on Canvas our game is loaded into an iframe, we can't do a server side redirect here as we need to redirect the top frame. For this reason, we implement a client side redirect in JavaScript with top.location.

In the Friend Smash example we ask for the player to grant two additional permissions, which we request via the scope parameter. These permissions allow Friend Smash to perform certain actions on behalf of the player. In addition to the default set of basic read permissions (which includes a player's name, basic locale, profile picture and friend list), we're asking for email, which is access to the player's email address, and publish_actions. The publish actions permission allows us to write data back to Facebook about the player's activity within the game. Specifically, it will enable us to use the Scores, Achievements and Open Graph APIs, which will be discussed later in this guide. For a full list of available permissions and they're associated functionality, see our full Login documentation on permissions.

Once the player has authorized our app they will be redirected back to our Canvas URL. This is defined with the redirect_uri parameter. If you omit this parameter the Login Dialog will default to your Canvas URL i.e. where your game is loaded from, not our Canvas Page URL at apps.facebook.com/NAMESPACE.

Finally, we need to initialize the Facebook SDK for Javascript. In the index.php file, scroll down to where you see the game's javascript files included:

<script src="scripts/core.js"></script>
<script src="scripts/game.js"></script>
<script src="scripts/ui.js"></script>

and insert this code directly below:

<script>
    var appId = '<?php echo $facebook->getAppID() ?>';
    // Initialize the JS SDK
    FB.init({
        appId: appId,
        cookie: true,
    });

    FB.getLoginStatus(function(response) {
        uid = response.authResponse.userID ? response.authResponse.userID : null;
    });
</script>

Next steps

Now we've successfully logged in a player, we can query Facebook to establish their name, profile picture and friend list. We haven't done anything with this information yet though, so the game hasn't changed. Let's take the next step and personalize the app for the player.