С каждым приложением приходит авторизация
Недавно я столкнулся с реальностью, что пора вводить авторизацию в мое Веб-приложение Pomodoro. К настоящему моменту я реализовал авторизацию шесть раз и не очень заинтересован в выполнении этой рутинной задачи, и я думаю, что вы тоже. Так что давайте сделаем это как можно быстрее и проще.
Разбитая надежда: AWS Cognito
Недавно я услышал о волшебном сервисе AWS - Cognito, который делает аутентификацию в вашем приложении очень простой. Поскольку у меня уже был большой опыт работы с AWS, я решил попробовать. Это заняло у меня гораздо больше времени, чем я ожидал, и меня обескуражил тот факт, что эта служба не сохраняет адрес электронной почты и имя пользователя из Google / Facebook. И это ОТСТОЙ, поэтому я отказался от этой услуги.
Вступление
В этой истории мы рассмотрим как интерфейсную, так и внутреннюю части. Фронтенд загружается с помощью приложения create-response-app. Если вас интересуют шаги, которые нужно сделать во вновь созданном приложении React для добавления redux и redux-saga, вы можете проверить эту историю. Если вы хотите покопаться в исходном коде, вы можете изучить это репо. Серверная часть написана на NodeJS и использует Apollo Server, но мы рассмотрим части, которые можно использовать повторно независимо от технологии.
Процесс аутентификации будет выглядеть так:
- Получите токен от Google / Facebook.
- Сделайте запрос к серверной части, чтобы получить токен JWT.
- Сохраните токен в локальном хранилище и используйте его в запросах к серверной части, пока не истечет срок его действия.
Внешний интерфейс
Для аутентификации создадим простой компонент с двумя кнопками.
Когда пользователь нажимает на одну из кнопок, запускается соответствующая сага. Оба они очень похожи и имеют одинаковые шаги.
Во-первых, нам нужно загрузить скрипт, если он не загружен. Для этого напишем функцию.
Когда используется код поставщика, мы вызываем один из его методов для авторизации и передаем область, которая указывает, какие данные пользователя нам нужны, в нашем случае это электронная почта и основная информация о пользователе.
И, конечно же, нам нужно получить ключи, чтобы делать запросы в Google и Facebook и указывать их в константах.
С токеном от провайдера мы готовы сделать запрос к нашему приложению и авторизовать пользователя.
В этой функции мы строим запрос для бэкэнда GraphQL, в котором указываем имя провайдера и токен. Затем мы запускаем действие, чтобы сохранить ответ в состоянии.
Мы можем сохранить токен в локальное хранилище в промежуточном программном обеспечении redux следующим образом.
Взяв токен из локального хранилища, мы можем сделать запрос к API.
Думаю, мы рассмотрели основные части процесса авторизации на интерфейсе. Теперь давайте посмотрим, что происходит на сервере.
Бэкэнд
Мы не будем вдаваться в подробности здесь, а рассмотрим детали, которые можно использовать повторно независимо от используемой вами технологии.
Во-первых, давайте напишем функцию, которая будет получать имя поставщика и токен и возвращать данные пользователя и аутентификации. Кроме того, эта функция сохранит пользователя в базе данных, если такого пользователя не существует.
Здесь мы используем довольно много служебных функций для авторизации. Перечислим их здесь.
Чтобы предоставить userId контексту запроса, мы берем токен из заголовков, проверяем его и берем из него userId.
Для читателей среднего уровня я предлагаю курс Udemy Как запустить проект React: передовой опыт за 9,99 $. Цель этого курса - поделиться с вами моими выводами за последние несколько лет о том, какие шаги и решения лучше сделать в начале разработки, чтобы у вас была хорошая отправная точка для вашего нового проекта.
Достигните нового уровня сфокусированности и продуктивности с Increaser.org.
