34. How to integrate PlayFab with UE for Login/Register

In this post we will look into integrating PlayFab login and create blueprints. We will focus specifically on blueprint logic rather than the design.

This is effectively equivalent to OWS login/register – so don’t do both.

You can find demo video showing login/register here.

Pre-requisites

The pre-requisites is that you register with PlayFab, login or register here: https://developer.playfab.com/en-us/login

Once you login you will be greeted with this screen:

Take note of the ID here, you will need it when setting up.

Next, click into it and you will see the following screen:

Click on the cog and a small menu will pop up, choose Title settings.

Now you can select the Secret Keys on the dashboard and see the API keys here – create new one for your development. You should create a separate key usually for different purposes, e.g. development, test, production, etc.

Now you have title ID and title secret key available.

Next, download the plugin for your Unreal Engine

https://www.unrealengine.com/marketplace/en-US/product/playfab-sdk

Once you’ve installed it to the engine, we’re ready to configure it in your project.

Open your project, click Edit -> Plugins

Search for the playfab plugin and enable it.

After enabling the plugin, click Edit -> Project Settings and locate Playfab under Plugins section.

Enter the title ID and the secret key you’ve located in the earlier steps.

You’ve now configured Playfab to be used in your project!

Login Widget

Here’s a simple widget design for Login screen.

There are 3 buttons, let’s look at the blueprints for each.

The Quit and Register buttons are simple; on quit, close the game.

When you click Register, we want to open up the register widget (which we’ll look at implementation soon).

The Go to register function is as follows:

Now let’s look into the login implementation, which utilizes Playfab.

There are a few things utilized here, let’s go in order.

First, Login with Play Fab – this is a function from the PlayFab blueprint. It expects you to make a ClientLoginWithPlayFabRequest.

We just need to provide it with Username and Password that are extracted from the textboxes in the UI.

The Login with Play Fab function expects you to setup an event for success and error scenario – it will only callback to one of them on each request.

Let’s do the error one first.

This simply creates a custom error widget to feedback the results to user.

The design:

And the implementation:

This error widget is used across multiple places, including login, register, create character, etc.

The Login Success will respond us with a payload:

You can see what kind of information it holds:

We don’t need all of it at this stage, but we will add it to our game instance for us to be able to use this info throughout the game project.

In case you’re not sure how to create game instance, right click and select to create new blueprint.

Then search for ‘game instance’ and select that for parent.

Then click Edit -> Project Settings and search ‘Game instance’ and select it

All you need to do is add variable of type Client Login Result to your Game Instance class

Finally, when successful, you can go to Character Selection screen – which will be covered in the next post.

Register Widget

In this screen, we want to register a user. For this, we will take username, email and password.

Let’s look at the Back button first:

This is simply navigating back to Login widget and closing self.

Let’s check the blueprints for clicking register.

When clicking the Register button, we mainly want to invoke the Register Play Fab User function, from the Play fab plugin.

This requires the Client Register Play Fab User Request payload.

We just need to assign the email, password and username here.

Now we need to define the success and error custom events – in the same fashion as we did with Login.

When there’s an error, we will handle it by creating the error widget and assigning the error message – it’s the same function.

On success, we simply navigate back to login – this is the same functionality as clicking back. You may want to do something else here too, like provide success message to user, then navigate back.

That’s it for Login and Register!

In the next post we will look at how to create characters for this new user.