Unreal Engine 4 GameSparks Facebook Authentication
VERY IMPORTANT! This tutorial is only valid if you are using up to Unreal version 4.10. If you are using a more recent version, please ignore the details given here. An updated tutorial is being prepared and will be available very soon!
Introduction
GameSparks allows you to use social authentication to keep track of your players without registering them. This tutorial aims to get you started with Unreal Engine 4's Facebook online subsystem and using it to retrieve an authentication token which allows you to use GameSpark's social authentication.
Downloadables. You can download the assets that support this tutorial here.
Setting up your project
Unreal Setup
DefaultEngine.ini
First you need to configure your game for the Facebook online subsystem. For this you need to have a Facebook AppID which you can get from the Facebook developer page.
[OnlineSubsystemFacebook]
bEnabled = true
[OnlineSubsystemFacebook.OnlineIdentityFacebook]
ClientId = Your Facebook AppID
YourProject.Build.cs
In your project's build file, you need to include extra modules which will allow you to
- Activate the interface to online subsystems.
- Use the API to integrate Facebook into your project.
using UnrealBuildTool;
public class YourProjectName: ModuleRules
{
public YourProjectName(TargetInfo Target)
{
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" });
PublicDependencyModuleNames.AddRange(new string[] { "OnlineSubsystem", "OnlineSubsystemUtils", "Networking", "Sockets" });
PrivateDependencyModuleNames.AddRange(new string[] { "OnlineSubsystem", "Networking", "Sockets" });
PrivateDependencyModuleNames.Add("OnlineSubsystem");
//Add IOS if you're using it
if ((Target.Platform == UnrealTargetPlatform.Win32) || (Target.Platform == UnrealTargetPlatform.Win64 ))
{
//Facebook API
PublicDependencyModuleNames.AddRange(new string[] { "Facebook" });
//Facebook Subsystem
PrivateDependencyModuleNames.Add("OnlineSubsystemFacebook");
//Include
PublicIncludePaths.Add("Runtime/Online/OnlineSubsystemFacebook/Public");
PublicIncludePaths.Add("Runtime/Online/OnlineSubsystemFacebook/Private/Windows");
}
}
}
Refresh your visual studio project through the editor
After you include the modules into your project, refresh your C++ files through the Editor so the changes are recognized in your project. Failing to do this step will result in your "Online.h" and "OnlineSubsystemFacebook.h" not being recognized.
Facebook App Settings
In your Facebook settings advanced tab, flip the button to state that your app is a native one if you're developing or debugging on a desktop.
For Valid OAuth redirect URIs ensure that you add:
https://www.facebook.com/connect/login_success.html
That's all you need! Here's how we set up our App:
To use Facebook authentication with GameSparks, follow the tutorial to setup Unreal for GameSpark integration, here.
Facebook API Component
Header
This is the component which will expose the Online Subsystem API to the Blueprints. Exposing the API through a component allows us to use delegates comfortably and allows us to call the functions through GetGameMode->FBAPIComponent->Function from anywhere in BluePrint.
//GameSparks LTD
#pragma once
#include "Components/ActorComponent.h" //Parent, Actor component
#include "OnlineSubsystemFacebook.h" //Facebook Online Subsystem
#include "Online.h" // Online Subsystem
#include "FBAPIComponent.generated.h" // Has to be last include otherwise you get an error
UCLASS( ClassGroup=(Custom), meta=(BlueprintSpawnableComponent) )
class FACEBOOKTEST_API UFBAPIComponent : public UActorComponent
{
GENERATED_BODY()
public:
// Sets default values for this component's properties
UFBAPIComponent();
DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnAuth, FString, AuthToken);
//Delegate instance
UPROPERTY(BlueprintAssignable)
FOnAuth OnAuthChangeDelegate;
//UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Online")
UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Online")
FString AuthToken;
//Subsystem instance
IOnlineSubsystem* FBSubSystem;
//NewAcount instance
FOnlineAccountCredentials* NewAccount;
//UFunction to login using username/Email and password
UFUNCTION(BlueprintCallable, Category = "Online")
virtual void FacebookLogin(FString UserName, FString Password);
//Function which handles login and sets auth token
virtual void ReturnAuthToken(int32 LocalUserNum, bool bWasSuccessful, const FUniqueNetId& UserId, const FString& Error);
// Called when the game starts
virtual void BeginPlay() override;
// Called every frame
virtual void TickComponent( float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction ) override;
};
CPP
//GameSparks LTD
#include "FacebookTest.h" //Your project name
#include "FBAPIComponent.h" // The header of this CPP
// Sets default values for this component's properties
UFBAPIComponent::UFBAPIComponent()
{
// Set this component to be initialized when the game starts, and to be ticked every frame. You can turn these features
// off to improve performance if you don't need them.
bWantsBeginPlay = true;
PrimaryComponentTick.bCanEverTick = true;
// ...
}
// Called when the game starts
void UFBAPIComponent::BeginPlay()
{
Super::BeginPlay();
//Make instance of online subsystem
FBSubSystem = IOnlineSubsystem::Get(TEXT("Facebook"));
//Init Subsystem
FBSubSystem->Init();
//Assign Delegate Function to handle login
FBSubSystem->GetIdentityInterface()->AddOnLoginCompleteDelegate_Handle(0, FOnLoginCompleteDelegate::CreateUObject(this, &UFBAPIComponent::ReturnAuthToken));
}
void UFBAPIComponent::ReturnAuthToken(int32 LocalUserNum, bool bWasSuccessful, const FUniqueNetId& UserId, const FString& Error)
{
//Returns AuthToken
AuthToken = FBSubSystem->GetIdentityInterface()->GetAuthToken(0);
//Broadcast this delegate which will contain the AuthToken to be used by the GSFacebookConnectRequest node
OnAuthChangeDelegate.Broadcast(AuthToken);
}
void UFBAPIComponent::FacebookLogin(FString UserName, FString Password)
{
//Exposed to Blueprint so UserName and Password can be passed in. Account type must be 'facebook' so the subsystem recognizes which authentication process to use.
NewAccount = new FOnlineAccountCredentials;
NewAccount->Id = UserName;
NewAccount->Token = Password;
NewAccount->Type = "facebook";
//Use native subsystems' login
FBSubSystem->GetIdentityInterface()->Login(0, *NewAccount);
}
// Called every frame
void UFBAPIComponent::TickComponent( float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction )
{
Super::TickComponent( DeltaTime, TickType, ThisTickFunction );
// ...
}
Unreal Engine Editor and Blueprint
To get the Facebook authentication to work for Blueprint:
- Open your GameMode and add a GameSparks component and the FBAPI Component.
- Follow the instructions for setting up GameSparks.
- Drop a reference of the FBAPI component in the event graph and access its functions.
- For the FBAPI Component you'll need an event or function which will call the C++ login function which takes a username and password parameters.
- Click on the FBAPI component on the components list of your GameMode screen and in the details window add the 'On Auth Change' event. Connect the GameSparks Facebook Authentication Request node to the event, connecting the Auth token from the event to the access token slot in the GameSparks request node.
- Design a way for your users to input their details or manually do so for testing.
We have attached uassets which show an example of this working with a UMG Widget interface.