Foydalanuvchilar allaqachon bo'lgan joyda qurish: Telegram Mini Apps

Tarqatish muammosi

Markaziy Osiyo uchun qurish haqida qiziq narsa: sizning foydalanuvchilaringiz allaqachon Telegramda. "Ba'zi foydalanuvchilar" emas — deyarli hamma. Bu yerda Telegram tarqalishi men bilgan boshqa joydan farqli. Shuning uchun BookUp-ning mijozlarga yo'naltirilgan bron interfeysini qanday tarqatish haqida o'ylayotganimda, javob aniq edi.

Nima uchun kimnidir ilova yuklab olishga yoki URL-ni eslab qolishga ishontirish kerak, agar u baribir Telegramda bo'ladigan bo'lsa?

Aslida nima qurdik

BookUp uchun Telegram Mini App asosiy mijoz interfeysidir. Kimdir sartaroshxonada bron qilmoqchi — botni ochadi, mini ilova Telegram ichida yuklanadi, vaqt tanlaydi, tamom. O'rnatish kerak bo'lgan yangi ilova yo'q. Login yo'q — Telegram identifikatsiyani boshqaradi.

MyPolis fuqarolik platformasi uchun shunga o'xshash yondashuvdan foydalanadi. Men qurgan matchmaking ilovasi ham TMA sifatida ishladi. Har safar bir xil mulohaza: foydalanuvchilar qayerda bo'lsa, o'sha yerda uchrashing.

Auth oqimi haqiqatan aqlli

Telegram foydalanuvchi shaxsini mini ilovanizga qanday uzatishi qiziqarli. Ilova yuklanganida, Telegram JavaScript kontekstiga initData qatorini kiritadi. Bu foydalanuvchi ma'lumotlarini (ID, ism, foydalanuvchi nomi) va hashni o'z ichiga oladi.

Uni qonuniy ekanligini va kimdir soxta yuk yaratmaganini tekshirish uchun HMAC ni tasdiqlaysiz:

import crypto from 'crypto';

function verifyInitData(initData: string, botToken: string): boolean {
  const params = new URLSearchParams(initData);
  const hash = params.get('hash');
  params.delete('hash');

  const dataCheckString = [...params.entries()]
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${k}=${v}`)
    .join('\n');

  const secretKey = crypto
    .createHmac('sha256', 'WebAppData')
    .update(botToken)
    .digest();

  const expectedHash = crypto
    .createHmac('sha256', secretKey)
    .update(dataCheckString)
    .digest('hex');

  return hash === expectedHash;
}

Buni backendda tasdiqlasangiz, foydalanuvchi shaxsiga ishonishingiz va o'z session tokeningizni chiqarishingiz mumkin.

Sizni tutib qoladigan g'alatiliklar

Orqa tugma soxta. Telegram sarlavhada "orqa tugma" beradi, ammo bu haqiqiy brauzer orqa tugmasi emas — bu JavaScript-da hal qilishingiz kerak bo'lgan hodisa.

iOS-dagi klaviatura... maxsus. Telegram mini ilovasi ichida iOS-da matn kiritish fokus olganida, viewport oddiy Safari web viewdan farqli yo'llar bilan siljiydi. Juda ko'p "kirish klaviatura ortida yashiringan" xatolar.

Layout viewport vs visual viewport. Telegram window.Telegram.WebApp.viewportStableHeight-ni ochadi — buni layout uchun ishlating.

Mavzu o'zgaruvchilari sovg'a. Telegram foydalanuvchining joriy mavzusi uchun CSS o'zgaruvchilarini uzatadi. Bulardan foydalanish ilovangizni Telegram skin-iga mahalliy ko'rinishga keltiradi.

Halol ijobiy/salbiy tomonlar

Ijobiy: deyarli nol tarqatish to'sqinligi, App Store tekshiruvi yo'q, darhol yangilanishlar, bepul identifikatsiya, foydalanuvchilar allaqachon o'sha yerda.

Salbiy: siz boshqa birovning konteynerida qurmoqdasiz. Telegram API-ni o'zgartirishi mumkin. Debugging qiyinroq.

Men qurаyotgan bozorlar uchun ijobiy tomonlar aniq g'alaba qozonadi.