Implementing Unity SDK for WebGL

This guide provides focused instructions for implementing the Unity-Immutable-SDK in WebGL projects.

For general information on the SDK, please refer to the Immutable Unity SDK documentation.

Live example can be found at https://immutable.github.io/unity-immutable-sdk/sample/webgl.

WebGL Template Setup

WebGL template is a configuration setting that lets you control the appearance of the HTML page, so that you can: test, demonstrate, and preview your WebGL application in a browser.

1. Create a custom WebGL template:

   • Navigate to Assets > WebGLTemplates in your Unity project.
   • Copy one of the built-in templates (Default or Minimal) from [Unity Installation] > PlaybackEngines > WebGLSupport > BuildTools > WebGLTemplates.
   • Rename the copied template to something meaningful for your project.

2. Copy the following files from the Passport package into your Assets > WebGLTemplates folder:

   • Packages/Immutable Passport/WebGLTemplates~/unity-webview.js
   • Packages/Immutable Passport/WebGLTemplates~/callback.html
   • Packages/Immutable Passport/WebGLTemplates~/logout.html
   • Packages/Immutable Passport/Runtime/Resources/index.html > Passport/index.html

3. Add the following script tag to the index.html in WebGL Templates:

   <script src="unity-webview.js"></script>

PKCE Login and Logout Implementation

💡Note

• WebGL supports only PKCE flow.
• You can rename callback.html and logout.html to suit your project needs.

Follow these steps for implementation:

1. Define a deep link scheme for your game:

   • Redirect URL: https://game.domain.com/callback.html
   • Logout URL: https://game.domain.com/logout.html

2. Configure Passport in Immutable Hub:

   • Go to the Passport page in Immutable Hub
   • Add these deep links to your client's Redirect URLs and Logout URLs

💡Note

For local testing with WebGL builds, note the port number assigned (e.g., http://localhost:60750).

Go to the Passport page in Immutable Hub and add specific URLs for your local testing:

• Add http://localhost:60750/callback.html to Redirect URLs
• Add http://localhost:60750/logout.html to Logout URLs

You may need to repeat this process each time you start a new local WebGL build, as the port number may change.

3. Update Passport initialisation:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Immutable.Passport;

public class InitPassport : MonoBehaviour
{
    private Passport passport;

    async void Start()
    {
        string clientId = "YOUR_IMMUTABLE_CLIENT_ID";
        string environment = Immutable.Passport.Model.Environment.SANDBOX;
        string redirectUri = "https://game.domain.com/callback.html";
        string logoutRedirectUri = "https://game.domain.com/logout.html";
        passport = await Passport.Init(clientId, environment, redirectUri, logoutRedirectUri);
    }
}

Building for WebGL

1. Go to File > Build Settings
2. Select WebGL as the target platform
3. Click "Build And Run"
4. Choose a directory for the build output Your WebGL application will open in your default web browser once the build is complete.

For a complete working example, refer to the sample application in the SDK repository.