Unreal Engine Module - Login with Steam - Add a Login Menu

Last updated on January 13, 2024

What's on the Menu​

In this section of the tutorial, you will learn how to prepare the widgets needed to perform login with Single Platform Auth, which in this case is Steam. The widget is very simple, it is just a button that when clicked will perform log in with Steam. This widget consists of two parts.

  • First, there is a C++ class called SinglePlatformAuthWidget_Starter. This is the class where you will call a function to perform login with Steam when the button is clicked.

    • Header file can be found in /Source/AccelByteWars/TutorialModules/Access/SteamAuthentication/UI/SinglePlatformAuthWidget_Starter.h.
    • CPP file can be found in /Source/AccelByteWars/TutorialModules/Access/SteamAuthentication/UI/SinglePlatformAuthWidget_Starter.cpp.

  • Second, there is a widget Blueprint called W_SinglePlatformAuthWidget_Starter which is created using Unreal Motion Graphics (UMG). Its parent class is the SinglePlatformAuthWidget_Starter class. You can find this Blueprint in /Content/TutorialModules/Access/SteamAuthentication/UI/W_SinglePlatformAuthWidget_Starter.uasset.

Alright, now let’s take a look at the W_SinglePlatformAuthWidget_Starter widget. In the Unreal Editor, open the file, and you should see a button called Btn_LoginWithSinglePlatformAuth displayed like this.

Steam login widget button

As you can see, the widget only contains a button to perform login with Steam. When you click the button, it will trigger the following function inside the SinglePlatformAuthWidget_Starter class CPP file.

void USinglePlatformAuthWidget_Starter::OnLoginWithSinglePlatformAuthButtonClicked()
{
    UCommonActivatableWidget* ParentWidget = UAccelByteWarsBaseUI::GetActiveWidgetOfStack(EBaseUIStackType::Menu, this);
    if (!ParentWidget)
    {
        return;
    }

    UTutorialModuleDataAsset* AuthEssentialsModule = UTutorialModuleUtility::GetTutorialModuleDataAsset(FPrimaryAssetId("TutorialModule:AUTHESSENTIALS"), this);
    if (!AuthEssentialsModule)
    {
        return;
    }

    // Use Auth Essentials's default files for login if starter mode is not active.
    if (!AuthEssentialsModule->IsStarterModeActive())
    {
        UAuthEssentialsSubsystem* AuthSubsystem = GetGameInstance()->GetSubsystem<UAuthEssentialsSubsystem>();
        ensure(AuthSubsystem);

        // Grab the login widget reference to show login state UI.
        ULoginWidget* LoginWidget = Cast<ULoginWidget>(ParentWidget);
        ensure(LoginWidget);

        LoginWidget->SetLoginState(ELoginState::LoggingIn);
        LoginWidget->OnRetryLoginDelegate.AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);

        // Login with single platform auth is considered as login with default native platform.
        // Thus, it doesn't need username, token, nor the login method.
        AuthSubsystem->SetAuthCredentials(EAccelByteLoginType::None, TEXT(""), TEXT(""));
        AuthSubsystem->Login(GetOwningPlayer(), FAuthOnLoginCompleteDelegate::CreateUObject(LoginWidget, &ULoginWidget::OnLoginComplete));
    }
    // Use Auth Essentials's starter files for login if starter mode is active.
    else
    {
        // TODO: Trigger login with single auth platform here.
        UE_LOG_AUTH_ESSENTIALS(Warning, TEXT("Login with single auth platform is not yet implemented"));
    }
}

Most of the implementation above is Byte Wars specifics. Since we will be using the existing implementation from Module: Login with Device ID - Use the Online Subsystem to log in, the implementation needs to be aware of whether AUTHESSENTIALS module has its starter module active or not, and use the correct subsystem. What you need to focus on is the highlighted lines. That's where you will implement the actual log in with steam functionality.

Ready the UI​

As you know, you have created a login menu in the Module: Login with Device ID namely W_Login_Starter. That login menu has a complete login state including when login is in-progress, failed, and successful.

But, that login menu has no login with the Steam option yet. Therefore, you will use both W_Login_Starter and W_SinglePlatformAuthWidget_Starter. The idea is to generate W_SinglePlatformAuthWidget_Starter to W_Login_Starter thus allowing the user to have a button to perform login with Steam. This section will guide you on how to do that.

  1. First, open the SinglePlatformAuthWidget_Starter class CPP file and add the following code. It will check whether the currently displayed widget is a W_Login_Starter or not in order to show the login state UI (e.g. login in progress, success, or failed).

    void USinglePlatformAuthWidget_Starter::OnLoginWithSinglePlatformAuthButtonClicked()
    {
        ...
        // Use Auth Essentials's starter files for login if starter mode is active.
        else 
        {
            // Grab the login widget reference to show login state UI.
            ULoginWidget_Starter* LoginWidget_Starter = Cast<ULoginWidget_Starter>(ParentWidget);
            ensure(LoginWidget_Starter);

            LoginWidget_Starter->SetLoginState(ELoginState::LoggingIn);
            LoginWidget_Starter->OnRetryLoginDelegate.AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);

            // TODO: Later, you will call login with Single Platform Auth here.
        }
    }

  2. Now, rebuild the project and open the project in Unreal Editor. Then, go to Content/TutorialModules/Access/SteamAuthentication/ folder and open the DA_SinglePlatformAuth.uasset. Then, enable the Is Starter Mode Active flag.

    Activate Tutorial Module Data Asset starter mode

  3. Now, let's try whether the widgets are set up properly. Run your game in the Unreal Editor and you should see the login with Steam button.

    Tutorial Module UIs quick test

  4. Congratulations! You have successfully set up the widgets to log in with Steam.

Implement Auto Login​

Now, let's implement auto login with Steam when the game is launched.

  1. In the Byte Wars project, find a setting called bAutoLogin under /ByteWars/TutorialModule.AuthEssentials category, and change the value to true. We will use this setting to signal the game whether to automatically log in once the game launches or show a login menu to the player.

    [/ByteWars/TutorialModule.AuthEssentials]
    bAutoLogin=true

  2. Next, open the SinglePlatformAuthWidget_Starter class CPP file. In the NativeConstruct() add the following code. This code will make the "Login with Steam" button in the UI visible if the Steam OnlineSubsystem is detected, otherwise it will hide the button. Additionally, this code will check for the presence of the bAutoLogin flag that we configured before, and if present and set to true, we will initiate the Steam login process.

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

        Btn_LoginWithSinglePlatformAuth->OnClicked().Clear();
        Btn_LoginWithSinglePlatformAuth->OnClicked().AddUObject(this, &ThisClass::OnLoginWithSinglePlatformAuthButtonClicked);

        // Toggle the login button visibility if the default native platform exists.
        Btn_LoginWithSinglePlatformAuth->SetVisibility(IOnlineSubsystem::GetByPlatform() ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
        SetVisibility(IOnlineSubsystem::GetByPlatform() ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);

        // Auto login with default native platform.
        bool bAutoLogin = true;
        GConfig->GetBool(TEXT("/ByteWars/TutorialModule.AuthEssentials"), TEXT("bAutoLogin"), bAutoLogin, GEngineIni);
        if (bAutoLogin && GetVisibility() == ESlateVisibility::Visible)
        {
            OnLoginWithSinglePlatformAuthButtonClicked();
        }
    }

  3. Since you haven't set up Steam OSS in the Byte Wars project, you won't be able to test the auto login implementation. You will test this implementation in the next several tutorial sections. For now, compile your code and ensure that there are no errors.

Resources​

に最終更新

On this page