Как проходит процесс подтверждения по СМС?

Добрый день! Поделитесь, пожалуйста, своим опытом с использованием следующего кода для проверки SMS. В нём пользователь вводит электронную почту и пароль. Если данные верные, появляется поле для ввода SMS-кода, который отправляется на номер телефона для верификации. Однако SMS-код не проверяется, и после введения правильного логина и пароля пользователь автоматически входит в систему без подтверждения через SMS. Есть ли у вас идеи, как можно улучшить эту реализацию? 

Вот код, с которым я работаю:  
<pre><code class="html">&lt;form id="login" class="form-tm-2 form-enter" action="/signin?location={{urlencode(_SERVER.REQUEST_URI)}}" method="post"&gt;
                &lt;h3 class="text-center"&gt;Авторизация&lt;/h3&gt;
                &lt;div class="input-block"&gt;
                    &lt;label for="auth_email"&gt;Email *&lt;/label&gt;
                    &lt;input id="auth_email" required type="email" name="email" placeholder="Введите почту"&gt;
                &lt;/div&gt;
                &lt;div class="input-block"&gt;
                    &lt;label for="auth_password"&gt;Пароль *&lt;/label&gt;
                    &lt;input id="auth_password" required type="password" placeholder="*******" name="password"&gt;
                &lt;/div&gt;
				&lt;div class="input-block" id ="forsms" style="display:none;"&gt;
                    &lt;label for="smscode"&gt;SMS - КОД&lt;/label&gt;
                    &lt;input id="smscode" type="text" placeholder="******" name="smscode"&gt;
                &lt;/div&gt;
                &lt;div id="results"&gt;{{error_msg}}&lt;/div&gt;
                &lt;div class="form-bottom"&gt;
                    &lt;button class="blu-button" name="go" type="submit"&gt;войти
                        &lt;span&gt;&lt;/span&gt;
                    &lt;/button&gt;
  • 14 сентября 2024 г. 7:43
Ответы на вопрос 1
Добрый день! Процесс подтверждения по СМС может быть улучшен как с технической, так и с пользовательской стороны. Давайте рассмотрим несколько рекомендаций:

### 1. Логика верификации
Убедитесь, что логика верификации SMS-кода отделена от логики авторизации. На текущий момент, если пользователь вводит правильные учетные данные, проверка SMS-кода не происходит. Необходимо организовать процесс так, чтобы он выполнялся в несколько шагов:

1. Пользователь вводит email и пароль.
2. Если данные верные, отправляется SMS-код на зарегистрированный номер телефона.
3. Появляется поле для ввода SMS-кода, и форма остается на странице.
4. После ввода SMS-кода, он проверяется. Если код корректный, осуществляется вход пользователя в систему.

### 2. Изменение кода
Представим, как это может выглядеть в вашем коде:

```html
<form id="login" class="form-tm-2 form-enter" action="/signin" method="post">
    <h3 class="text-center">Авторизация</h3>
    <div class="input-block">
        <label for="auth_email">Email *</label>
        <input id="auth_email" required type="email" name="email" placeholder="Введите почту">
    </div>
    <div class="input-block">
        <label for="auth_password">Пароль *</label>
        <input id="auth_password" required type="password" name="password" placeholder="*******">
    </div>
    <div class="input-block" id="forsms" style="display:none;">
        <label for="smscode">SMS - КОД</label>
        <input id="smscode" type="text" name="smscode" placeholder="******">
    </div>
    <div id="results">{{error_msg}}</div>
    <div class="form-bottom">
        <button class="blu-button" name="go" type="submit">войти</button>
    </div>
</form>
```

И на стороне сервера вам необходимо разбить процесс на два этапа. Пример на PHP:

```php
session_start();

// Этап 1: Проверка email и пароля
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !isset($_SESSION['sms_sent'])) {
    $email = $_POST['email'];
    $password = $_POST['password'];

    // Проверка данных в базе (псевдокод)
    if (validLogin($email, $password)) {
        // Генерация и отправка SMS-кода
        $sms_code = generateSmsCode();
        sendSms($userPhoneNumber, $sms_code);
        
        $_SESSION['sms_code'] = $sms_code;
        $_SESSION['user_email'] = $email; // Сохраните временный email
        $_SESSION['sms_sent'] = true; // Установить флаг о том, что SMS было отправлено
        echo "<script>document.getElementById('forsms').style.display = 'block';</script>";
    } else {
        // Ошибка авторизации
        $error_msg = "Неправильный email или пароль.";
    }
}

// Этап 2: Проверка SMS-кода
if (isset($_SESSION['sms_sent']) && isset($_POST['smscode'])) {
    if ($_POST['smscode'] === $_SESSION['sms_code']) {
        // Успешный вход
        logUserIn($_SESSION['user_email']);
        unset($_SESSION['sms_sent'], $_SESSION['sms_code'], $_SESSION['user_email']); // Очистить сессии
        echo "Успешный вход!";
    } else {
        // Неверный код
        $error_msg = "Неверный SMS-код.";
    }
}
```

### 3. Улучшения с точки зрения UX
- **Предоставление обратной связи**: Дайте пользователю знать, было ли SMS успешно отправлено.
- **Время ожидания**: Укажите пользователю, через сколько времени он может запросить новый код, если он не получил его.
- **Безопасность**: При проверке SMS-кодов стоит учитывать, чтобы код имел ограниченное время действия (например, 5 минут).
- **Обработка ошибок**: Отображайте пользователю соответствующие сообщения об ошибках, например, если код неверен или код устарел.

С помощью этих рекомендаций процесс подтверждения по SMS станет более надежным и удобным.
Похожие вопросы