GameSalad & PlayFab: Part 1

I am going to dive into it immediately. This being part 3 of a series of posts, if you are lost, please read the other two entries.

In this post, I am going to show you how to set up PlayFab, login as a user, and start pulling user data. Before you can even start, you are going to need to register on PlayFab’s site. They still have a very generous free version.

1. Download the PlayFab javascript SDK.
2. Once you unzip the folder grab the file “PlayFabClientApi.js” from unzippedFolder->PlayFabSdk->src->PlayFab. Technically there is probably a min version of it somewhere, but it makes it harder to debug if you ever have a problem.
3. Drop that file inside of the same folder that currently holds the cordova-app.js folder. Technically you can place it anywhere in your project, but if you are following along, you will need it in that location or you will have to modify the location that I mention further along.
4. Open up the “index.html” file located at the same level as the .js folder you put the “PlayFabClientApi.js.” You will need to make 2 changes to this file.
   • At the very top, add the base URL of your Playfab. It will be “https://xxxxx.playfabapi.com” You’ll need this so that your app can connect to that particular URL.  Replace all the “x” with your titleId.
   • At the very bottom, you are going to add a reference to the Playfab file.
5. To make this integration work, we are going to need an id. I could autogenerate it, but instead, I am going to use the IDFV.  Same as the other post, we will need to add a plugin. This time we will add the Device plugin. First, navigate to your project from the command line and copy and paste this:

   • cordova plugin add cordova-plugin-device

6. Now open the cordova-app.js (attached with all the changes). The first step is to login to Playfab with the IDFV. I created a handy method to do that. In my file, I placed it right inside the “app” object.

   • loginWithCustomId: function(titleId, customId){

             function loginCallback (result, error) {

                 if (result !== null) {

                 } else if (error !== null) {

                     console && console.log && console.log(error);    

                 }

             };

             PlayFab.settings.titleId = titleId;

             var loginRequest = {

                 TitleId: titleId,

                 CustomId: customId,

                 CreateAccount: true

             };

             PlayFabClientSDK.LoginWithCustomID(loginRequest, loginCallback);

         },

7. Right inside the gse.ready function, I call it with the two parameters.  The first parameter is the titleId, and the second one is the IDFV provided by the plugin.

   • app.loginWithCustomId(“xxxx”, device.uuid);

8. I created a second method that retrieves the user data of that particular id for that particular app.

   • getUserData: function() {

        functiongetUserDataCallback (result, error) {

         if (result !== null) {

          console && console.log && console.log(result);

         } else if (error !== null) {

          console && console.log && console.log(error);

         }

       }

      var userDataRequest = {};

      PlayFabClientSDK.GetUserData(userDataRequest, getUserDataCallback);

     },

9. And then, I call the user data function from the successful response of the loginWithCustomId.

   • function loginCallback (result, error) {

                 if (result !== null) {

                     app.getUserData();

                 }

10. For now, I write all the responses to the console:
    • The login response:
      

      {“code”:200,”status”:”OK”,”data”:{“SessionTicket”:”xxx”,”PlayFabId”:”xxx”,”NewlyCreated”:false,”SettingsForUser”:{“NeedsAttribution”:false,”GatherDeviceInfo”:true,”GatherFocusInfo”:true},”LastLoginTime”:”2020-04-12T01:58:38.938Z”,”EntityToken”:{“EntityToken”:”xxxxxxx”,”TokenExpiration”:”2020-04-13T01:59:49.85Z”,”Entity”:{“Id”:”xxxx”,”Type”:”title_player_account”,”TypeString”:”title_player_account”}},”TreatmentAssignment”:{“Variants”:[],”Variables”:[]}},”CallBackTimeMS”:1183,”Request”:{“TitleId”:”xx”,”CustomId”:”xxxx”,”CreateAccount”:true}}

    • The response for the user data.
      

      {“code”:200,”status”:”OK”,”data”:{“Data”:{“avatar”:{“Value”:”1″,”LastUpdated”:”2020-04-11T23:05:41.501Z”,”Permission”:”Public”}},”DataVersion”:1},”CallBackTimeMS”:140,”Request”:{}}

11. And this is what it looks like from PlayFab:

Up to this point, you could have done all of this without the new functionality. Tomorrow I’ll try to bring the data I get from Playfab back into GameSalad.