Documentation

Did you find this helpful?

Getting Started with Facebook Instant Games

This guide shows you how to get started using Facebook Instant Games' authentication on PlayFab.

First, let's make sure you have the following requirements:

·       Facebook account (You will need a Facebook Developer account)

·       Registered PlayFab title (or a PlayFab account you can add your new tittle to)

·       Familiarity with Login Basics & Best Practices guide

Setting up your Facebook Instant Game:

Follow Facebook's Game Setup guide to configure your game, this will help you Set up your application in Facebook Instant Games. It’ll guide you to create a new app, add administrators, developers and testers, enable it in the App Dashboard, and upload and set up your game on Facebook Instant Games.

Once you create your new app, navigate to the "Settings" tab, then to "Basic" sub-tab. Locate your Application ID. Copy it somewhere, we will use it later to set up the Facebook Instant Games SDK: 

Facebook Developers site

*From Facebook from Developers website

On Facebook, in your application manager page, navigate to “Products” and locate “Instant Games”. Click on the “Setup” icon. This will take you to the “Details” section of your new Instant Games App. In this section you will be able to add details like your Tagline, and your games category.

To upload your game, navigate to the “Web Hosting” where you will find an option to upload your game.

Setting up your new game in PlayFab as a Facebook Instant Game

 Once your game has been uploaded into Facebook, create your tittle on the PlayFab account, set up on PlayFab as a “Facebook Instant Games” by going to the “Add-Ons” section on the PlayFab site. Find the “Facebook Instant Games” Add-on icon (shown below) and “Click” on it.

On this Facebook Instant Games “Add-ons” section you will be able to add your game using the App Id and the App secret you were provided by Facebook.

Now you are ready to use Facebook Instant Games Authentication from inside your title.

The first step is to download the PlayFab JavaScript SDK from inside your HTML5 game.  After downloading the JavaScript SDK, you will need to reference the PlayFabClientApi.js that you will distribute with your game (in this example, there is PlayFab directory that will host the PlayFab SDK).

//Including  the PlayFab Javascript SDK
<script src="PlayFab/PlayFabClientApi.js"></script>

After you have started your Facebook Instant Game, you obtain the player's signature from Facebook, and use it to authenticate with PlayFab:

// Starting your Facebook Instant Game
FBInstant.startGameAsync().then(
  function() {  
    // get the Player Signature for the current player    
    FBInstant.player.getSignedPlayerInfoAsync(Game.FacebookId).then(
      function (result) {
        var playerSignature = result.getSignature();         
        loginWithPlayfab(playerSignature);                               
      }
    );
  }
);

//Login in with PlayFab
function loginWithPlayfab(playerSignature) {
  logLine("Logging in via PlayFab...");
  
  // When given playerSignature, make call to LoginWithFacebookInstantGamesId API Call
  // Make sure to use your own PlayFab Title ID
  PlayFabClientSDK.LoginWithFacebookInstantGamesId({
    FacebookInstantGamesSignature: playerSignature,
    TitleId: "YOUR-PLAYFAB-TITLE",
    CreateAccount: true
    }, onPlayFabResponse);
}

// Handles response from playfab.
function onPlayFabResponse(response, error) {
  if (response)
    logLine("Response: " + JSON.stringify(response));
  if (error)
    logLine("Error: " + JSON.stringify(error));
}

function logLine(message) {
  var textnode = document.createTextNode(message);
  document.body.appendChild(textnode);
  var br = document.createElement("br");
  document.body.appendChild(br);
}

If you run your Facebook Instant Game, you should now see the successful login response be returned.



You can also see the way the login event was processing by looking at the PlayStream Monitor in the PlayFab dashboard. You should see a player authentication event come through PlayStream.

Now that the player is logged in, you are free to use the entire set of PlayFab APIs getting access to the PlayFab game services, realtime data analytics and live ops tools.

Updating Display Name and Avatar

In order to keep your player's Display Name and Avatar in PlayFab up to date with their Facebook profile information, we recommend that you update them after the login call has succeeded.

Since Facebook Display Names are NOT unique, you will need to turn on the ability to have non-unique display names in the settings for the title.


Then you will want to add the calls to PlayFab that update the display name and avatar based on the information returned by the Facebook Instant Games SDK.


var playerName = FBInstant.player.getName();
                logLine("Updating display name to "+ playerName + "...\n\n");                
                PlayFabClientSDK.UpdateUserTitleDisplayName({
                    DisplayName: playerName
                }, onPlayFabResponse);

                var playerAvatar = FBInstant.player.getPhoto();
                logLine("Updating avatar urlto " + playerAvatar + "...\n\n");
                PlayFabClientSDK.UpdateAvatarUrl({
                    ImageUrl: playerAvatar
                }, onPlayFabResponse);

Sample

The following HTML file includes the complete example of authenticating your Facebook Instant Game with PlayFab and then updating the Display Name and Avatar for the current player.

To use this on your game, include this HTML file with the PlayFab Javascript SDK file referenced along with your Instant Game bundle json in a ZIP file and upload as a hosted asset for your Facebook Instant Game.

<!DOCTYPE html>
<html>
<head>
    <!-- Load Facebook Instant Games SDK -->
    <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

    <!-- Load PlayFab SDK -->    
    <script type="text/javascript" src="PlayFabClientApi.js"></script>

</head>
<body style="color:white">
    <p>Facebook Instant Games Example</p>
    
    <script>
    
       PlayFab.settings.titleId = "YOUR-PLAYFAB-TITLE";        

        window.onload = () => {
            FBInstant.initializeAsync()
                .then(function () {                    
                    // Start loading game assets here                
                    logLine("Load your game assets...");
                    FBInstant.setLoadingProgress(100);

                    FBInstant.startGameAsync()
                        .then(function () {                            
                            logLine("Facebook Instant Game started...");
                            var playerId = FBInstant.player.getID();

                            // get the Player Signature for the current player

                            FBInstant.player.getSignedPlayerInfoAsync(playerId).then(function (result) {
                                var playerSignature = result.getSignature();
                                console.log(PlayFab);
                                loginWithPlayfab(playerSignature);
                            });

                            
                        });

                });
            
        }

        function loginWithPlayfab(playerSignature) {

            if (PlayFab.settings.titleId == "YOUR-PLAYFAB-TITLE") {
                logLine("Error:  Please set your PlayFab Title Id");
                return;
            }

            logLine("Logging in via PlayFab...");

            // When given playerSignature, make call to LoginWithFacebookInstantGamesId API Call
            // Make sure to use your own PlayFab Title ID
           
            
            PlayFabClientSDK.LoginWithFacebookInstantGamesId({
                FacebookInstantGamesSignature: playerSignature,
                CreateAccount: true
                }, onPlayFabLoginResponse);            
        }


        function onPlayFabLoginResponse(response, error) {
            onPlayFabResponse(response, error);

            //check if PlayFab login was successful, then update displayname and avatar
            if (response) {
                var playerName = FBInstant.player.getName();
                logLine("Updating display name to "+ playerName + "...\n\n");                
                PlayFabClientSDK.UpdateUserTitleDisplayName({
                    DisplayName: playerName
                }, onPlayFabResponse);

                var playerAvatar = FBInstant.player.getPhoto();
                logLine("Updating avatar urlto " + playerAvatar + "...\n\n");
                PlayFabClientSDK.UpdateAvatarUrl({
                    ImageUrl: playerAvatar
                }, onPlayFabResponse);
            }

        }

       

        // Handles response from playfab.
        function onPlayFabResponse(response, error) {            
            if (response) {               
                logLine("Response: " + JSON.stringify(response));                
            }
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
            console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>


Did you find this helpful?