В этом руководстве мы будем комбинировать OAuth 2.0 с токенами JWT. Таким образом, в основном OAuth позволяет нам аутентифицировать пользователей с помощью сторонних сервисов, таких как Google, Facebook и GitHub. Между тем, JSON Web Token (JWT) позволяет нам безопасно аутентифицировать наших клиентов, передавая им токены, которые затем передаются на сервер с каждым запросом для аутентификации.

Мы будем использовать аутентификацию по электронной почте и паролю вместе с Facebook и Google OAuth 2.0. Мы создадим токены JWT для аутентификации пользователя и будем использовать файлы cookie для обмена этой информацией между клиентами и сервером. Большую роль в этом сыграет библиотека Passport и ее стратегии OAuth 2.0 (OAuth на стороне сервера), это одна из самых популярных библиотек для аутентификации в Node.

Для этой цели используются следующие пакеты.
express, body-parser, cookie-parser, jsonwebtoken, паспорт, паспорт-jwt, паспорт-facebook, паспорт-google-oauth20

# 1 Начало работы

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

# 2 Настройка промежуточного программного обеспечения и утилит

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

# 3 Получение учетных данных для OAuth

Мы будем использовать Facebook и Google для OAuth, и нам не понадобится SSL для localhost. Вы можете добавить авторизованные домены и URL-адреса перенаправления, если необходимо, по умолчанию URL-адрес установлен на localhost, а URL-адреса перенаправления разрешают все. Итак, давайте получим для них ключи API OAuth 2.0.

  • Учетные данные Facebook OAuth2.0 API
    Вам понадобится учетная запись разработчика Facebook, это бесплатно и легко настроить. Затем перейдите на страницу разработчиков Facebook и создайте приложение (назовите его как угодно).
    Перейдите в приложение, разверните категорию Продукты и добавьте Вход в Facebook.

Нас интересуют только ключи API, вы можете получить их, нажав «Приложение», развернув «Настройки» и выбрав «Базовый». Оттуда вы можете получить оба требуемых ключа. Эти ключи нам понадобятся позже.

При необходимости создайте новый проект. Затем щелкните учетные данные на левой боковой панели, нажмите «Создать учетные данные», выберите OAuth ClientID, выберите цель как «Веб-приложение» или «Другое». Эти ключи нам понадобятся позже.

# 4 Настройка стратегий аутентификации

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

Каждый раз, когда пользователь входит в систему, используя пароль электронной почты или OAuth, мы проверяем, существует ли пользователь или нет. Если его не существует, мы добавляем этого нового пользователя в данные. Затем мы генерируем токен JWT для пользователя. Веб-токены JSON предназначены для хранения только на стороне клиента и отправляются на сервер при каждом запросе, а затем сервер аутентифицирует их. Как правило, в потоке приложений, управляемом событиями, токены JWT могут храниться на localhost или подобном, но в случае OAuth мы получаем перенаправление, которое прерывает поток. Таким образом, токен аутентификации необходимо установить на стороне сервера. В этом случае нам помогают файлы cookie, мы можем хранить токен JWT в файле cookie объекта ответа. Теперь нам нужно прочитать файл cookie из запроса. Мы можем сказать паспорту, как читать jwt из файлов cookie.

Примечание. Одна из самых важных вещей в OAuth - это URL-адрес перенаправления. Каждый раз, когда пользователь аутентифицируется с использованием OAuth, поставщик, то есть facebook, возвращает токен по URL-адресу перенаправления, что прерывает поток приложения. Возвращенные данные также доступны в маршруте URL-адреса перенаправления. Мы находим или создаем пользователя на этом маршруте, а также подписываем токены JWT на этом маршруте.

Мы используем OAuth только для получения данных из их сервисов. Затем мы сохраняем эти данные и используем нашу схему аутентификации на основе JWT для проверки пользователей.

# 5 Настройка маршрутов и пользовательского интерфейса

Пришло время настроить наши маршруты и страницы, чтобы протестировать добавленные нами функции.

Сначала макеты страниц

Теперь давайте напишем маршруты. Как упоминалось ранее, URL-адрес перенаправления получает данные пользователя. Здесь мы создаем для них токены JWT и устанавливаем файлы cookie для аутентификации.

Выход из системы?

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

Полный исходный код доступен в репозитории GitHub.