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

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

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

~ Эрик Эллиотт

Узнайте, как отказ от пароля может принести пользу вашим пользователям и вашей организации.

В сегодняшней статье мы будем создавать приложение React с аутентификацией без пароля через Auth0. Для краткости мы будем использовать Auth0 React Starter в качестве основы для нашего приложения. Мы рассмотрим преимущества аутентификации без пароля и посмотрим, как она может обеспечить лучшую безопасность по сравнению с традиционными методами аутентификации.

Что такое Passwordless All About?

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

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

Кто использует пароль без пароля?

Многие компании уже внедрили аутентификацию без пароля, включая Medium, Slack и WhatsApp. Аутентификацию без пароля можно найти как в веб-приложениях, так и в мобильных, и она особенно хорошо подходит для мобильных устройств, поскольку пользователь обычно находится на своем устройстве, которое получает одноразовый пароль, что обеспечивает очень интуитивно понятный рабочий процесс.

Что мы будем строить

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

Переход без пароля с React и Auth0

Чтобы продемонстрировать, как все это работает, мы создадим приложение React без пароля, которое использует библиотеку Auth0 Passwordless. Для начала зарегистрируйтесь для получения бесплатной учетной записи Auth0 и загляните в панель управления. Мы будем использовать проект React seed, чтобы сэкономить время. Предполагается, что у вас есть базовые знания React, так как мы пропустим основные идиомы React.

Исходный проект дает нам хорошую отправную точку для нашего приложения. У нас есть базовая маршрутизация, пара компонентов, несколько помощников и, самое главное, процесс сборки для транспиляции и обслуживания нашего кода. Запустите `npm install`, чтобы получить зависимости проекта. Чтобы убедиться, что исходный проект работает с традиционной аутентификацией, отредактируйте файл `.env`, указав свои учетные данные Auth0:

cp .env.example .env

Запустите приложение, запустив `npm start`. Затем перейдите к `localhost: 3000`, чтобы увидеть приложение в действии. Вы должны иметь возможность войти / зарегистрироваться, указав адрес электронной почты и пароль.

Служба аутентификации без пароля

Теперь давайте реализуем аутентификацию без пароля. Остановите приложение и запустите:

npm install auth0-lock-passwordless --save

Это откроет библиотеку Auth0 Passwordless и сохранит ее в нашем файле `package.json`. Затем откройте `AuthService.js`, расположенный в каталоге utils. Именно здесь будет происходить основная часть нашей реализации без пароля.

Не стесняйтесь вырезать здесь весь существующий код - мы повторно реализуем функциональность и объясним это строка за строкой.

Наша служба аутентификации без пароля завершена, но прежде чем мы сможем протестировать наш код, нам нужно будет включить функцию без пароля на нашей панели инструментов Auth0. Перейдите к https://manage.auth0.com, затем к Подключениям и, наконец, к Без пароля. Здесь есть три варианта: SMS, электронная почта и TouchID. SMS потребует, чтобы у вас была учетная запись Twilio и ключи API, чтобы вы могли отправлять SMS-сообщения. Функциональность электронной почты позволяет отправлять электронные письма от провайдера электронной почты Auth0 по умолчанию, но вы также можете настроить свое собственное. Наконец, функция TouchID позволяет реализовать решение Apple без пароля для устройств iOS. Мы не будем внедрять TouchID здесь, так как это возможно только в мобильных приложениях.

Включите SMS и электронную почту. Щелчок по любому из них вызовет модальное диалоговое окно, позволяющее настраивать и редактировать различные параметры. Некоторые из них, такие как ключ API для Twilio, являются обязательными, в то время как другие, такие как шаблон сообщения или срок действия одноразовых кодов доступа, являются необязательными. Не стесняйтесь редактировать их или оставлять рекомендуемые значения по умолчанию.

Обновление пользовательского интерфейса

Включив функцию без пароля, давайте вернемся к нашему коду. Откройте `Login.js`, расположенный в каталоге ` views / main / login / `. Здесь мы добавим конструктор для проверки существующей учетной записи, а также добавим пользовательский интерфейс для различных методов входа, которые мы создали в службе аутентификации.

Понимание того, как работает наша маршрутизация

Прежде чем мы приступим к тестированию нашего приложения, давайте кратко рассмотрим `routes.js`, расположенный в каталоге ` / views`. Здесь мы не будем вносить никаких изменений в код исходного проекта, но мы должны отметить несколько важных моментов. Взгляните на код и комментарии ниже.

Тестирование нашего приложения без пароля

Давайте протестируем наше приложение. Система сборки webpack должна была перекомпилировать все изменения, которые вы вносили автоматически, поэтому перейдите к `localhost: 3000`, чтобы увидеть ваше приложение в действии. Вы увидите страницу входа, на которой будет три варианта входа. Выберите один и следуйте инструкциям на экране, чтобы указать адрес электронной почты или номер телефона, в зависимости от того, какой вариант вы выбрали.

Если мы выберем вариант «Войти с кодом электронной почты», мы сможем ввести адрес электронной почты.

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

Вернувшись в приложение, введите код, полученный в электронном письме.

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

Идти дальше

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

Без пароля - отличный вариант, но Auth0 идет еще дальше и позволяет нам легко комбинировать и согласовывать стратегии социальной аутентификации. Мы можем использовать ту же библиотеку, чтобы добавить социальную аутентификацию с распространенными социальными провайдерами, такими как Facebook, Twitter или Google, в дополнение к тому, чтобы предлагать пользователям вариант без пароля.

Документация объясняет, как это сделать гораздо более подробно, но самый простой способ добавить социальные сети и пароль без пароля в один модальный вход - это использовать одну из вспомогательных функций, например `lock.socialOrMagiclink ()` . Если бы мы захотели распространить это на наше приложение React, это выглядело бы так:

И различия пользовательского интерфейса мгновенно отразятся:

Нам просто нужно добавить наши секретные ключи Facebook и Twitter в панель управления Auth0, и все будет готово.

Заключение

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

Райан Ченки - разработчик полного цикла из Канады, который создает контент для Auth0, включая подробные руководства и исходные проекты для новейших фреймворков и технологий, таких как Angular 2, React и Aurelia. Когда он не занимается программированием, его можно застать гуляющим с женой, играющим на гитаре или занудным в космосе.