Реализация виджета PIN-кода в мини-приложении на примере сервиса Puzzlebot
Пример код-пароля
В данном кейсе мы рассмотрим, как реализовать виджет PIN-кода в мини-приложении, используя сервис Puzzlebot.
Этот виджет позволяет пользователям вводить PIN-код для доступа к определенным функциям приложения, что повышает уровень защиты информации и делает взаимодействие с вашим ботом более безопасным.
Зачем нужен виджет PIN-кода?
Использование PIN-кода в мини-приложении может быть полезно в следующих сценариях: - Защита пользовательских данных. PIN-код обеспечит дополнительный уровень безопасности, позволяя пользователям контролировать доступ к своим данным. - Ограничение доступа к специализированным функциям вашего бота. Например, вы можете создать контент, доступный только тем пользователям, которые ввели правильный PIN-код. - Повышение уровня информированности о безопасности и конфиденциальности. Наличие PIN-кода помогает пользователю осознать важность безопасности данных.
Давайте разберем код HTML, CSS и JavaScript, который реализует виджет для ввода PIN-кода.
Я объясню, какие главные атрибуты используются, и укажу, что отвечает за проверку ввода PIN-кода.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PIN-код виджет</title>
<style>
/* CSS стили для оформления виджета */
</style>
</head>
<body>
<div class="pin-widget">
<div class="pin-input">
<div class="circle" id="circle1"></div>
<div class="circle" id="circle2"></div>
<div class="circle" id="circle3"></div>
<div class="circle" id="circle4"></div>
</div>
<input type="tel" id="pin" maxlength="4" style="opacity: 0; position: absolute;" autofocus />
<a id="continueLink" goto_web_page="86d9caeba79a216b" style="display: none;">Перейти на следующую страницу</a>
<button id="continueBtn" disabled>ㅤ</button>
</div>
<script>
// JavaScript для обработки ввода PIN-кода
</script>
</body>
</html>
Объяснение атрибутов и элементов
- : Указывает, что документ является HTML5.
- : Основной контейнер для виджета PIN-кода.
- : Контейнер для отображения введенного PIN-кода.
- : Круги, представляющие введенные цифры PIN-кода. Каждый круг имеет уникальный id.
- : Скрытое текстовое поле для ввода PIN-кода.
- :
Ссылка для перехода на следующую страницу, скрыта от пользователя.goto_web_page: Пользовательский атрибут, который хранит идентификатор страницы для перехода.
Проверка ввода PIN-кода
Проверка ввода PIN-кода осуществляется в JavaScript:
const pinInput = document.getElementById('pin');
const circles = [
document.getElementById('circle1'),
document.getElementById('circle2'),
document.getElementById('circle3'),
document.getElementById('circle4')
];
const continueBtn = document.getElementById('continueBtn');
const continueLink = document.getElementById('continueLink');
const correctPin = '{{pin}}'; // Задайте правильный PIN-код здесь
pinInput.addEventListener('input', () => {
const value = pinInput.value;
for (let i = 0; i < circles.length; i++) {
circles[i].textContent = i < value.length ? '●' : '';
}
if (value.length === 4) {
if (value === correctPin) {
continueBtn.disabled = false;
continueLink.click(); // Автоматический переход
} else {
alert('Неверный PIN-код. Попробуйте еще раз.');
pinInput.value = '';
circles.forEach(circle => circle.textContent = '');
}
}
});
- pinInput.addEventListener('input', ...): Добавляет обработчик события, который срабатывает при вводе данных в поле.
- const value = pinInput.value;: Получает текущее значение, введенное пользователем.
- circles[i].textContent = i < value.length ? '●' : '';: Обновляет отображение кругов в зависимости от введенных символов.
- if (value.length === 4): Проверяет, введены ли все 4 символа.
- if (value === correctPin): Сравнивает введенный PIN-код с правильным значением.
- continueBtn.disabled = false;: Если PIN-код правильный, происходит автоматическое перенаправление пользователя к следующей странице.
- alert('Неверный PIN-код. Попробуйте еще раз.');: Если PIN-код неверный, выводится сообщение об ошибке в попапе.
alert('Неверный PIN-код. Попробуйте еще раз.');
Таким образом, код создает интерактивный виджет для ввода PIN-кода с визуальной обратной связью и проверкой правильности ввода
Код виджета:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PIN-код виджет</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Rob "Helvetica Neue", Arial, sans-serif;
}
.pin-widget {
display: flex;
flex-direction: column;
align-items: center;
background: #f3f2f8;
padding: 20px;
border-radius: 10px;
}
.pin-input {
display: flex;
justify-content: space-between;
width: 110px;
margin-bottom: 20px;
}
.circle {
width: 15px;
height: 15px;
border: 1px solid #000000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
background-color: #f3f2f8;
}
/* Удаляем стили для кнопки */
/* button {
padding: 10px 110px;
background-color: #f3f2f8;
color: white;
border: none;
border-radius: 9px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background-color: #f3f2f8;
} */
</style>
</head>
<body>
<div class="pin-widget">
<div class="pin-input">
<div class="circle" id="circle1"></div>
<div class="circle" id="circle2"></div>
<div class="circle" id="circle3"></div>
<div class="circle" id="circle4"></div>
</div>
<input type="tel" id="pin" maxlength="4" style="opacity: 0; position: absolute;" autofocus />
<a id="continueLink" goto_web_page="86d9caeba79a216b" style="display: none;">Перейти на следующую страницу</a>
<!-- При желании можно добавить кнопку -->
<!-- <button id="continueBtn" disabled>ㅤ</button> -->
</div>
<script>
const pinInput = document.getElementById('pin');
const circles = [
document.getElementById('circle1'),
document.getElementById('circle2'),
document.getElementById('circle3'),
document.getElementById('circle4')
];
// const continueBtn = document.getElementById('continueBtn');
const continueLink = document.getElementById('continueLink');
const correctPin = '{{pin}}'; // Задайте правильный PIN-код здесь
pinInput.addEventListener('input', () => {
const value = pinInput.value;
for (let i = 0; i < circles.length; i++) {
circles[i].textContent = i < value.length ? '●' : '';
}
if (value.length === 4) {
if (value === correctPin) {
// Убираем проверку на кнопку
// continueBtn.disabled = false;
continueLink.click(); // Автоматический переход
} else {
alert('Неверный PIN-код. Попробуйте еще раз.');
pinInput.value = '';
circles.forEach(circle => circle.textContent = '');
}
}
});
// continueBtn.addEventListener('click', () => {
// gotoWebPage(continueLink.getAttribute('goto_web_page'));
// });
function gotoWebPage(id, openInBrowser = false) {
const url = getWebPageUrl(id);
if (openInBrowser) {
window.open(url, '_blank');
} else {
window.location.href = url;
}
}
function getWebPageUrl(id) {
return `https://example.com/${id}`; // Замените на нужный URL
}
</script>
</body>
</html>
1 комментарий