В различных сценариях компании может потребоваться записать и подтвердить номер телефона пользователя, прежде чем он сможет предоставить услугу.

В этом примере показано, как вы можете получить и проверить номер телефона пользователя в рамках регистрации (первого входа) с помощью действий Auth0.

Действия Auth0 — это безопасные, зависящие от клиента версионные функции, написанные на Node.js, которые выполняются в определенные моменты во время выполнения Auth0.
Действия используются для настройки и расширения возможностей Auth0 с помощью пользовательской логики.
https://auth0.com/docs/customize/actions

Вот диаграмма, показывающая, как работает решение.

Отказ от ответственности

Если вы ищете Многофакторную аутентификацию с помощью SMS, она поддерживается из коробки с Auth0.

Это решение является просто предложением обойти проблему мобильной проверки.
Я обнаружил, что некоторые пользователи на форуме Auth0 просят эту функцию, поэтому я решил посмотреть, могу ли я использовать действия Auth0 для решения.

Разбивка решения

Нам нужны следующие части, чтобы заставить этот поток работать:

  • Учетная запись Twilio. Twillio предоставляет API-интерфейсы, необходимые для отправки подтверждающего SMS, а также для проверки кода после его отправки пользователем.
  • Пользовательская форма регистрации с дополнительным полем для записи номера телефона пользователя.
  • Auth0 Действие, которое будет выполняться при входе в систему и использовать записанный номер телефона для отправки кода подтверждения на устройство пользователя с помощью SMS.
    Это действие также отвечает за перенаправление на форму подтверждения кода.
  • Простое веб-приложение, в котором будет размещена форма для получения кода подтверждения от пользователя и перенаправления пользователя вместе с кодом на Auth0 для завершения входа в систему.

1- Создание учетной записи Twilio и служба проверки

Чтобы создать учетную запись, перейдите на https://www.twilio.com/try-twilio и создайте бесплатную учетную запись.

После входа в систему нажмите «Подтвердить» в боковом меню. Здесь мы можем добавить службу проверки. Эта услуга поможет нам отправить SMS на номер телефона пользователя и использовать код в этом SMS для проверки номера.

Нажмите Подтвердить > Попробовать и создайте новую службу.

На втором и третьем шагах у вас есть возможность протестировать только что созданный сервис в консоли. Это поможет вам проверить URL, который вам нужно вызвать, и параметры, которые нужно передать для полезной нагрузки.
После того, как вы протестировали новую службу и остались довольны ее работой, мы выполняются с настройкой Twillio.

Если вам нужно увидеть свой идентификатор службы на любом более позднем этапе, вы можете вернуться, чтобы подтвердить, и он будет указан в разделе службы.

2- Настраиваемая форма регистрации с дополнительным полем для записи номера телефона пользователя.

Есть несколько способов настроить форму входа/регистрации.
В этом примере я использую блокировку Auth0 и передаю конфигурацию для дополнительных полей.

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

И Вы получите такую ​​форму регистрации:

Теперь после регистрации пользователя номер телефона будет добавлен в профиль пользователя под user_metadata .
На данном этапе мы еще не проверили номер телефона.

3- Создайте действие входа в систему, чтобы подтвердить номер телефона.

Следующим шагом нам нужно действие входа в систему, чтобы прочитать номер телефона из профиля пользователя и отправить подтверждающее SMS на номер телефона пользователя.

Среди триггеров Auth0 Action Login — единственный, который поддерживает перенаправление, что нам и нужно для этого потока. Поскольку проверка номера телефона происходит только один раз, пользователи будут проходить ее только при первом входе в систему.

Для последующих входов действие проверит, существует ли номер телефона и подтвержден ли он для конкретного пользователя, и если да, то просто проигнорирует остальные.

Для начала вам нужна учетная запись Auth0. Если у вас его еще нет, следуйте этим инструкциям для его настройки.

Чтобы создать действие для входа, нажмите Действия > Потоки > Вход.

Это создает триггер post-login, который запускается как часть процесса входа в систему.
Он выполняется после входа пользователя в систему и при запросе маркера обновления.

Нажмите кнопку + в разделе «Добавить действие» и выберите «Создать пользовательское». Назовите его Подтвердить номер телефона и оставьте все остальное как есть.

После создания вы перейдете к экрану редактирования.
Здесь вы можете отредактировать код и написать логику для вызова API-интерфейсов Twilio, чтобы отправить код подтверждения и проверить его.

Для этого нам нужно написать две отдельные функции.

  • onExecutePostLogin — Обработчик, который будет вызываться при выполнении потока PostLogin.
  • onContinuePostLogin — обработчик, который будет вызываться, когда это действие возобновляется после внешнего перенаправления.

1- В функции onExecutePostLogin код просто считывает номер телефона пользователя user_metadata и отправляет SMS на номер телефона с помощью Twilio REST API.
После успешной отправки SMS эта функция перенаправляет пользователя на веб-форму для входа код подтверждения, который мы только что отправили им.
Эта веб-форма представляет собой просто веб-приложение, которое вам нужно создать и разместить самостоятельно.
Это не должно быть чем-то необычным, если оно может получить код подтверждения и перенаправить пользователя обратно на Auth0. .

2- onContinuePostLogin вступает в игру после того, как пользователь перенаправляется обратно на Auth0. На этом этапе вы получите код подтверждения, отправленный в функцию из веб-формы с помощью перенаправления.
Таким образом, мы можем использовать код и вызвать другой REST API из Twilio для его проверки.
Если все пойдет хорошо и вы получите успешный ответ от Twillio, номер телефона будет подтвержден, и мы добавим эту информацию в профиль пользователя, но на этот раз под app_metadata .

Совет. user_metadata может редактировать вошедший в систему пользователь, но пользователь не может редактировать app_metadata.

Вот код действия.

4- Пример веб-формы для получения кода подтверждения и выполнения перенаправления

Форма проверки кода представляет собой базовую HTML-страницу с небольшим количеством JavaScript для обработки отправки формы. (на основе примера Дилана Шварца для формы согласия)

В этом примере мы будем использовать Vercel для размещения формы, но вы используете любого хостинг-провайдера.

  1. Если вы еще этого не сделали, зарегистрируйте учетную запись Vercel и установите Vercel CLI с помощью npm i -g vercel.
  2. Пока вы находитесь в том же каталоге, что и index.html, просто запустите следующую команду, чтобы запустить его в Vercel:
$ vercel

Нажмите Enter для каждого приглашения, которое команда vercel дает вам для выбора значений по умолчанию. Вывод этой команды будет содержать URL-адрес вашей недавно размещенной формы проверки кода.

  1. В коде вашего действия обязательно удалите существующий VERIFY_FORM_URL и замените его значением, которое является URL-адресом, который был выведен на предыдущем шаге.
  2. Если вы хотите внести изменения в форму проверки кода, вы можете загрузить новую версию, просто выполнив ту же команду vercel, что и раньше.

Вот код этого веб-приложения.



GitHub — pazel-io/auth0-twilio-phone-verification: этот образец демонстрирует минимальную…
Этот образец демонстрирует минимальную реализацию протокола `redirect`. Он содержит действие Auth0…github.com



Там у вас есть комплексное решение для проверки телефонных номеров в рамках входа в систему Auth0 и создания учетной записи.

Заключительные заметки

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

  • Обработка ошибок
    Вам необходимо учитывать и обрабатывать различные ошибки, которые могут произойти.
    В примере кода действия используется api.access.deny() для отклонения входа в систему в случае возникновения ошибки.
  • Настройка разных сред (клиентов) для разных этапов.
    При настройке клиента Auth0 или службы Twilio необходимо разделить среду разработки и рабочую среду.
  • Сохранение секретных (API) ключей
    Все секреты, используемые в этом решении, существуют только на стороне сервера кода (action.js и verify.js), что упрощает держите их в безопасности.
    Убедитесь, что вы не раскрываете конфиденциальные ключи в коде на стороне клиента и не передаете их в репозиторий.
    Действия имеют встроенное управление секретами, чтобы сохранить ваши секреты в безопасности и предоставить удобный способ получить к ним доступ в коде действия.

и вы можете получить к ним доступ вот так

event.secrets.SESSION_TOKEN_SECRET
  • Доверенный URL-адрес обратного вызова (цитата из примера Дилана Шварца)
    В нашем образце формы Действие и согласие ради удобства делается один компромисс безопасности: правило передает Auth0 (например, your-tenant.auth0.com) на веб-сайт формы, и форма использует его для создания URL-адреса обратного вызова (например, https://your-tenant.auth0.com/continue) для возврата к правилу. По сути, это открытое перенаправление, и его не следует использовать в производственных сценариях.
    Вы можете заблокировать это, настроив реализацию веб-формы на возврат только к определенному URL-адресу (т. е. только к вашему арендатору Auth0) вместо того, генерируется из параметра запроса. Затем вы также можете упростить правило, чтобы оно больше не проходило через домен Auth0.
  • Целостность данных (цитата из примера Дилана Шварца)
    Как уже говорилось, это очень простой пример использования перенаправления действия для вызова формы согласия. Тем не менее, в Auth0 мы очень серьезно относимся к безопасности. Поле confirm (которое имеет значение yes), которое передается обратно в auth0 как подписанный токен с использованием общего SESSION_TOKEN_SECRET.
    В производственных сценариях, когда вам нужны гарантии целостности данных, возвращаемых внешним веб-сайтом. (в данном случае в нашей форме проверки размещенного кода). Например, если вы хотите быть уверены, что данные действительно поступили из надежного источника, их следует подписать. Если данные конфиденциальны, то они должны быть зашифрованы. Хорошим механизмом для этого является использование JWT (веб-токен JSON). Вы можете создать JWT с утверждениями (которые вы можете дополнительно зашифровать), а затем подписать его либо с помощью секрета, общего с вашим действием Auth0, либо с помощью закрытого ключа, открытый ключ которого известен действию. Затем действие может проверить законность утверждений и при необходимости расшифровать их.
  • Вход через социальные сети
    Это решение нуждается в некоторой настройке, если вы хотите предложить вход/регистрацию через социальные сети.
    В случае входа через социальные сети пользователи не будут использовать нашу форму регистрации, поэтому нам нужно для захвата номера телефона через отдельную форму в нашем приложении.

Спасибо, что прочитали эту статью.
Пожалуйста, обращайтесь сюда или в Твиттер, если у вас есть какие-либо отзывы или вопросы.

Вот ссылка на репозиторий моего примера кода:
https://github.com/pazel-io/auth0-twilio-phone-verification

Использованная литература:

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.