В этой статье мы собираемся реализовать вход (OAuth) с помощью Google в NestJS. Исходя из Express, реализация OAuth в NestJS может показаться не такой уж простой, особенно при использовании общего модуля паспорта, потому что в NestJS очень много вещей было реализовано и заключено в различные модули вложений, которые могут быть использованы разработчиками из коробки. этот потрясающий фреймворк. Хотя это очень хорошо, вам нужно потратить время, чтобы выяснить, как некоторые из обычных вещей по-другому работают в Nest.

NestJS использует Typescript, но позволяет использовать ванильный JS, поэтому на самом деле это не заставляет разработчиков писать в машинописном тексте.

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

Предпосылки

Чтобы следовать этому руководству, у вас должно быть следующее:

  • Узел JS
  • НПМ
  • Веб-браузер
  • Редактор кода (VsCode)
  • Аккаунт Gmail

Если у вас не установлен Node.js, просто зайдите на официальный сайт Node.js, чтобы получить копию Node.js для своей платформы. После установки Node.js у вас будет автоматически установлен npm.

Начиная

Для начала мы создадим новый проект гнезда, используя команду nest cli, поэтому мы установим его глобально, выполнив следующую команду на терминале:

npm i -g @nestjs/cli

Создание нового проекта Nest

Поскольку мы только что установили nest cli глобально, мы можем использовать его для настройки нового сервера проекта Nest, выполнив следующую команду:

cd desktop && nest new google-login && cd google-login

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

Установить зависимости

В этом проекте мы будем использовать паспорт, dotenv для управления переменными среды, поэтому давайте установим их, выполнив следующее:

npm install --save @nestjs/passport passport passport-google-oauth20 dotenv
npm install -D @types/passport-google-oauth20

Проверьте сервер, запустив:

npm run start:dev

Теперь откройте браузер и введите URL-адрес localhost, на котором работает Nest ‘localhost: 3000 /’, вы должны получить Hello world, как показано ниже:

Теперь все готово

Создайте приложение Google

Чтобы использовать Google OAuth, мы должны создать приложение в консоли разработчика Google, следовательно, нам нужна учетная запись Gmail. Посетите https://console.developers.google.com/ и создайте приложение, которое мы будем использовать для настройки аутентификации в NestJS. Поэтому, когда вы посещаете URL-адрес консоли разработчика Google, вы должны увидеть что-то похожее на экран ниже.

Нажмите «НОВЫЙ ПРОЕКТ» и введите желаемое имя, а затем нажмите кнопку «Создать».

Настройка экрана согласия на проект

Экран согласия на проект - это то, что отображается пользователю всякий раз, когда он хочет использовать наше приложение Google для входа в нашу систему. Чтобы настроить экран согласия
, нажмите меню «Экран согласия OAuth» на боковой панели.

Выберите «Внешний», чтобы приложение можно было использовать в любой учетной записи Google, а затем нажмите СОЗДАТЬ.

На экране согласия убедитесь, что вы указали только «Имя приложения» и ничего больше, так как это только для целей тестирования. Если мы создаем живое приложение, можно заполнить другие поля, которые затем необходимо будет пройти через процесс утверждения. Когда закончите, нажмите "Сохранить".

Получить учетные данные приложения

Чтобы получить учетные данные нашего приложения, которые будут использоваться для аутентификации приложения с помощью Google API, нажмите меню «Учетные данные» на боковой панели.

  • Нажмите "Создать учетные данные" и выберите "Идентификатор клиента OAuth".
  • Выберите веб-приложения на следующем экране, затем заполните авторизованные источники JavaScript и URI перенаправления.

Источники авторизованного JavaScript относятся к тому, откуда будет исходить наш запрос, в данном случае это localhost, поэтому введите http: // localhost: 3000, а для URI авторизованного перенаправления введите http : // localhost: 3000 / google / redirect .

Обратите внимание, что URI перенаправления просто ссылается на конкретную конечную точку в нашем приложении, куда Google вернет ответ после аутентификации пользователя.
По завершении нажмите "Сохранить". Вы должны получить учетные данные своего приложения на экране ниже

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

Настроить вход в Google (OAuth)

Первое, что нужно сделать, это настроить стратегию Google, которая является ядром нашей реализации входа в Google. Создайте файл с именем google.strategy.ts в папке src и добавьте в него следующий код.

В приведенном выше коде мы загрузили все необходимые зависимости, а затем создали класс GoogleStrategy как подкласс класса PassportStrategy. Каждый отдельный класс, который мы определяем, который использует паспорт, должен расширять класс PassportStrategy, который является выделенным модулем из ‘@ nestjs / паспорт’.

Затем мы передаем все необходимые параметры для стратегии Google.
CLIENT_ID и CLIENT SECRET - это идентификатор приложения и SECRET, которые мы получили от Google при создании приложения. который был загружен через переменную окружения.

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

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

Метод проверки относится к функции обратного вызова проверки, которая будет выполнена после того, как Google вернет нам запрошенную информацию о пользователе. Здесь мы решаем, что мы хотим делать с информацией о пользователе, в этом случае мы просто извлекаем и форматируем нужную нам информацию из возвращенного профиля пользователя и добавляем ее к объекту пользователя, который будет доступен в глобальном объекте запроса. . Это делается путем вызова done и передачи ему null (что означает отсутствие ошибки) и объекта пользователя.

Не забудьте добавить переменные среды, как показано ниже, в файл .env в корне проекта:

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

Настройте контроллер, маршрут и службу

Чтобы мы могли войти в систему с помощью Google, мы должны настроить соответствующую конечную точку в нашем приложении, и это задача контроллеров в NestJS. Для этого откройте файл app.controller.ts в папке src и замените содержимое следующим кодом:

В NestJS маршруты могут быть настроены на уровне контроллера и / или на уровне метода запроса, поэтому в приведенном выше коде мы настраиваем маршрут входа в Google на уровне декоратора контроллера, что означает, что каждый запрос в контроллере будет проходить через конечную точку Google. Подробнее о маршрутизации в NestJS можно прочитать здесь.

Первый запрос Get - это конечная точка, которая активирует аутентификацию Google через специальный Guard из модуля «@ nestjs / паспорт», размещенного на конечной точке под названием «AuthGaurd». Мы передаем "google" в качестве аргумента этому AuthGuard, чтобы указать, что мы хотим использовать стратегию Google из модуля паспорта для аутентификации запроса на этой конечной точке.

Второй запрос Get относится ко второй конечной точке, на которую Google будет перенаправлять (URL-адрес перенаправления) после аутентификации пользователя. Эта конечная точка также использует специальный AuthGuard. После вызова функции done в методе проверки из файла стратегии Google управление возвращается обратно функции googleLogin на этом контроллере. Давайте создадим функцию googleLogin.

Откройте файл app.service.ts в папке src и добавьте следующий код:

Здесь мы просто возвращаем обратно информацию о пользователе из Google, которая была добавлена ​​к объекту запроса из метода проверки в файле стратегии Google.

Собираем все вместе

На данный момент наше приложение все еще не знает о настроенной стратегии Google, поэтому нам нужно сделать ее доступной в модуле приложения, прежде чем мы сможем ее использовать.
Откройте файл app.module.ts и добавьте стратегия Google как услуга в массиве провайдеров. Файл модуля вашего приложения должен выглядеть следующим образом:

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

Запустите приложение, запустив

npm run start:dev

Запустите любой браузер на своем компьютере и посетите конечную точку Google по адресу localhost: 3000 / google.

Вы должны увидеть что-то похожее на экран ниже:

Информация о пользователе из Google после входа в систему показана ниже:

Поздравляем! Вы только что успешно внедрили Google OAuth (вход через Google) в приложение NestJS.

Заполненный код можно найти здесь: https://github.com/iMichaelOwolabi/google-oauth-nestjs

Вы можете оставить здесь свои комментарии, если они у вас есть, а для дальнейшего взаимодействия со мной всегда можно связаться в Twitter @iMichaelOwolabi