The creator-centric platform for building live games in Unity

Easily add social, commerce, and content management features to your live game with low-code, drag-and-drop prefabs fully integrated with your Unity workflow.

Adding HTML Sign-In

Overview

The purpose of this guide is to demonstrate everything needed for game makers to set up a web page which handles Beamable login and account administration.

This web page may be setup in a game specific or studio specific setting. It is recommended to have some basic knowledge of web development, including basic HTML and JavaScript before continuing.

After following through this guide, the new HTML login will be functional and ready for any additional branding and customization.

Integration

Beamable integrates with this technology.

HTML is the standard markup language for creating web pages.

Steps

Follow these steps to get started.

1. Setup Website HTML

The first step is to create the login page itself. Ultimately, this will be hosted in a durable and highly available fashion, with SSL/TLS security and a hostname. However for starting out we can go with a simple file on your machine, something like file:///Users/exampleuser/Projects/Beamable/index.html.

The login page needs a form that gathers email and password.

<form onsubmit="return login(event)">
    <label>Email: <input type="text" name="username" id="login-username"></label>
    <label>Password: <input type="password" name="password" id="login-password"></label>
    <input type="submit" value="Login">
</form>

2. Setup Login JavaScript

In the HTML above, the Login button refers to a JavaScript function that does not yet exist, namely login(). Let’s use a bit of jQuery to retrieve the username and password values from the form and then pass them along to the /basic/auth/token EndpointEndpoint - A distinct HTTP path within the Beamable Server REST API..

The CIDCID - The customer identification. Beamable generates this for each customer value is a decimal number that can be found in the Unity project at \Assets\Beamable\Resources\config-defaults.txt or the Beamable Portal . Substitute your own CIDCID - The customer identification. Beamable generates this for each customer as shown when logging into the Beamable Portal from within Unity.

function login(evt) {
    evt.preventDefault();
    const cid = 'YOUR_CID';
    let request = $.ajax('https://api.beamable.com/basic/auth/token', {
        method: 'POST',
        headers: {'X-DE-SCOPE': cid},
        data: {
            grant_type: 'password',
            username: $('#login-username').val(),
            password: $('#login-password').val(),
        }
    });
    return false;
}

3. Setup Account Information Retrieval

The response for a successful login is a Json object containing an OAuth access token, the corresponding refresh token, and information about the token type (always ‘Bearer’ in our case) and expiration time. With the access token in hand, we can now retrieve account data from the /basic/accounts/me EndpointEndpoint - A distinct HTTP path within the Beamable Server REST API..

request.done(function(data) {
        let accessToken = data.access_token;
        let refreshToken = data.refresh_token;
        $.ajax('https://api.beamable.com/basic/accounts/me', {
            method: 'GET',
            headers: {
                'X-DE-SCOPE': cid,
                Authorization: 'Bearer ' + accessToken,
            }
        }).done(function(accountData) {
            $('#account-output').text(JSON.stringify(accountData));
        });
    });

📘

Best Practice

These hints make efficent use of concepts and workflows.

• In a production implementation, save the refresh token to persistent storage such as browser cookies or other client storage.

4. Complete HTML and JavaScript

The document below ties together all the pieces from the step by step instructions above.

<!DOCTYPE html>
<html lang="en">
<head><title>Example Studio Login</title></head>
<body>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
function login(evt) {
    evt.preventDefault();
    const cid = 'YOUR ORGANIZATION ID FROM PORTAL';
    let request = $.ajax('https://api.beamable.com/basic/auth/token', {
        method: 'POST',
        headers: {'X-DE-SCOPE': cid},
        data: {
            grant_type: 'password',
            username: $('#login-username').val(),
            password: $('#login-password').val(),
        }
    });
    request.done(function(data) {
        let accessToken = data.access_token;
        let refreshToken = data.refresh_token;
        $.ajax('https://api.beamable.com/basic/accounts/me', {
            method: 'GET',
            headers: {
                'X-DE-SCOPE': cid,
                Authorization: 'Bearer ' + accessToken,
            }
        }).done(function(accountData) {
            $('#account-output').text(JSON.stringify(accountData));
        });
    });
    return false;
}
</script>

<form onsubmit="return login(event)">
    <label>Email: <input type="text" name="username" id="login-username"></label>
    <label>Password: <input type="password" name="password" id="login-password"></label>
    <input type="submit" value="Login">
</form>

<div>
    <samp><span id="account-output"></span></samp>
</div>

</body>
</html>

Updated about a month ago


Adding HTML Sign-In


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.