В этой статье я расскажу вам о реализации Google OAuth с помощью паспортов и JWT в приложениях React, Node , Express , Sequelize и PostgreSQL . Такой же поток можно использовать и в приложении Next.js.

Первоначально опубликовано на https://awadieudonne.com .

Что такое Google Oauth?

Oauth означает открытую авторизацию. Это позволяет сторонним сервисам, таким как Google и Facebook, обмениваться вашей информацией без необходимости раскрывать ваши пароли. Это помогает предотвратить взлом вашего пароля. Узнайте больше о Google Oauth здесь .

Как работает Google Oauth?

Как только пользователь нажимает кнопку входа в систему Oauth, наш интерфейс отправляет запрос на сервер авторизации Google через перенаправление браузера и получает токен доступа, который предоставит доступ к Google API. Во время запроса доступа-маркера, наше приложение посылает одно или несколько значений в области видимости параметре , который управляет набором ресурсов и операций , что маркер разрешений на доступ.

Что будет дальше после получения токена доступа?

Наше приложение обращается к Google API, устанавливая токен в заголовке HTTP-запроса авторизации . Маркер доступа будет действителен только для набора операций и ресурсов, описанных в области запроса маркера.

Наш запрос аутентифицируется с использованием аутентификации Passport.js и отправляет информацию профиля пользователя. Мы получим информацию профиля пользователя в обратном вызове проверки паспорта , цель которого - найти пользователя, обладающего набором учетных данных.

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

Схема работы Google Oauth

Общие сведения о функциях сериализации и десериализации паспорта

• serializeUser: определяет, какие данные пользовательского объекта должны храниться в сеансе. Результат метода serializeUser прикрепляется к сеансу как req.session.passport.user.
• В нашем случае только идентификатор пользователя будет сериализован для сеанса, сохраняя небольшой объем данных, хранящихся в сеансе.
• deserializeUser: используется для получения идентификатора, хранящегося в сеансе, функцией serializeUser. Здесь мы выполняем внутренний вызов, чтобы получить экземпляр пользователя по этому идентификатору и присоединить его к объекту запроса как req.user .

После десериализации наш следующий обработчик получает управление, генерирует токен JWT из учетных данных в req.user и отправляет ответ, содержащий объект пользователя и JWT.

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

Внедрение Google Oauth в Nodejs, express, sequelize и Postgres

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

Посетите консоль API Google и получите учетные данные OAuth 2.0, такие как идентификатор клиента и секрет клиента, которые будут известны как Google, так и нашему приложению.

Ниже приведены шаги, которые необходимо выполнить:

• В раскрывающемся списке проектов создайте новый, щелкнув « Новый проект».
• На боковой панели в разделе «API и службы» выберите «Учетные данные».
• На вкладке « Учетные данные» щелкните раскрывающийся список « Создать учетные данные» и выберите « Идентификатор клиента OAuth» .
• Настройте экран согласия и установите области. Когда вы закончите, вернитесь к панели управления.
• Еще раз щелкните раскрывающийся список « Создать учетные данные» и выберите « Идентификатор клиента OAuth», но на этот раз вы попадете на страницу, где вы выберете тип приложения. Выберите веб-приложение.
• В разделе « Авторизованные источники JavaScript» введите URL-адрес серверного API, который в нашем случае будетhttp://localhost:3000
• В разделе URI авторизованного перенаправления введите URL-адрес внешнего интерфейса, который будет :http://localhost:4000и нажмите "Сохранить".

Создайте пустую папку и откройте ее в своем любимом редакторе. Выполните следующее, чтобы инициализировать проект Nodejs.

npm init

npm i body-parser cors dotenv express jsonwebtoken passport passport-google-token pg sequelize

npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-optional-chaining @babel/plugin-transform-runtime @babel/preset-env @babel/register @babel/runtime babel-node nodemon sequelize-cli

// api/server.js
import cors from 'cors';
import logger from 'morgan';
import express from 'express';
import bodyParser from 'body-parser';
const app = express();
app.use(cors({ origin: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(logger('dev'));
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on http://localhost:${port}`));

Шаг 1. Создайте файл .sequelizerc со следующим кодом

Шаг 2. Инициализируйте продолжение

sequelize init

• config.js, который сообщает Sequelize CLI, как подключиться к базе данных.
• модели содержат все модели для вашего проекта
• миграции содержат все файлы миграции
• сеялки содержат все файлы семян

Начнем с создания нашего файла .env для хранения переменных среды, таких как ключ клиента Google, секрет JWT, URL-адрес подключения к базе данных и т. Д.

Скопируйте идентификатор клиента Google и секретный идентификатор из панели управления консоли Google API и сохраните их в файле .env.

DATABASE_DEV=postgres: 
GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= JWT_SECRET=

Этот файл должен установить соединение с нашей базой данных, но у нас его еще нет. Итак, запустите следующую команду sequelize, чтобы создать базу данных для нашего API.

sequelize db:create

Теперь, когда мы закончили с конфигурациями, давайте создадим файл миграции пользователей со всеми его столбцами, выполнив следующую команду:

sequelize model:generate --name User --attributes name:string,email:string,password:string,goodleId:string,provider:string

sequelize db:migrate

Шаг 1. Настройте Passport.js и стратегию Google:

Создайте папку контроллера в каталоге / api и создайте еще одну новую папку для authController с index.js и паспортом.js в ней.

Скопируйте и вставьте следующий код в только что созданный файл Passport.js.

Итак, мы импортировали нашу стратегию Google и создали ее экземпляр внутри функции use (). Внутри обратного вызова verify мы получаем профиль пользователя, поступающий из Google, чтобы проверить, зарегистрировался ли этот пользователь через Google Oauth, иначе мы его подписываем и вызываем готово (null, user).

Шаг 2. Создайте функцию контроллера для завершения потока OAuth:

Внутри нашего файла controller / index.js скопируйте и вставьте следующий код

Этот Google OAuth получает аутентифицированного пользователя из объекта req, генерирует токен JWT и возвращает ответ пользователя и его токен входа.

Шаг 3: Подключите конфигурации паспорта.js к серверу и добавьте маршрут:

Импортируйте конфигурации из controllers / паспорта.js на наш экспресс-сервер и создайте конечную точку для Google OAuth. Теперь сервер должен выглядеть так:

На этом мы закончили внедрение Google Oauth в Nodejs, express, sequelize и Postgres. Давайте продолжим и используем конечную точку OAuth во внешнем интерфейсе.

Реализация Google Oauth в ReactJs

1. Инициализируйте приложение create-response-app:

Инициализируйте новый проект реагирования, выполнив в своем термине следующую команду:

npx create-react-app google-oauth-client

npm i --save axios react-google-login js-cookie

Давайте сначала настроим переменные среды.

Создайте файл .env в корневом каталоге приложения и добавьте в него следующие переменные.

REACT_APP_API_BASE_URL=http: REACT_APP_GOOGLE_CLIENT_ID=

У вас должно получиться что-то вроде этого в качестве конечного результата

Проверьте это, если у вас возникнут какие-либо проблемы, дайте мне знать в разделе комментариев, я доступен 24/7, чтобы ответить на ваши вопросы.

Заключение

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

Вы узнали что-то новое? Оставьте это в разделе комментариев, мы никогда не сможем сказать, сколько людей узнают от нас. Было ли это полезно? Распространяйте информацию, делитесь с друзьями даже в социальных сетях.

Спасибо

Первоначально опубликовано на https://awadieudonne.com .