Как реализовать аутентификацию Magic Link с помощью Next.js и Altogic

Введение

В этой статье будут рассмотрены основы аутентификации magic-link с помощью Next.js и Altogic, платформы backend-as-a-service, использующей свою клиентскую библиотеку. Этот метод аутентификации позволяет пользователям входить в приложение, не запоминая свой пароль.

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

Вы можете ознакомиться с исходным кодом и демонстрационным приложением.

Преимущества

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

Недостатки

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

💡 Если вы знаете еще какие-либо недостатки, которые вы обнаружили или с которыми сталкивались ранее, пожалуйста, напишите в разделе комментариев, мы будем рады обсудить и поучиться.

Как происходит аутентификация по волшебной ссылке в Altogic?

Пользователи, у которых уже есть аккаунт, вводят свой email и нажимают кнопку «Отправить волшебную ссылку».
Altogic отправляет письмо с волшебной ссылкой на указанный адрес электронной почты.
Пользователи нажимают на ссылку в отправленном письме.
Altogic перенаправляет пользователей на указанный «Redirect URL» с маркером доступа в параметре строки запроса.
Этот маркер доступа используется для получения маркера сессии, и пользователи попадают на страницу своего профиля.

Рекламное видео на Youtube

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

Настройка проекта

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

Давайте начнем кодировать!

У нас уже есть бэкэнд и фронтэнд аутентификации электронной почты. Мы можем приступить к реализации функциональности волшебной ссылки.

Настройка страницы волшебной ссылки

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

Используя команду «altogic.auth.sendMagicLinkEmail(email)», мы можем отправить волшебную ссылку на указанный email.

Вот исходный код страницы /auth/send-magic-link:

В итоге ваш экран должен выглядеть следующим образом:

Магическая ссылка Email

Вы также можете изменить все шаблоны сообщений в окне App settings → Authentication → Message templates в Altogic Designer и использовать любой HTML-шаблон, который вы хотите.

Вот как это сделать:

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

Маршрут перенаправления URL

Когда пользователи нажимают на ссылку, Altogic перенаправляет их на указанный нами URL перенаправления, который в данном случае является /auth-redirect.

Здесь, в getServerSideProps, мы проверяем параметры строки запроса, и в соответствии с каждым выполняем определенные действия. Здесь находится важная часть!

Функция getAuthGrant() либо принимает токен сессии в качестве параметра, либо использует тот, что находится в URL.

Здесь мы запускаем этот код только на стороне сервера, поэтому в качестве параметра мы должны указать токен сессии.

Что произойдет, если мы снова нажмем на ссылку?

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

Как видно из URL-адреса, маркер доступа уже использован или недействителен.

💡 Для удобства вы можете напрямую вставить сообщение об ошибке из ссылки.

Заключение

Эта статья добавила метод аутентификации по волшебной ссылке в наше приложение аутентификации электронной почты с помощью Next.js и Altogic Client Library. Благодаря Altogic мы можем создать эту функциональность с помощью всего нескольких строк кода.

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

Как реализовать аутентификацию Magic Link с помощью Next.js и Altogic