Първи стъпки
Това е прост урок за удостоверяване за изграждане на уеб приложение за удостоверяване на Twitter с помощта на Passport API. Това е страничен проект, върху който работих за образователни цели.
Разделих този урок на две части. Първата част се фокусира върху изграждането на маршрути за удостоверяване в бекенда. Втората част се фокусира върху изграждането на UI компоненти в предния край с помощта на React.
Технически стек
- Страна на сървъра: Node.js, Express.js, Passport Twitter API, MongoDB,
- Клиент: ReactJS
Какво ще построим?
- Потребителят кликва върху бутона за влизане, който пренасочва към страницата за удостоверяване на 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
Материали за четене
- „Пример за паспорт в Twitter“
- Паспорт Twitter
- Урок за приложния програмен интерфейс на Google за паспорт