Integrate Unity WebGL on Telegram mini-app

Integrate Unity WebGL on Telegram mini-app

Overview#

Use Unity WebGL to create a mini-game and integrate it into a Telegram mini-app.

Prerequisites#

Openfort SDK is set up in your Unity project. If not, follow the quickstart guide. This project uses WebGL, so make sure you also have set up WebGL.

Configuration#

Telegram mini-app setup#

• Create a Telegram bot and get the bot token. Follow the official guide to create a bot and get the token.

• Configure your project providers Enable the Telegram provider and add the bot username and bot token.

  

  Enable the Telegram (Mini-app) provider and add the bot token.

  

• Import the telegram mini app SDK in your HTML template file. If you are using the Openfort SDK, you can add the script in the index.html file in Assets>WebGLTemplates>Openfort.

  
  

  _10

  <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk@1.1.3/dist/index.iife.js"></script>

  
  

  This will expose a function telegramApps.sdk.retrieveLaunchParams() that will return the launch parameters from the Telegram mini-app.

• Add a Json library file Telegram.jslib. This file will serve as a bridge between the Unity script and the Telegram SDK.

  Telegram.jslib

  
  

  _17

  mergeInto(LibraryManager.library, {

  _17

  InitTelegramApp: function () {

  _17

  const telegramSDK = telegramApps.sdk;

  _17

  try {

  _17

  // Retrieve launch parameters from Telegram

  _17

  const launchParams = telegramSDK.retrieveLaunchParams();

  _17

  _17

  var bufferSize = lengthBytesUTF8(launchParams.initDataRaw) + 1;

  _17

  var buffer = _malloc(bufferSize);

  _17

  stringToUTF8(launchParams.initDataRaw, buffer, bufferSize);

  _17

  return buffer

  _17

  } catch (error) {

  _17

  console.error('Error initializing app:', error);

  _17

  }

  _17

  return "";

  _17

  },

  _17

  });

  
  

• Import the InitTelegramApp function in your Unity script.

  Telegram.cs

  
  

  _13

  using System.Runtime.InteropServices;

  _13

  _13

  public class Telegram : MonoBehaviour

  _13

  {

  _13

  [DllImport("__Internal")]

  _13

  private static extern string InitTelegramApp();

  _13

  _13

  void Start()

  _13

  {

  _13

  string initData = InitTelegramApp();

  _13

  Debug.Log("Init data: " + initData);

  _13

  }

  _13

  }

  
  

• Authenticate with Telegram mini app token using the Openfort SDK.

  Telegram.cs

  
  

  _36

  using System.Runtime.InteropServices;

  _36

  using Openfort.OpenfortSDK;

  _36

  _36

  public class Telegram : MonoBehaviour

  _36

  {

  _36

  [DllImport("__Internal")]

  _36

  private static extern string InitTelegramApp();

  _36

  _36

  [SerializeField]

  _36

  string projectPublishableKey;

  _36

  _36

  [SerializeField]

  _36

  string shieldPublishableKey;

  _36

  _36

  [SerializeField]

  _36

  string shieldEncryptionShare;

  _36

  _36

  _36

  void Start()

  _36

  {

  _36

  openfort = await OpenfortSDK.Init(

  _36

  projectPublishableKey,

  _36

  shieldPublishableKey,

  _36

  shieldEncryptionShare

  _36

  );

  _36

  _36

  string initData = InitTelegramApp();

  _36

  Debug.Log("Init data: " + initData);

  _36

  _36

  ThirdPartyOAuthRequest request = new ThirdPartyOAuthRequest(

  _36

  ThirdPartyOAuthProvider.TelegramMiniApp,

  _36

  telegramAuth,

  _36

  TokenType.IdToken

  _36

  );

  _36

  }

  _36

  }

  
  

  Using Telegram mini-app as a third-party provider, your token is the Telegram mini-app initData. You can use this token to authenticate with the Openfort SDK.