Как усилить защиту в MINI-APP на PuzzleBot

Расскажу, как добавить скрипт прямо в HTML-блок бота на конструкторе PuzzleBot — для чего это, чем поможет и насколько сложно реализовать.

Зачем это нужно:

Биометрическая авторизация — это дополнительный уровень защиты вашего Mini App. Даже если кто-то получит доступ к чужому Telegram, он не сможет открыть приложение без Face ID или отпечатка пальца. Это особенно важно, если внутри есть личный кабинет, баланс, персональные данные или платёжные функции.

Плюсы:

• Защита от несанкционированного доступа
• Вау-эффект при входе — выглядит современно и технологично
• Работает на iOS (Face ID) и Android (отпечаток пальца)
• Не требует серверов и сложного кода

Сложность: минимальная. Нужно скопировать готовый скрипт и вставить в HTML-блок.

1. Клонируем Mini App

Чтобы реализовать функцию, клонируйте главное Mini App. Это нужно, чтобы создать эффект: пользователь видит размытый фон с элементами главной страницы, проходит биометрию и только потом попадает в основное приложение.

Клон используется только для первого открытия — именно сюда ведёт кнопка входа в боте. Face ID спрашивается один раз, при входе. Дальше пользователь попадает в основное Mini App и при переходах между страницами биометрия больше не запрашивается.

2. Добавляем HTML-блок

В клонированном Mini App добавьте последним блоком HTML-блок и вставьте скрипт ниже.

<script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"> <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400&display=swap" rel="stylesheet"> <style> * { font-family: 'Unbounded', sans-serif; font-weight: 300; margin: 0; padding: 0; box-sizing: border-box; } #biometric-overlay { position: fixed; inset: 0; z-index: 9999; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(4, 16, 31, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px 12vh; text-align: center; color: #fff; transition: opacity 0.5s ease; } #biometric-overlay.hidden { opacity: 0; pointer-events: none; } .icon-block { margin-bottom: 32px; } .text-block { display: flex; flex-direction: column; align-items: center; } .loader { width: 20px; height: 20px; border: 2px solid rgba(129, 169, 255, 0.3); border-top-color: #81a9ff; border-radius: 50%; animation: spin 0.8s linear infinite; margin-top: 20px; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div id="biometric-overlay"> <div id="icon" class="icon-block text-6xl text-[#81a9ff]"> <i class="ph ph-lock"></i> </div> <div class="text-block"> <h1 id="title" class="text-xl font-light mb-2">Проверка личности</h1> <p id="subtitle" class="text-sm text-white/60 font-light">Подтвердите вход</p> <div class="loader" id="loader"></div> </div> </div> <script> Telegram.WebApp.ready(); Telegram.WebApp.expand(); const overlay = document.getElementById('biometric-overlay'); const icon = document.getElementById('icon'); const title = document.getElementById('title'); const subtitle = document.getElementById('subtitle'); const loader = document.getElementById('loader'); const biometrics = '{{biometrics}}'; const platform = Telegram.WebApp.platform; const isDesktop = platform === 'tdesktop' || platform === 'web' || platform === 'weba'; const methodName = platform === 'ios' ? 'Face ID' : 'Отпечаток пальца'; subtitle.innerText = 'Подтвердите вход с помощью ' + methodName; if (biometrics !== 'on' || isDesktop) { gotoWebPage('92b067dfff43e54e'); } else { Telegram.WebApp.BiometricManager.init(() => { const available = Telegram.WebApp.BiometricManager.isBiometricAvailable; if (!available) { gotoWebPage('92b067dfff43e54e'); return; } Telegram.WebApp.BiometricManager.requestAccess( { reason: "Подтвердите личность для входа" }, (granted) => { if (!granted) { showError('Доступ отклонён', 'Вы отклонили запрос'); return; } Telegram.WebApp.BiometricManager.authenticate( { reason: "Вход в приложение" }, (success) => { if (success) { showSuccess(); } else { showError('Ошибка входа', 'Аутентификация не пройдена'); } } ); } ); }); } function showSuccess() { icon.className = 'icon-block text-6xl text-[#4ade80]'; icon.innerHTML = '<i class="ph-fill ph-lock-open"></i>'; title.innerText = 'Доступ разрешён'; subtitle.innerText = 'Перенаправление...'; loader.style.display = 'none'; setTimeout(() => { gotoWebPage('92b067dfff43e54e'); }, 1000); } function showError(t, s) { icon.className = 'icon-block text-6xl text-[#f87171]'; icon.innerHTML = '<i class="ph-fill ph-lock"></i>'; title.innerText = t; subtitle.innerText = s; loader.style.display = 'none'; } </script> Если вам не удобно скопировать скрипт тут, вы можете найти его на моем канале: https://t.me/ecodetechinfo

3. Разбираем скрипт

В строке: gotoWebPage('92b067dfff43e54e'); вшит ID другого Mini App — того, куда происходит редирект после успешной авторизации. Ниже оставлю скриншот, где его скопировать.

4. Переменная {{biometrics}}

В скрипте используется переменная {{biometrics}}. Создайте текстовую переменную с таким же названием и значением on.

Вы можете самостоятельно реализовать включение и выключение Face ID в настройках Mini App:

• Добавьте форму ввода с кнопками
• Кнопка «Выключить» → меняет значение переменной на off
• Кнопка «Включить» → возвращает on

Так пользователь сам сможет управлять биометрической защитой.

5. Не забудьте поменять ссылку

После того как вы склонировали Mini App и вставили скрипт, обязательно поменяйте ссылку на главное приложение — то есть на это самое Mini App в вашем боте. Иначе пользователи будут попадать не туда.

Итог

Вы получили:

• Дополнительный уровень защиты
• Современный вход по биометрии
• Гибкое управление через переменную
• Всё это — без единой строчки серверного кода

Если что-то осталось непонятным — пишите в комментариях, помогу разобраться.

Подпишитесь на наш канал и получайте полезные материалы! https://t.me/ecodetechinfo