Add a login menu - Login with Steam - (Unreal Engine module)

Last updated on June 12, 2024

What's on the menu

In this tutorial, you will learn how to prepare the widgets needed to perform Single Platform Authentication logins with Steam.

The related files are available in the Resources section and consist of the following components:

• SinglePlatformAuthWidget_Starter, a C++ class containing the logic to handle the interactions of the widget.
  • Header file: /Source/AccelByteWars/TutorialModules/Access/SinglePlatformAuth/UI/SinglePlatformAuthWidget_Starter.h
  • Source file: /Source/AccelByteWars/TutorialModules/Access/SinglePlatformAuth/UI/SinglePlatformAuthWidget_Starter.cpp
• W_SinglePlatformAuthWidget_Starter, a Blueprint widget created through Unreal Motion Graphics (UMG) and is a descendant of the SinglePlatformAuthWidget_Starter class.
  • Widget Blueprint file: /Content/TutorialModules/Access/SinglePlatformAuth/UI/W_SinglePlatformAuthWidget_Starter.uasset

You can view the W_SinglePlatformAuthWidget_Starter widget directly in the Unreal Editor by navigating to the location of the blueprint file in the Content Browser and double-clicking it. You will see the Btn_LoginWithSinglePlatformAuth button in the Hierarchy panel as shown below.

The Btn_LoginWithSinglePlatformAuth button will be used to perform the login with Steam and its interactions are handled in the SinglePlatformAuthWidget_Starter class. The following function will be called when the button is clicked:

void USinglePlatformAuthWidget_Starter::OnLoginWithSinglePlatformAuthButtonClicked()
{
    // TODO: Trigger login with single auth platform here.
    UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("Login with single platform auth is not yet implemented"));
}

You will add the widget above to the preexisting login menu implemented in the Login with device ID module. This will make the widget dependent on the AuthEssentials module. As a result, the SinglePlatformAuthWidget_Starter class will have to check if the starter mode of the AuthEssentials module is active through the following code snippet. The button will be hidden if the starter mode is inactive.

void USinglePlatformAuthWidget_Starter::NativeOnActivated()
{
    Super::NativeOnActivated();

    if (!AuthEssentialsModule->IsStarterModeActive())
    {
        UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("SinglePlatformAuth is dependent to AuthEssentials, please enable starter mode for the AuthEssentials module."))
        Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
        return;
    }
}

The following code snippet will allow you to check if the bAutoLogin flag is set to true in the AuthEssentials module settings. If it is, the game will attempt to automatically log in with Steam on launch. This will also check if the -bAutoLogin=true flag is set in the command line arguments.

bool USinglePlatformAuthWidget_Starter::ShouldAutoLogin()
{
    bool bAutoLogin = false;
    const FString AutoLoginKey = "bAutoLogin";
    GConfig->GetBool("/ByteWars/TutorialModule.AuthEssentials", *AutoLoginKey, bAutoLogin, GEngineIni);
    FParse::Bool(FCommandLine::Get(), *FString::Printf(TEXT("-%s="), *AutoLoginKey), bAutoLogin);
    return bAutoLogin;
}

The following code snippet will allow you to check if the bAllowDeviceIdLogin flag is set to true in the SinglePlatformAuth module settings. If it is enabled, the game will display the device ID login option. This will also check if the -bAllowDeviceIdLogin=true flag is set in the command line arguments.

bool USinglePlatformAuthWidget_Starter::ShouldDisplayDeviceIdLogin()
{
    bool bAllowDeviceIdLogin = false;
    const FString AllowDeviceIdLoginKey = "bAllowDeviceIdLogin";
    GConfig->GetBool("/ByteWars/TutorialModule.SinglePlatformAuth", *AllowDeviceIdLoginKey, bAllowDeviceIdLogin, GEngineIni);
    FParse::Bool(FCommandLine::Get(), *FString::Printf(TEXT("-%s="), *AllowDeviceIdLoginKey), bAllowDeviceIdLogin);
    return bAllowDeviceIdLogin;
}

The code snippet below will allow you to get the default native platform from the OnlineSubsystem section in the Engine.ini file. This will be used to determine the default native platform to use for the login process, which is Steam in this case.

FString USinglePlatformAuthWidget_Starter::GetDefaultNativePlatform()
{
    FString DefaultNativePlatform;
    const FString OnlineSubsystemSection = "OnlineSubsystem";
    const FString NativePlatformKey = "NativePlatformService";
    GConfig->GetString(*OnlineSubsystemSection, *NativePlatformKey, DefaultNativePlatform, GEngineIni);
    return DefaultNativePlatform;
}

Ready the UI

Previously, you have implemented a login menu widget called W_Login_Starter in the Login with device ID module that comes with complete login states such as in-progress, failed, and successful.

By utilizing the W_Login_Starter widget, you will append the W_SinglePlatformAuthWidget_Starter widget to the login menu. This will allow the user to log in with Steam and display the login states in the same login menu.

1. Open the SinglePlatformAuthWidget_Starter C++ class and add the code below to the NativeOnActivated() function. This will bind the OnLoginWithSinglePlatformAuthButtonClicked function to the Btn_LoginWithSinglePlatformAuth button.

   void USinglePlatformAuthWidget_Starter::NativeOnActivated()
   {
       Super::NativeOnActivated();
   
       if (!AuthEssentialsModule->IsStarterModeActive())
       {
           UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("SinglePlatformAuth is dependent to AuthEssentials, please enable starter mode for the AuthEssentials module."))
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       const bool bIsNativePlatformValid = IOnlineSubsystem::GetByPlatform() != nullptr;
       if (!bIsNativePlatformValid)
       {
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       Btn_LoginWithSinglePlatformAuth->OnClicked().AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);
   }

2. Add the following code to the OnLoginWithSinglePlatformAuthButtonClicked function. This will set the login state to LoggingIn and bind the OnRetryLoginDelegate to the OnLoginWithSinglePlatformAuthButtonClicked function, allowing the user to retry the login process if it fails.

   void USinglePlatformAuthWidget_Starter::OnLoginWithSinglePlatformAuthButtonClicked()
   {
       LoginWidget->SetLoginState(ELoginState::LoggingIn);
       LoginWidget->OnRetryLoginDelegate.AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);
   
       // TODO: Later, you will call login with Single Platform Auth here.
   }

3. Compile your code and open the project in Unreal Editor. In the Content Browser, head to the TutorialModules/Access/SinglePlatformAuth/ directory and open DA_SinglePlatformAuth. Set the Is Starter Mode Active flag to true and save the asset.

   

4. Verify the widgets by playing the game in Unreal Editor. You should see the Login with Steam button listed in the W_Login_Starter widget.

Implement auto login with Steam

This section will guide you on how to implement automatic logins with Steam at launch.

1. In the DefaultEngine.ini file, find the bAutoLogin flag under the /ByteWars/TutorialModule.AuthEssentials section and set it as true to enable the automatic login in the AuthEssentials module.

   [/ByteWars/TutorialModule.AuthEssentials]
   bAutoLogin=true

2. Open the SinglePlatformAuthWidget_Starter C++ class and add the code snippet below in NativeOnActivated() to check if the bAutoLogin flag is set as true. If it is, it will directly call the OnLoginWithSinglePlatformAuthButtonClicked function to automatically log in with Steam on launch.

   void USinglePlatformAuthWidget_Starter::NativeOnActivated()
   {
       Super::NativeOnActivated();
   
       if (!AuthEssentialsModule->IsStarterModeActive())
       {
           UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("SinglePlatformAuth is dependent to AuthEssentials, please enable starter mode for the AuthEssentials module."))
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       const bool bIsNativePlatformValid = IOnlineSubsystem::GetByPlatform() != nullptr;
       if (!bIsNativePlatformValid)
       {
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       if (ShouldAutoLogin())
       {
           OnLoginWithSinglePlatformAuthButtonClicked();
           return;
       }
       
       Btn_LoginWithSinglePlatformAuth->OnClicked().AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);
   }

3. Compile your code and ensure there are no errors.

Implement device ID login button visibility

This section will show you how to toggle the device ID login button visibility when the Single Platform Auth module is active. This allows developers to enable or disable the device ID login option based on their preference.

1. In the DefaultEngine.ini file, find the bAllowDeviceIdLogin flag under the [/ByteWars/TutorialModule.SinglePlatformAuth] section and set the value as true to enable the device ID login option.

   [/ByteWars/TutorialModule.SinglePlatformAuth]
   bAllowDeviceIdLogin=true

2. Open the SinglePlatformAuthWidget_Starter C++ class and add the code snippet below in NativeOnActivated(). This code will make the device ID login button visible if the bAllowDeviceIdLogin flag is set to true, and hide the button if it's not.

   void USinglePlatformAuthWidget_Starter::NativeOnActivated()
   {
       Super::NativeOnActivated();
   
       if (!AuthEssentialsModule->IsStarterModeActive())
       {
           UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("SinglePlatformAuth is dependent to AuthEssentials, please enable starter mode for the AuthEssentials module."))
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       const bool bIsNativePlatformValid = IOnlineSubsystem::GetByPlatform() != nullptr;
       if (!bIsNativePlatformValid)
       {
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       if (ShouldAutoLogin())
       {
           OnLoginWithSinglePlatformAuthButtonClicked();
           return;
       }
       
       Btn_LoginWithSinglePlatformAuth->OnClicked().AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);
       LoginWidget->SetButtonLoginVisibility(ShouldDisplayDeviceIdLogin() ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
   }

3. Compile your code and ensure there are no errors.

Implement adaptive login button text

This section will show you how to change the login button text to the native platform name set in the DefaultEngine.ini file. This will allow the user to know which platform they are logging in with.

1. Open the SinglePlatformAuthWidget_Starter C++ class and add the code snippet below in NativeOnActivated(). This code will change the login button text to the native platform name set in the DefaultEngine.ini file.

   void USinglePlatformAuthWidget_Starter::NativeOnActivated()
   {
       Super::NativeOnActivated();
   
       if (!AuthEssentialsModule->IsStarterModeActive())
       {
           UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("SinglePlatformAuth is dependent to AuthEssentials, please enable starter mode for the AuthEssentials module."))
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       const bool bIsNativePlatformValid = IOnlineSubsystem::GetByPlatform() != nullptr;
       if (!bIsNativePlatformValid)
       {
           Btn_LoginWithSinglePlatformAuth->SetVisibility(ESlateVisibility::Collapsed);
           return;
       }
   
       if (ShouldAutoLogin())
       {
           OnLoginWithSinglePlatformAuthButtonClicked();
           return;
       }
   
       const FString LoginButtonText = TEXT_LOGIN_WITH.ToString().Replace(TEXT("%PLATFORM%"), *GetDefaultNativePlatform());
       Btn_LoginWithSinglePlatformAuth->SetButtonText(FText::FromString(LoginButtonText));
       Btn_LoginWithSinglePlatformAuth->OnClicked().AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);
       LoginWidget->SetButtonLoginVisibility(ShouldDisplayDeviceIdLogin() ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
   }

2. Compile your code and ensure there are no errors.

Resources

• The files used in this tutorial section are available in the Byte Wars GitHub repository.
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Access/SinglePlatformAuth/UI/SinglePlatformAuthWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Access/SinglePlatformAuth/UI/SinglePlatformAuthWidget_Starter.cpp
  • AccelByteWars/Config/DefaultEngine.ini