Първи стъпки

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

Разделих този урок на две части. Първата част се фокусира върху изграждането на маршрути за удостоверяване в бекенда. Втората част се фокусира върху изграждането на UI компоненти в предния край с помощта на React.

Технически стек

Какво ще построим?

  • Потребителят кликва върху бутона за влизане, който пренасочва към страницата за удостоверяване на Twitter OAuth.
  • След като OAuth бъде успешно удостоверен в Twitter, потребителят ще бъде пренасочен обратно към началната страница на уеб приложението.

Passport.js. предлага API за удостоверяване на други доставчици на OAuth услуги като Google и Facebook. Като пример избрах да използвам Twitter като доставчик на OAuth услуга.

Какво е OAuth?

Open Authorization е стандарт за предоставяне на достъп на вашето уеб приложение до услуга за влизане на трета страна като Twitter, Facebook или Google, която връща OAuth токен. OAuth Token е удостоверение, което може да се използва от приложение за достъп до API на външна услуга.

В този проект използвам passport-twitter междинен софтуер, за да се справя с удостоверяването на Twitter с помощта на OAuth 1.0 API, защото той спестява време и управлява целия сложен процес на удостоверяване зад сцената.

Какви са крайните точки на сървъра?

/auth/twitter —удостоверяване чрез паспорт twitter

/auth/login/success —връща отговор за успешно влизане с потребителска информация

/auth/login/failed —връща съобщение за неуспешно влизане

/auth/logout —излизане и пренасочва към началната страница на клиента

/auth/twitter/redirect —пренасочване към началната страница, ако влизането е успешно или пренасочване към /auth/login/failed, ако е неуспешно

Диаграма на архитектурата

Ето преглед на архитектурната диаграма, която ще разгледаме по-подробно.

Структура на проекта

Разделих логиката на сървъра и клиента в различни папки, за да бъде ясно и чисто. Моят сървърработи на localhost:4000,докато клиентът работи на localhost:3000. (Чувствайте се свободни да определите свой собствен порт.)

|-- twitter-auth-project
|   |-- server
|   |   |-- index.js
|   |   |-- package.json
|   |-- client
|   |   |-- src
|   |   |   |-- index.jsx
|   |   |   |-- package.json

Внедряване

Част 1: Регистрирайте приложението си като доставчик на OAuth в сайта за приложения на Twitter

Първо, регистрирайте приложението си в Управление на приложения в Twitter. Ще ви бъдат издадени потребителски ключ (API Key) и потребителска тайна (API Secret), които можете да използвате в стратегията за паспорт по-късно.

Ще трябва също да конфигурирате URL адрес за обратно извикване. Това е URL адресът за обратно извикване, след като OAuth бъде удостоверен успешно.

За целите на локалното развитие персонализирах моите URL адреси за обратно извикване да бъдат клиентски URL адрес, който е localhost:3000.

Част 2: Настройка на експресен сървър за 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 съдържа всички потребителски ключове на Twitter API и конфигурации на база данни. Можете да ги копирате и да поставите свои собствени ключове.

Част 3: Настройте маршрути за удостоверяване

По-рано в „Какви са крайните точки на сървъра?“ раздел, идентифицирахме крайните точки за удостоверяване на API на Twitter.

/auth/twitter —удостоверяване чрез паспорт twitter

/auth/login/success —връща отговор за успешно влизане с потребителска информация

/auth/login/failed —връща съобщение за неуспешно влизане

/auth/logout —излизане и пренасочва към началната страница на клиента

/auth/twitter/redirect —пренасочване към началната страница, ако влизането е успешно, или към /auth/login/failed, ако е неуспешно

Нека ги приложим на практика.

/routes/auth-routes.js

В index.js импортирайте routes/auth-routes,

npm install cors — поддържа браузър с различни източници

Част 4: Настройте стратегия за Twitter с помощта на Passport API

API за паспорт е междинен софтуер, който използваме за удостоверяване чрез Twitter OAuth. Passport API извършва удостоверяването на входа зад сцената, така че не е необходимо да се справяте със сложната логика. Освен това има различни стратегии за удостоверяване (т.е. GoogleStrategy, FacebookStrategy). В моя пример избрах да използвам TwitterStrategy за влизане чрез акаунт в Twitter.

Част 5: Настройка и свързване на база данни

Когато системата успешно удостовери потребителя чрез PassportAPI, тя ще трябва да съхрани потребителя в база данни, за да може да извлече тази потребителска информация на клиента.

Използвам MongoDB, за да съхранявам информацията за влизане на потребителя.

Част 5.1 — Регистрирайте се в mlab и следвайте инструкциите тук: https://mlab.com/

Част 5.2 — Добавете идентификационни данни на MongoDB в keys.js

Част 5.3 — Установяване на MongoDB връзка с помощта на mongoose

npm install mongoose, за да се свържете с MongoDB.

„Mongoose предоставя директно, базирано на схема решение за моделиране на данните на вашето приложение. Включва вградено преобразуване на типове, валидиране и изграждане на заявки.” (https://mongoosejs.com/)

Част 5.4 — Създаване на потребителски обектен модел, който представя потребителския профил в записа на базата данни

/models/user-model.js

Част 6: Запазване и извличане на потребител от база данни

След като Passport API се удостовери успешно чрез Twitter OAuth, нашият сървър запазва потребителската информация в MongoDB. Ако този потребител вече съществува, системата просто намира текущия потребител от базата данни и го връща на клиента. Всичко това се прави с помощта на API на mongoose.

/config/passport-setup.js

Част 7: Използване на клиентска сесия за съхраняване на сесия на бисквитка

Всеки път, когато потребителят влезе в уебсайт, браузърът запомня тази потребителска информация, така че потребителят не трябва да влиза отново. Как този потребител се запомня е чрез HTTP бисквитка. HTTP бисквитката съдържа криптирани данни за потребителя и продължителността на сесията.

Ако влезете в която и да е уеб страница и отворите DevTools, можете да видите, че бисквитките са зададени в браузъра.

Сериализацията и десериализацията са важни понятия, които трябва да знаете. Сериализацията е, когато потребителят се шифрова от базата данни и я изпраща обратно на браузъра като бисквитка. Десериализация е, когато потребителската бисквитка се декриптира от браузъра към базата данни.

За да поддържа сесии за влизане, Passport ще сериализира и десериализира потребителски екземпляр към и от сесията.

/config/passport-setup.js

Ето последната index.js използваща бисквитка сесия.

Избрах да използвам cookie-session като среда за съхраняване на данни за сесията на клиента.

$ npm install cookie-session

Освен това използвайте cookieSession в 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 на сесията (от бисквитката на клиента) в потребителски обект.

Стъпка по избор:

Персонализирах localhost:4000/ root URL, за да показва съобщение за успех, ако влезете правилно, в противен случай показва неуспешно съобщение.

Следваща стъпка: Клиент — Настройте страницата за влизане и страницата за излизане с помощта на React

Създадох предните компоненти с помощта на 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/success. Ако крайната точка е успешна, информацията за потребителя ще бъде съхранена в обекта user и състоянието на authenticated ще бъде зададено true. Страницата показва съобщение, че „Влязохте успешно“. Ако крайната точка е неуспешна, потребителят не е удостоверен и страницата показва „Добре дошли“.
  • Заглавие: Управлява навигацията. Когато потребителят бъде удостоверен, „вход“ ще бъде променен на „изход“. Състоянието удостоверено се предава от HomePage като опора.

Внедряване

HomePage.jsx: контейнер, който показва информация за добре дошли и потребител

Header.jsx — компонент за навигация

И накрая, настройте Route, който навигира до HomePage в AppRouter.jsx и App.jsx

Благодаря ви много, че прочетохте тази публикация в блога. Надявам се да ви е било полезно.

Целият проект е достъпен в моя Github: https://github.com/leannezhang/twitter-authentication

Ако имате някакви коментари или обратна връзка, моля, не се колебайте да коментирате по-долу или да се свържете с мен.

Twitter: @ liyangz

Материали за четене