Это статья из двух частей, посвященная включению современной аутентификации пользователей в ваши веб-приложения за меньшее время, чем у вас, чтобы получить кофе Starbucks. Ладно ладно! может быть, не коротким, но определенно примерно в то время, которое вы проводите в пивной тусовке. Вы думаете, что в наши дни никто не настолько сумасшедший, чтобы создать собственную аутентификацию пользователя, верно? Неправда, дорогой читатель! Я постоянно сталкиваюсь с программным обеспечением с отечественными системами аутентификации, готовыми к эксплуатации. Я надеюсь, что это практическое руководство поможет решить этот важный аспект веб-приложений.

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

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

Вяз?

Нет, это не вяз, который может быть у вас на заднем дворе. Итак, что же такое Вяз?

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

Я мог бы продолжать и говорить об удивительной доброте Вяза, но я не буду отдавать ему должное. Если вы думали, что Angular слишком сложен, а React немного лучше, проверьте Elm. Если вы фанат функционального программирования и отважный разработчик Haskell, вы можете посмотреть на GHCJS или PureScript как на альтернативу Elm. Ударь это! Я шутил о GHCJS.

Auth0

Один из худших грехов программиста, который вы можете совершить, - это создание собственной системы аутентификации. Например, у вас есть таблица имени пользователя, пароля и проверка ввода пользователя по этой таблице. Ах да, вы заботитесь о безопасности и храните хешированные пароли только с долей скепсиса. Итак, вы в безопасности? К сожалению, ответ отрицательный. Создание инфраструктуры безопасности - дело сложное и непростое. Лучше передать ее тому, кто считает аутентификацию фундаментальной основой своего бизнеса. Как та компания Google или Facebook, о которой вы, возможно, слышали.

Хорошо, теперь, когда я убедил вас держаться подальше от создания собственной инфраструктуры безопасности, вы столкнулись с новой проблемой. Собираетесь ли вы использовать Google или Facebook в качестве системы аутентификации? Что, если среди ваших пользователей есть фанаты Microsoft? Как умная девушка, вы могли бы подумать, что есть какой-то стандарт, которого придерживаются все эти провайдеры идентификации, не так ли?

Справа, и здесь Auth0 появляется на сцене. Они позаботятся обо всех мельчайших деталях работы с различными серверами аутентификации и предоставят вам единый интерфейс, о котором нужно беспокоиться. Они даже предоставляют вам виджет, который можно отображать в браузере (или даже в приложении, если вам это нравится). Auth0 легко начать без каких-либо обязательств. Если вам не нравится Auth0 и вы не возражаете против меньшего количества фиксированных параметров, вы всегда можете работать напрямую с серверами аутентификации, такими как Google или Facebook.

Как это работает?

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

  • Мы полагаемся на локальное хранилище браузера, чтобы отслеживать статус аутентификации пользователя. Мы также можем использовать Session Storage, если хотим другого поведения.
  • После инициализации приложение Elm возвращает начальное состояние с authenticated на False и profile на Nothing и Ports.authStatus время выполнения команды Elm. В результате этой команды он получит сообщение о подписке от Ports.authResponse.
  • Функция update получает ответ аутентификации вместе с состоянием. Когда ответ содержит действительный профиль пользователя, состояние обновляется, что приводит к отображению содержимого функцией просмотра. В противном случае функция update возвращает Command время выполнения Elm для отображения виджета входа в систему для пользователя.
  • authorization response, полученный от Ports.authResponse, отображается этой функцией на Msg.
  • Виджет входа в систему, предоставляемый Auth0, отображает страницу в браузере. Когда пользователь предоставляет действительные учетные данные, Auth0 перенаправляет браузер на URL-адрес обратного вызова вместе с токеном доступа. Наша HTML-страница перезагружается, и handleAuthentication функция в auth.js анализирует хэш URL и сохраняет профиль пользователя в LocalStorage. Ответ аутентификации отправляется через порт, который доставляется в наше приложение Elm. После нескольких поворотов состояние нашего приложения заканчивается профилем пользователя, и пользователю отображается его содержимое.
  • Когда auth.js загружается в первый раз, в хэше нет токена, и handleAuthentication не действует.
  • Когда auth.js загружается во второй раз, handleAuthentication находит это и анализирует хэш.

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

Поведение handleAuthentication представляет небольшую проблему. Когда браузер перенаправляется на наш URL-адрес обратного вызова, приложение Elm запрашивает статус аутентификации и получает ответ нет профиля пользователя. Это потому, что handleAuthentication еще не успел запустить. Это может привести к плохому взаимодействию с пользователем, поскольку пользователя просят войти в систему два раза подряд. Решение состоит в том, чтобы различать две ситуации, глядя на расположение браузера и игнорировать запрос порта состояния аутентификации, если хэш содержит строку #accessToken. Откровенно говоря, это выглядит как уродливый взлом, которого я бы хотел избежать.

Вы опасаетесь кодов

Ах! Наконец, мы можем увидеть код. Клонируйте репозиторий с git clone https://github.com/MonadicT/elm-auth0.git. Соответствующие исходные файлы:

  • src/Main.elm содержит типы данных и функции просмотра
  • src/Auth.elm определяет структуру передачи данных между программой Elm и Javascript. Кроме того, определяет функцию для сопоставления ответов, полученных от порта, с типом данных Elm.
  • src/Ports.elm определяет Порты, которые позволяют программе Elm взаимодействовать с миром Javascript.
  • src/auth.js Javascript, который отображает виджет Auth0 Lock и обрабатывает результат аутентификации.

Настраивать

Вяз

Я предполагаю, что у вас уже есть установка Elm. Если нет, отправляйтесь на сказочный elm-lang.org и следуйте их указаниям.

Я предполагаю, что у вас уже есть установка Elm. Если нет, отправляйтесь на сказочный elm-lang.org и следуйте их указаниям.

Настройка Auth0

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

  • Перейдите на https://manage.auth0.com. Выберите вкладку Sign Up, выберите любой из представленных методов для регистрации с Auth0 в качестве своего пользователя. Вам должен быть представлен экран, как показано ниже.

  • Нажмите на свой любимый и завершите процесс регистрации Auth0. В этот момент вы должны перейти на страницу Dashboard.

  • Щелкните Connections и разверните Social, чтобы увидеть следующую страницу.

Как видите, есть множество вариантов на выбор! Ради этого урока нажмите Google. Обратите внимание, что вам не обязательно иметь свои Client ID и App Secret, пока вы не начнете работу. Вы можете просто оставить эти поля пустыми.

  • В качестве последнего шага нажмите TRY и убедитесь, что вам представлена ​​Google Sign In страница, как показано ниже.

Код

Клонировать репозиторий Github

Весь код для этого руководства находится в репозитории Github.

git clone https://github.com/MonadicT/elm-auth0.git

Установите необходимые пакеты npm

npm install

Собери и запусти Вяз

elm-app start

Выводы

Итак, вот оно что! Хороший и безопасный способ аутентификации пользователей. Надеюсь, вы также познакомились с языком Elm и оценили удобство интеграции с каждым поставщиком удостоверений в Интернете с минимальными затратами усилий на разработку, благодаря Auth0!

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

Ресурсы

Вы можете узнать больше о Elm, OAuth, OpenID и Auth0 по ссылкам ниже.