Integrando Web SDK con Mini-apps de Telegram

Aprenda cómo integrar Web SDK con su Mini-app o Juego de Telegram para una experiencia web3 fluida.

Esta guía le mostrará cómo configurar Web SDK con su Mini-app o Juego de Telegram, habilitando funcionalidad web3 en cadenas EVM para sus usuarios con métodos de autenticación por correo electrónico e invitado.

​

Requisitos previos

Antes de comenzar, tenga en cuenta que debe contar con:

• Una cuenta de Telegram
• Cuenta y acceso al Panel de Cloudflare

​

Pasos de integración

1. Cree un Bot de Telegram con BotFather

   1. Abra Telegram y busque “@BotFather”
   2. Inicie una conversación haciendo clic en “Start” o escribiendo /start
   3. Cree un nuevo bot escribiendo /newbot
   4. Siga las indicaciones:
      • Ingrese un nombre para su bot
      • Elija un nombre de usuario (debe terminar en ‘bot’)
2. Obtenga los tokens requeridos

   Después de crear su bot, BotFather le proporcionará:

   • Token del Bot (HTTP API Token)
   • Nombre de usuario del Bot

   Guarde estas credenciales; las necesitará para los siguientes pasos.

   Nunca comparta ni suba su token del bot. Trátelo como un secreto.

3. Instale y configure su proyecto

   1. Clone el proyecto inicial de Telegram de Sequence:

   git clone https://github.com/0xsequence-demos/telegram-kit-embedded-wallet-react-boilerplate
   

   2. Copie los archivos de ejemplo en la raíz de su proyecto:

   cp .env.example .env && cp example.wrangler.toml wrangler.toml
   

   Actualice el archivo .env con VITE_PROJECT_ACCESS_KEY y VITE_WAAS_CONFIG_KEY usando sus llaves de Sequence Builder después de la configuración.

   3. Instale las dependencias:

   pnpm install
   

   4. Compile la aplicación:

   pnpm run build
   

   4. Actualice las VARS en el archivo wrangler.toml con un secreto proporcionado por el usuario para BOT_SECRET y el token del bot de BotFather para BOT_TOKEN.
4. Autentíquese con la cuenta de Cloudflare

   Despliegue la app y la lógica de funciones en Cloudflare

   1. Ejecute pnpm wrangler pages deploy

   Se le pedirá que se autentique con Cloudflare si aún no ha iniciado sesión. Al desplegar exitosamente, copie la URL donde ahora está alojada su app.

5. Registre el Webhook con Telegram

   Ahora llamamos a nuestro endpoint registerWebhook en nuestra app para registrar la función webhook con la URL de su aplicación desplegada y habilitar el acceso para la API de Telegram.

   curl -X POST \
        "<YOUR_CLOUDFLARE_DEPLOYED_URL>/api/registerWebhook"
   
6. Actualice los orígenes permitidos

   Asegúrese de haber agregado la URL de su aplicación desplegada como un origen permitido en la configuración de su wallet a través de la página de configuración en Sequence Builder.

7. ¡Pruebe el Bot!

   Envíe un mensaje a su bot en Telegram y vea si responde. Debería contestarle con la opción de compartir, jugar y obtener más información sobre el bot.

Desde aquí, usted tiene un bot de Telegram completamente funcional que puede interactuar con Embedded Wallets de Sequence para todas las cadenas EVM integradas. Puede personalizar las respuestas del bot y la app del lado del cliente con funcionalidades específicas para su juego o app; simplemente vuelva a desplegar y actualice los orígenes permitidos.

​

Llevando a producción

Para su BOT_TOKEN, puede cifrarlo y almacenarlo en Cloudflare con el siguiente comando para evitar filtraciones de datos:

pnpm wrangler pages secret put BOT_TOKEN

Ingrese su token de bot cuando se le solicite.