Автор оригинала: Michael Owolabi.
В этой статье мы собираемся реализовать (OAuth) вход в систему с Google в Nest JS. Исходя из Экспрессии, реализация ОАУТ в гнезде JS может показаться не таким прямым, особенно при использовании общего модуля паспорта, потому что в гнезде JS, так много вещей были реализованы и завернуты в различные модули гнезда, которые могут быть использованы из коробки разработчиками. Здание в этой потрясающей структуре. Хотя это очень хорошая вещь, вы должны потратить время, чтобы выяснить, как некоторые из регулярных вещей работают по-разному в гнезде.
Гнездо JS использует TypectScript, но позволяет использовать ванильные JS, поэтому он не на самом деле не заставляет разработчиков писать в Teadercript.
Гнездо построено на популярной экспресс-каркасе, и некоторые понятия очень знакомы, но если вы никогда не работаете с гнездом и хотите получить больше из этой статьи, то я предлагаю вам предложить несколько минут, чтобы ознакомиться с рамками здесь Раздел обзора, безусловно, подойдет вам быстро.
Предпосылки
Для выполнения этого учебника вы должны иметь следующее:
* Node JS * NPM * Web Browser * Code Editor (VsCode) * Gmail Account
Если у вас нет Node.js установлено, просто отправляйтесь на официальный Node.js Сайт для получения копии Node.js для вашей платформы. После установки Node.js вы автоматически установите NPM.
Начиная
Чтобы начать, мы собираемся лечить новый проект NACT, используя NANT CLI, поэтому мы устанавливаем его по всему миру, запустив следующую команду на терминале:
npm i -g @nestjs/cli
Создание нового проекта NATE
Поскольку мы только что установили NANT CLI глобально, мы можем использовать его для настройки нового сервера проекта NATE, запустив следующую команду:
cd desktop && nest new google-login && cd google-login
Откройте сгенерированный папку проекта в вашем редакторе выбора, который должен выглядеть следующим ниже:
Установка зависимостей
Для этого проекта мы будем использовать Passport, dotenv, чтобы управлять нашими переменными среды, поэтому давайте установим их, выполнив следующее:
npm install --save @nestjs/passport passport passport-google-oauth20 dotenv npm install -D @types/passport-google-oauth20
Проверьте сервер, запустив:
npm run start:dev
Теперь открыть браузер и введите URL-адрес localhost, на котором работает гнездо ‘localhost: 3000/’ Вы должны получить Здравствуйте, мир Так же, как показано ниже:
Теперь мы добры к работе 🚀
Создайте приложение Google
Чтобы использовать Google Oauth, мы должны создать приложение в консоли Google Developer, следовательно, необходимость в учетной записи Gmail. Посетить https://console.developers.google.com/ И создайте приложение, которое мы будем использовать для настройки аутентификации в гнезде JS. Поэтому, когда вы посещаете URL Console Google Developer, вы должны увидеть что-то похоже на экран ниже
Нажмите на «Новый проект» И заполните желаемое имя, а затем нажмите кнопку Создать.
Установите экран согласия проекта
Экран согласия проекта – это то, что отображается пользователю всякий раз, когда они хотят использовать наше приложение Google для входа в нашу систему. Чтобы установить экран согласия нажмите меню «Экран согласия OAUTH» на боковой панели
Выберите внешний, поэтому приложение может использоваться любой учетной записью Google, а затем нажмите Создать Отказ
На экране согласия убедитесь, что вы заполняете только «имя приложения» и ничего, поскольку это просто для целей тестирования. Если мы создаем живое приложение, то другие поля могут быть заполнены, что тогда нужно будет пройти процесс одобрения. Нажмите Сохранить, когда вы закончите.
Получить учетные данные приложений
Чтобы получить учетные данные приложений, которые будут использоваться для аутентификации приложения с API Google, нажмите на меню «Учетные данные» на боковой панели.
* Click Create credentials and select OAuth Client ID * Select Web applications on the next screen then fill the Authorized JavaScript origins and the redirect URI.
Уполномоченный JavaScript Reightins относится к тому, где наша просьба придет, из которой в этом случае находится localhost, поэтому введите http://localhost: 3000 А для уполномоченного Redirect URI введите http://localhost: 3000/Google/Redirect Отказ
Пожалуйста, обратите внимание, что Redirect URI просто относится к конкретной конечной точке в нашем приложении, где Google вернет ответ после аутентификации пользователя. Нажмите Сохранить, когда вы закончите. Вы должны получить учетные данные приложения с экрана ниже
Скопируйте учетные данные и сохраните его где-то, потому что мы собираемся использовать его в нашем приложении.
Настройка Google Login (Oauth)
Первое, что нужно сделать, это установить стратегию Google, которая является ядром нашей реализации входа в систему Google. Создайте файл с именем Google.Strategy.ts в папке SRC и добавьте следующий код в файл.
import { PassportStrategy } from '@nestjs/passport';
import { Strategy, VerifyCallback } from 'passport-google-oauth20';
import { config } from 'dotenv';
import { Injectable } from '@nestjs/common';
config();
@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
constructor() {
super({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_SECRET,
callbackURL: 'http://localhost:3000/google/redirect',
scope: ['email', 'profile'],
});
}
async validate (accessToken: string, refreshToken: string, profile: any, done: VerifyCallback): Promise {
const { name, emails, photos } = profile
const user = {
email: emails[0].value,
firstName: name.givenName,
lastName: name.familyName,
picture: photos[0].value,
accessToken
}
done(null, user);
}
}
В указанном выше коде мы загрузили все необходимые зависимости, а затем создали Googleestrategy класс как подкласс Паспортная стратегия класс. Каждый отдельный класс, который мы определяем, который использует паспорт, должен продлить класс PASPPortStrategy, который является выделенным модулем из ‘@ Nestjs/Passport’ Отказ
Затем мы проходим во все необходимые параметры для стратегии Google. Client_id и Client Secret Являются ли идентификатор приложения и секрет, который мы получили от Google, когда мы создали приложение, которое было загружено через переменную среды.
Callbackurl Особая конечная точка в нашем приложении, которую Google вернет контроль после аутентификации пользователя. Помните, что мы определили это также в Google при создании нашего приложения.
Область Относится к набору пользовательской информации, которую мы требуем от Google, необходимых в нашем приложении. В этом случае базовая пользовательская информация, захваченная в профиле и электронной почте пользователя.
Метод проверки Относится к проверке функции обратного вызова, которая будет выполнена после того, как Google возвращает нам запрошенную информацию о пользователе. Именно здесь мы решаем, что мы хотим сделать с пользовательской информацией, в этом случае мы просто извлекаем и форматируем информацию, которую нам нужно от возвращенного профиля пользователя и добавления его в объект пользователя, который будет доступен на объекте глобального запроса. Отказ Это делается путем вызова проведенного и передачи в него NULL (что означает отсутствие ошибок) и объекта пользователя.
Не забудьте добавить переменные среды, как показано ниже в файле .env в корне проекта:
Примечание: Мы могли бы легко сделать все, что мы хотим сделать с пользовательской информацией в файле стратегии, но гнездо JS очень велик в принципе одной ответственности, и, поскольку обычно в реальном времени мы, скорее всего, захочется сохранить информацию о пользователе в базе данных, такие Вид действий посвящен чему-то называемым услугам в гнезде JS.
Настройка контроллера, маршрута и обслуживания
Для нас, чтобы иметь возможность войти в Google, мы должны настроить соответствующую конечную точку в нашем приложении, и это задание контроллеров в гнезде JS. Для этого откройте файл App.controller.ts в папке SRC и замените содержимое следующим кодом.
import { Controller, Get, Req, UseGuards } from '@nestjs/common';
import { AppService } from './app.service';
import { AuthGuard } from '@nestjs/passport';
@Controller('google')
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
@UseGuards(AuthGuard('google'))
async googleAuth(@Req() req) {}
@Get('redirect')
@UseGuards(AuthGuard('google'))
googleAuthRedirect(@Req() req) {
return this.appService.googleLogin(req)
}
}
В гнезде JS маршруты могут быть установлены на уровне контроллера и/или на уровне метода запроса, поэтому в коде выше мы настроили маршрут входа в Google на уровне декората контроллера, что означает, что каждый запрос в контроллере пройдет через конечную точку Google Отказ Вы можете прочитать больше на маршрутизации в гнезде JS здесь
Первый запрос Get – это конечная точка, которая активирует аутентификацию Google через специальную защиту от модуля «@ @ nestjs/passport», размещенного на конечной точке, называемом “Authgaurd” Отказ Мы проходим в «Google» в качестве аргумента этого Authguard, чтобы означать, что мы хотим использовать стратегию Google от модуля Passport для аутентификации запроса на этой конечной точке.
Второй запрос GET относится к второй конечной точке, в которой Google перенасматривается с помощью (URL Redirec) после аутентификации пользователя. Эта конечная точка также использует специальный authguard. После выполненной функции в корректирующем методе из файла Google стратегии называется, управление возвращается обратно в функцию GoogleLogin на этом контроллере. Давайте создадим функцию GoogleLogin.
Откройте файл app.service.tts в папке SRC и добавьте следующий код
import { Injectable } from '@nestjs/common';
@Injectable()
export class AppService {
googleLogin(req) {
if (!req.user) {
return 'No user from google'
}
return {
message: 'User information from google',
user: req.user
}
}
}
Здесь мы просто возвращаем информацию о пользователе из Google, которая была добавлена к объекту запроса из метода проверки в файле стратегии Google.
Принося все это вместе
Наша заявка до сих пор не знает о стратегии Google, которая была установлена, поэтому нам нужно сделать его в модуле приложения, прежде чем мы сможем использовать его. Откройте файл app.module.ts и добавьте стратегию Google в качестве услуги в массиве провайдера. Ваш файл модуля приложения должен выглядеть следующим ниже
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GoogleStrategy } from './google.strategy'
@Module({
imports: [],
controllers: [AppController],
providers: [AppService, GoogleStrategy],
})
export class AppModule {}
Тестирование нашего приложения
Запустите приложение, запустив
npm run start:dev
Запустите любой браузер на вашем компьютере и посетите конечную точку Google в localhost: 3000/Google
Вы должны увидеть что-то похожее на экран ниже
Поздравляю! Вы только что успешно реализовали Google Oauth (логин с Google) в приложении NATE JS.
Завершенный код можно найти здесь: https://github.com/imichaelowolabi/google-oauth-nestjs.
Вы можете бросить свои комментарии здесь, если у вас есть один и для дальнейших обязательств, я всегда могу быть достигнут в Twitter @imichaelowolabi