[HOW TO] Retrieve user's Steam profile info using login

Hi there!
In this step by step tutorial, we will see how to retrieve the current user Steam profile with all its linked information and data by setting up a Steam login process.

Here is an example

EASY :star2: This tutorial is for everyone.


PRERIQUISITES

We will need the Steam Complete plugin, available for $8 per month.
This tutorial works on any Bubble plan.

iFrame Steam Complete


1. Getting the Steam API key

You will need an API key in order to authorize yourself and tell Steam you’re allowed to request data. This is mandatory for most of the calls in the plugin. Note that you don’t need one if you’re aiming to just use the plugin to log the user in!

Visit the Steam API Key page and log in with your Steam account. (If you don’t have a Steam account you will have to create one and buy at least 5 dollars of game to have access to the API)

Once you are on this page, apply for a key and fill out your app URL. You need to provide only the domain of the URL (eg myapp.fr) and make sure it’s valid.

Once you filled the form, copy the key from Steam (in blue) and paste it into the plugin settings.

You can now use most of the call related to Steam without any more configuration.

2. Log the user in

You need to have setup valid API keys. Please follow the first part of the tutorial before if not.

This is what will happen, as a schema:

First, put the Steam Button element on your page where you want the user to initiate to login.

Setup the button by setting the design parameters where you can choose the look of the button. More information about the different button look here. You do not need to change any other parameter in the setup.

Then, we need to add two event triggers to our page.

The first one, " When a Steam button just got redirected " will be triggered when the user completed the login and is just redirect to your page. At this point, we still didn’t have verified the authenticity of the login and we don’t have the Steam ID of the user. This trigger is then useful to show the user a loading popup or anything that indicate the login has been triggered and make him wait.

A few milliseconds later, the event " When a Steam button returned a valid SteamID " will be triggered. This time, the login has been verified and the Steam ID of the user has been retrieved.

You can now access and save the Steam ID of the user that just log in. To do that, search for the " Returned Steam ID 64 " under the button states.

Easy, isn’t it ? You’re all set!

:speaking_head: GO FURTHER: If you want to login or register your user in Bubble using Steam, please check “Can I natively log my user in Bubble using Steam ?” before and follow this tutorial.

:speaking_head: GO FURTHER: If you want to redirect your user to another page after a successful login on Steam, please check “:ledger:Redirecting your user to another page after login”

:speaking_head: GO FURTHER: The plugin also lets you change the address displayed by Steam during the authentication process, for more explanations please check “:ledger:Redirecting your user to another page after login”

LINKS


:link: Demo application: https: //plugin-demo-steam.bubbleapps …
:link: Demo editor: [Steam-complete-demo | Bubble Editor)

If you need help or want to take the plugin further, please refer to the full documentation.
:link: Documentation: https://www.notion.so/Steam-Plugin-…


This tutorial is produced by the French platform Ottho.
Progressez plus vite.

ottho