Линне Чжан
Начиная
Это простое учебное пособие для аутентификации для создания веб-приложения для аутентификации Twitter, используя Паспорт API Отказ Это боковой проект, который я работал на образовательных целях.
Я сломал этот учебник на две части. Первая часть фокусируется на создании маршрутов аутентификации на бэкэнде. Вторая часть фокусируется на создании компонентов пользовательских интерфейсов в интерфейне с использованием реагирования.
Технический стек
- Серверная сторона: Node.js , Express.js , Passport Twitter API , Монгодб С
- Клиент: Rectjs.
Что мы собираемся построить?
- Пользователь нажимает на кнопку входа в систему, которые перенаправляются на страницу аутентификации Twitter Oauth.
- Как только OAUTH будет успешно аутентифицирован в Twitter, пользователь будет перенаправлен обратно на домашнюю страницу веб-приложения.
Passport.js. Предлагает аутентификацию API к другим поставщикам услуг ОАУТ, таких как Google и Facebook. В качестве примера я решил использовать Twitter в качестве поставщика услуг OAUTH.
Что такое ОАУТ?
Открытое разрешение является стандартом для предоставления доступа вашего веб-приложений к третьей стороне входа в систему, как Twitter, Facebook, или Google, который возвращает токен OAuth. Token OAuth – это учетные данные, которые можно использовать приложением для доступа к внешней службе API.
В этом проекте я использую Паспорт-Твиттер Промежуточное программное обеспечение для обработки аутентификации Twitter с помощью API OAUTH 1.0, поскольку он экономит время и обрабатывает весь комплексной процесс аутентификации за сценой.
Какие конечные точки сервера?
/auth/twitter – аутентифицировать через паспорт Twitter
/auth/login/успех – Возвращает ответ на успех входа с пользовательской информацией
/auth/logly/не удалось – Возвращает ошибку входа в систему
/auth/logout – Выход и перенаправить на домашнюю страницу клиента
/auth/twitter/Redirect – Перенаправить на домашнюю страницу, если логин преуспел или перенаправьте на /auth/logly/не удалось Если не удалось
Архитектура Диаграмма
Вот обзор архитектурной диаграммы, которую мы будем идти более подробно.
Структура проекта
Я разлучен сервер и логику клиента в разных папках, чтобы быть четкой и чистой. Мой Сервер работает на localhost: 4000, тогда как . клиент работает на localhost: 3000 Отказ (Не стесняйтесь определить свой собственный порт.)
|-- twitter-auth-project| |-- server| | |-- index.js| | |-- package.json| |-- client| | |-- src| | | |-- index.jsx| | | |-- package.json
Реализация
Часть 1: Зарегистрируйте свое приложение в качестве провайдера OAUTH на сайте приложений Twitter
Первые вещи сначала зарегистрируйте свое приложение в Управление приложениями в Твиттере Отказ Вы будете выпущены с помощью потребительского ключа (ключ API) и секретным секретом (секрет API), которые вы можете использовать в стратегии паспорта позже.
Вам также нужно будет настроить URL-адрес обратного вызова. Это URL-адрес обратного вызова после успешной аутентификации OAUTH.
Для цели развития я настроил URL-адрес моего обратного вызова, чтобы быть клиентским URL-адресом, который является localhost: 3000. .
Часть 2: Setup Express Server для аутентификации Twitter
Я выбрал Express.js Чтобы настроить сервер на бэкэнде. Express.js Это рамка для веб-приложений для Node.js, которая предназначена для создания API.
|-- server| |-- config| | |-- keys.js| | |-- passport-setup.js|-- |-- models| | |-- user-model.js| |-- routes| | |-- auth-routes.js| |-- index.js| |-- package.json
NPM Install Express установить Экспресс сервер. Сервер работает на http://localhost: 4000 .
index.js Является ли точка входа для всех конечных точек сервера.
/routes/auth-routes.js Содержит все конечные точки аутентификации.
/config/keys.js Содержит все клавиши потребительских клавиш API Twitter и конфиги базы данных. Вы можете скопировать их и поставить свои собственные ключи.
Часть 3: Настройка маршрутов аутентификации
Ранее в «Каковы конечные точки сервера?» Раздел, мы определили конечные точки аутентификации в API Twitter.
Давайте поставим их на практику.
/routes/auth-routes.js.
В index.js , импорт Маршруты/Автоматические маршруты С
NPM установить CORS – Поддержка браузера поперечного происхождения
Часть 4: Настройка стратегии Twitter с использованием Passport API
Паспорт API это промежуточное программное обеспечение, которое мы используем для аутентификации через Twitter Oauth. Passport API делает аутентификацию входа в систему сцены, поэтому вам не нужно обрабатывать сложную логику. Он также имеет различные стратегии аутентификации (I.e Googleestrategy, Facebookstrategy). В моем примере я решил использовать Twitterstrategy войти через учетную запись Twitter.
Часть 5: Настройка и подключение базы данных
Когда система успешно аутентифицирует пользователь через PassportaPi, ему нужно будет хранить пользователь в базе данных, поэтому она может получить эту пользовательскую информацию клиенту.
Я использую Mongodb для хранения информации о входе пользователя.
Часть 5.1 – Зарегистрируйтесь MLAB и следуйте инструкциям здесь: https://mlab.com/
Часть 5.2 – Добавить учетные данные Mongodb в keys.js.
Часть 5.3 – Установить соединение MongoDB с помощью Mongoose
NPM установить мангусе подключиться к MongoDB.
Часть 5.4 – Создать модель объекта пользователя, которая представляет профиль пользователя в записи базы данных
/Модели/пользователя -Model.js.
Часть 6: Сохранить и получить пользователь из базы данных
Как только Passport API успешно аутентифицируется через Twitter Oauth, наш сервер сохраняет информацию о пользователе к MongoDB. Если этот пользователь уже существует, система просто находит текущий пользователь из базы данных и возвращает пользователя к клиенту. Все это сделано с использованием Mongoose API.
/config/passport-setup.js.
Часть 7.: Используйте сеанс клиента для хранения сеанса cookie
Каждый раз, когда пользователь логин сайта, браузер запоминает эту пользовательскую информацию, чтобы пользователю не нужно входить в систему снова. Как этот пользователь запомнится, это через файл cookie http. HTTP Cookie содержит зашифрованные данные о пользователе и как долго длится сеанс.
Если вы войти в любую веб-страницу, и откройте devtools, вы можете видеть, что файлы cookie установлены в браузере.
Сериализация и десериализация являются важными концепциями, которые необходимо знать. Сериализация Когда пользователь зашифрован из базы данных и отправляет его обратно в браузер в виде файла cookie. Десериализация это когда пользовательское cookie дешифровано из браузера в базу данных.
Для поддержки сеансов входа в систему Passport будет сериализовать и десериализировать пользовательский экземпляр в и с сеанса.
/config/passport-setup.js.
Вот окончательный index.js Использование файла cookie.
Я решил использовать Cookie-Session В середине для хранения данных сеанса на клиенте.
$ npm install cookie-session
Также используйте печенье в index.js.
app.use(cookieSession({ name: 'session', keys: [/* secret keys */], maxAge: 24 * 60 * 60 * 1000 // session will expire after 24 hours}))Passport.Session () Выступает в качестве промежуточного программного обеспечения для изменения объекта REQ и измените зашифрованное значение пользователя, которое в настоящее время является сеансом SIG (из Cookie Cookie) в объект пользователя.
Дополнительный шаг :
Я настроил Localhost: 4000/root URL-адрес, чтобы показать сообщение об успехе, если входной вход правильно показывает неудачное сообщение.
Следующий шаг: клиент – Настройка страницы входа в систему и страница выхода из системы с использованием React
Я построил компоненты переднего конца, используя Реагировать и React Router настроить ссылки.
Функциональность
Страница содержит заголовок с помощью дома и логина/входа в систему. Изначально на странице отобразится сообщение «Добро пожаловать» и кнопку «Вход». Как только пользователь аутентифицируется через аутентификацию Twitter, она отобразит имя пользователя и кнопку «Выход».
Настройка клиента
client|-- src| |-- components| | |-- Header.jsx| | |-- Homepage.jsx| |-- App.js| |-- AppRouter.js| |-- index.js| |-- index.css| |-- serviceWorker.js|-- package.json
Определите компоненты пользовательского интерфейса
- Главная страница: контейнер, который отображает добро пожаловать и информацию о пользователе. Звонки /auth/login/успех конечная точка. Если конечная точка преуспела, информация о пользователе будет сохранена в Пользователь Объект и состояние аутентифицированы будет установлен правда Отказ Страница показывает сообщение о том, что «У вас успешно логин» Отказ Если конечная точка не удалась, пользователь не аутентифицируется, а Страница отображает «Добро пожаловать».
- Заголовок: он обрабатывает навигацию. Когда пользователь аутентифицирован, «Логин» будет изменен на «Выход». аутентифицированы Состояние передается с домашней страницы в качестве опоры.
Реализация
Homepage.jsx: контейнер, который отображает добро пожаловать и информация о пользователе
Header.jsx – компонент навигации
Наконец, настройте маршрут, который навигается на главную страницу в aren outder.jsx и app.jsx
Большое спасибо за чтение этого блога. Я надеюсь, что вы нашли это полезным.
Весь проект доступен на моем Github: https://github.com/leannezhang/twitter-authentication
Если у вас есть какие-либо комментарии или отзывы, пожалуйста, не стесняйтесь комментировать ниже или добраться до меня.
Twitter: @ liyangz
Чтение материалов
Оригинал: “https://www.freecodecamp.org/news/how-to-set-up-twitter-oauth-using-passport-js-and-reactjs-9ffa6f49ef0/”