Аутентификация NodeJS Google с использованием Passport и Express

Если вы когда-либо использовали свою учетную запись Google для входа в приложение, вы могли заметить, насколько это просто. Вам нужно всего лишь нажать одну кнопку и не нужно вводить свой адрес электронной почты или пароль. Хотя это кажется простым, то, что происходит под капотом, довольно сложно. Однако такие инструменты, как Passport, упрощают эту задачу.

В этом руководстве вы узнаете, как реализовать аутентификацию Google в Node с помощью Passport и Express.

Что такое паспорт?

Заграничный пасспорт (или Passport.js) — это промежуточное ПО для аутентификации Node, которое предоставляет более 500 стратегий аутентификации пользователей, включая аутентификацию через социальные сети с использованием таких платформ, как Google и Twitter.

Вы будете использовать паспорт-google-oauth2 стратегия аутентификации пользователей в Google.

Создание системы аутентификации Google в узле

Это обзор системы аутентификации, которую вы создадите:

• Когда пользователь нажимает кнопку входа, он будет отправлен на страницу входа в Google, где он войдет в систему.
instagram viewer
• Google перенаправит пользователя в ваше приложение с токеном доступа. Маркер доступа дает вам разрешение на доступ к информации профиля этого пользователя.
• Отправьте токен доступа в Google, чтобы получить данные профиля.
• Создайте нового пользователя или извлеките существующего пользователя из базы данных.
• Используйте JWT для защиты конфиденциальных маршрутов.

Как настроить аутентификацию Google в NodeJS с помощью Passport

Выполните следующие шаги, чтобы авторизовать пользователей с помощью Google OAuth,

Шаг 1. Создайте идентификатор клиента Google и секрет клиента

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

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

Создайте новый проект. В строке меню выберите Реквизиты для входа и в выпадающем списке выберите Идентификатор клиента OAuth.

В качестве типа приложения выберите веб приложение. Добавьте предпочтительное имя для вашего приложения в поле «Имя».

В авторизованных URI перенаправления используйте http://localhost: 3000 а также http://localhost: 3000/авторизация/гугл/обратный вызов для авторизованных URI перенаправления.

Нажмите Создайте для создания клиента OAuth. Поскольку учетные данные приложения являются конфиденциальными, вам необходимо создать .env файл и добавьте в него идентификатор клиента и секрет клиента.

КЛИЕНТ_ИД = 
КЛИЕНТ_СЕКРЕТ = 

Шаг 2: Настройте сервер Node.js

Создайте папку, пользователь-гугл-аутентификация, и перейдите к нему.

mkdir user-google-auth
cd пользователь-google-авторизация

Инициализировать нпм создавать пакет.json.

инициализация npm -y

Поскольку вы будете использовать экспресс для создать сервер, установите его, выполнив следующую команду.

экспресс-установка npm

Откройте папку в предпочитаемом вами текстовом редакторе и создайте новый файл. app.js. Он будет служить точкой входа вашего приложения.

Создайте сервер NodeJS в app.js.

константный экспресс = требуется ("экспресс");
константное приложение = экспресс();
постоянный ПОРТ = 3000;
app.listen (ПОРТ, () => {
 console.log(`Прослушивание порта ${PORT}`);
});

Шаг 2: Настройте MongoDB

Вы будете хранить пользовательские данные, полученные от Google, в База данных MongoDB. Перед сохранением информации о пользователе необходимо определить структуру, в которой будут храниться данные. Мангуст идеально подходит для этого. Он обеспечивает довольно простой способ создания моделей данных.

Установить мангуста.

npm установить мангуста

Создать новый файл userModel.jsи создайте схему пользователя.

const мангуст = требуют ("мангуст");
const {Схема} = mongoose.model;
const UserSchema = новая схема({
 Google: {
 я бы: {
 тип: Строка,
 },
 имя: {
 тип: Строка,
 },
 Эл. адрес: {
 тип: Строка,
 },
 },
});
const User = mongoose.model («Пользователь», UserSchema);
модуль.экспорт = Пользователь;

В userModel.js, вы импортировали mongoose и создали новую схему.

Обратите внимание, что вы группируете информацию из Google. Это особенно полезно, когда вы также используете другие методы аутентификации, а пользователь использует более одного. Это упрощает предотвращение двойной регистрации.

Далее создайте db.js.

const мангуст = требуют ("мангуст");
мангуста. Обещание = глобальное. Обещать;
const dbUrl = "mongodb://localhost/пользователь";
константное соединение = асинхронное () => {
 mongoose.connect(dbUrl, {useNewUrlParser: true, useUnifiedTopology: true});
 const db = mongoose.connection;
 db.on("ошибка", () => {
 console.log("Не удалось подключиться");
 });
 db.once("открыть", () => {
 console.log(">Успешное подключение к базе данных");
 });
};
module.exports = {подключиться};

Подключиться к базе данных в app.js.

константный экспресс = требуется ("экспресс");
константное приложение = экспресс();
постоянный ПОРТ = 3000;
const БД = Требовать("./БД");
БД.подключить();
app.listen (ПОРТ, () => {
 console.log(`Прослушивание порта ${PORT}`);
});

Шаг 3: Настройте паспорт

Установить заграничный пасспорт а также паспорт-google-oauth2.

npm я паспорт паспорт-google-oauth2

Создайте новый файл, паспортConfig.jsи импортируйте стратегию Google из паспорт-google-oauth2 а также userModel.js.

const GoogleStrategy = require("passport-google-oauth2").Strategy;
const User = require("./userModel");

Используйте учетные данные вашего приложения для настройки заграничный пасспорт с Google OAuth.

module.exports = (паспорт) => {
 паспорт.использование (новая стратегия Google({
 идентификатор клиента: process.env. ID КЛИЕНТА,
 секрет клиента: process.env. КЛИЕНТ_СЕКРЕТ,
 URL обратного вызова: " http://localhost: 3000/авторизация/гугл/обратный вызов",
 PassReqToCallback: правда
 },
 async (запрос, accessToken, refreshToken, профиль, готово) => {
 пытаться {
 let existsUser = await User.findOne({ 'google.id': profile.id });
// если пользователь существует, вернуть пользователя
 если (существующий пользователь) {
 вернуть готово (нуль, существующий пользователь);
 }
// если пользователь не существует создаем нового пользователя
 console.log('Создание нового пользователя...');
 const новый пользователь = новый пользователь ({
 метод: "гугл",
 Google: {
 идентификатор: профиль.id,
 имя: profile.displayName,
 электронная почта: profile.emails[0].value
 }
 });
 ждать newUser.save();
 return done (null, newUser);
 } поймать (ошибка) {
 return done (ошибка, ложь)
 }
 }
 ));
}

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

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

Установить дотенв.

npm установить dotenv

Использовать дотенв в app.js.

требуют("dotenv").config()

В app.js,проходить заграничный пасспорт к паспортConfig.js

const паспорт = требовать("паспорт");
требуют("./passportConfig")(паспорт);

Шаг 4: Создайте маршруты аутентификации

Вам нужны три пути к:

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

// Перенаправляем пользователя на страницу входа в Google
приложение.получить(
 "/аутентификация/гугл",
 паспорт.аутентификация("google", {scope: ["электронная почта", "профиль"] })
);
// Извлекаем данные пользователя, используя полученный токен доступа
приложение.получить(
 "/auth/google/обратный вызов",
 паспорт.аутентификация("google", {сеанс: ложь}),
 (требование, разрешение) => {
 res.redirect("/профиль/");
 }
);
// маршрут профиля после успешного входа
app.get("/profile", (req, res) => {
 console.log (требуется);
 res.send("Добро пожаловать");
});

Шаг 5: Защитите частные маршруты

Теперь, когда вы вошли в систему как пользователь, как вы можете разрешить доступ к некоторым частям вашего приложения только пользователям, прошедшим проверку подлинности? Один из способов сделать это — использовать веб-токены JSON (JWT). JWT предлагают безопасный способ передачи информации. К авторизовать пользователей Используя JWT, ваше приложение будет:

• Создайте токен, используя данные пользователя.
• Передайте токен пользователю (пользователь будет отправлять токен обратно с запросами, требующими авторизации).
• Проверьте отправленный токен.
• Предоставьте доступ пользователю, если представленный токен действителен.

Установить jsonwebтокен для работы с JWT.

npm установить jsonwebtoken

В app.js, импорт jsonwebтокен.

const jwt = требуется ("jsonwebtoken")

Измените URL-адрес обратного вызова Google, чтобы подписать пользователя и сгенерировать токен.

приложение.получить(
 "/auth/google/обратный вызов",
 паспорт.аутентификация("google", {сеанс: ложь}),
 (требование, разрешение) => {
 jwt.знак(
 {пользователь: req.user},
 "Секретный ключ",
 {expiresIn: "1h"},
 (ошибка, токен) => {
 если (ошибка) {
 вернуть res.json ({
 токен: ноль,
 });
 }
 res.json({
 жетон,
 });
 }
 );
 }
);

Если вы войдете в систему, вы получите токен.

Далее используйте паспорт-jwt, стратегия JWT, предоставляемая Passport для проверки токена и авторизации пользователей.

npm установить паспорт-jwt

В паспортConfig.js, добавьте стратегию JWT.

const JwtStrategy = require("passport-jwt").Strategy;
const { ExtractJwt } = require("passport-jwt");
module.exports = (паспорт) => {
 паспорт.использование (новая стратегия Google(
// стратегия Google
 );
 паспорт.использовать(
 новая JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader("авторизация"),
 секретОрКей: "секретный ключ",
 },
 асинхронный (jwtPayload, готово) => {
 пытаться {
// Извлечь пользователя
 постоянный пользователь = jwtPayload.user;
 сделано (нуль, пользователь); 
 } поймать (ошибка) {
 сделано (ошибка, ложь);
 }
 }
 )
 );
}

Здесь вы извлекаете токен из заголовка авторизации, где он хранится, что намного безопаснее, чем хранить его в теле запроса.

После проверки токена пользовательский объект отправляется обратно в тело запроса. Чтобы авторизовать пользователей, добавьте промежуточное ПО аутентификации JWT для паспорта в защищенные маршруты.

приложение.получить(
 "/профиль",
 паспорт.аутентификация("jwt", {сеанс: ложь}),
 (запрос, разрешение, следующий) => {
 res.send("Добро пожаловать");
 }
);

Теперь доступ получат только запросы, предоставляющие действительный токен.

Следующие шаги

В этом руководстве показано, как использовать Passport для входа пользователей в ваше приложение с использованием их учетной записи Google. Использование Паспорта намного проще, чем другие формы, и вы сэкономите много времени, используя его.

Passport также предоставляет другие стратегии аутентификации для использования с другими поставщиками удостоверений, такими как Twitter и Facebook. Так что их тоже стоит проверить.

Аутентификация пользователя в NodeJS с использованием Passport и MongoDB

Читать далее

Об авторе