How to Create a Telegram Mini App initData

CryptoWhale

--

Telegram bots are becoming increasingly popular for automating communication and interaction with users. This article will guide you through creating a basic Telegram bot for the Mini App game, allowing users to communicate with the application, obtain information, and perform actions through Telegram.

New article: Building Your Own Telegram MiniApp: A Step-by-Step Guide

Sample download: link

Getting Started

Requirements Before you start building your bot, ensure you have the following tools and accounts:

  • Node.js
  • NPM or Yarn
  • A valid Telegram account to create a bot
  • A valid token for the Telegram Bot API

Sample mini app

Installation

  1. Clone the repository:

git clone <URL of your repository>

  1. Navigate to the project directory:

cd project-name

  1. Install dependencies using NPM or Yarn:

npm init -y npm install

Configuration

  1. Create a .env file: Create a .env file in the project directory and set the following environment variables:

TELEGRAM_BOT_TOKEN=Your valid token for the Telegram Bot API WEBHOOK_URL=URL where your bot will be deployed PORT=Port on which your server will run

  1. Register your bot with BotFather: Use BotFather to create your bot and obtain your token.
  2. Set the WEBHOOK_URL: Ensure that WEBHOOK_URL points to a publicly accessible URL for your server.

Running

  1. Start the server:

node telegrambot.js

  1. or using PM2:

pm2 start telegrambot.js --name "TELEGRAM BOT MINI APP"

  1. Connect to your bot: Use its username or the bot’s page link on Telegram. You can start interacting with the bot using various commands, such as /start or other custom commands you have implemented in your code.

Integrating with Vite and React Native

To enhance your application with modern tools like Vite and React Native, follow these steps:

  1. Install Vite:

npm install vite@latest nameApp

  1. Install the SDK:

npm install @twa-dev/sdk

Validating Data Received via the Mini App

To validate data received via the Mini App, send the data from the Telegram.WebApp.initData field to the bot's backend. The data is a query string composed of a series of field-value pairs.

You can verify the integrity of the data by comparing the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the secret key. The secret key is the HMAC-SHA-256 signature of the bot’s token with the constant string “WebAppData” used as a key.

The data-check-string is a chain of all received fields, sorted alphabetically, in the format key=<value> with a line feed character ('\n', 0x0A) used as a separator – e.g., auth_date=<auth_date>\nquery_id=<query_id>\nuser=<user>.

A complete validation might look like this:

const crypto = require('crypto');
let data_check_string = 'auth_date=<auth_date>\nquery_id=<query_id>\nuser=<user>';
let secret_key = crypto.createHmac('sha256', '<bot_token>').update('WebAppData').digest();
let hash = '<received_hash>';
let calculated_hash = crypto.createHmac('sha256', secret_key).update(data_check_string).digest('hex');
if (calculated_hash === hash) {
// data is from Telegram
}

To prevent the use of outdated data, you can additionally check the auth_date field, which contains a Unix timestamp of when the data was received by the Mini App.

Once validated, the data can be used on your server. Complex data types are represented as JSON-serialized objects.

Creating your own Telegram bot can be both fun and useful. With this simple template, you can quickly and easily build your own bot for the Mini App game application and add new interactive features to your app. Happy coding!

Key Points:

  • Ensure you have Node.js, NPM or Yarn, and a valid Telegram account and API token.
  • Follow the steps to clone the repository, install dependencies, and configure environment variables.
  • Use BotFather to register your bot and obtain the token.
  • Validate the data received from the Mini App using HMAC-SHA-256.

With these guidelines, you can set up a Telegram bot that enhances user interaction for your Mini App game.

--

--

CryptoWhale
CryptoWhale

Written by CryptoWhale

Hello! Get the latest news and updates from the world of cryptocurrencies. Follow us on X: https://x.com/CryptoWhaleM Web: https://whalecrypto.org

No responses yet