de Leanne Zhang

Cum se configurează Twitter OAuth folosind Passport.js și ReactJS

Noțiuni de bază

Acesta este un tutorial simplu de autentificare pentru crearea unei aplicații web de autentificare Twitter utilizând API pașaport. Este un proiect secundar la care am lucrat în scopuri educaționale.

Am împărțit acest tutorial în două părți. Prima parte se concentrează pe construirea rutelor de autentificare în backend. A doua parte se concentrează pe construirea componentelor UI în front-end folosind React.

Stiva tehnică

Ce vom construi?

  • Utilizatorul face clic pe butonul de conectare care redirecționează către pagina de autentificare Twitter OAuth.
  • Odată ce OAuth a fost autentificat cu succes pe Twitter, utilizatorul va fi redirecționat înapoi la pagina principală a aplicației web.
Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
Autentificați-vă prin pașaport-twitter

Passport.js. oferă API-uri de autentificare altor furnizori de servicii OAuth precum Google și Facebook. De exemplu, am ales să folosesc Twitter ca furnizor de servicii OAuth.

Ce este OAuth?

Autorizarea deschisă este un standard pentru acordarea accesului aplicației dvs. web la un serviciu de conectare terță parte, cum ar fi Twitter, Facebook sau Google, care returnează un token OAuth. Un token OAuth este o acreditare care poate fi utilizată de o aplicație pentru a accesa un API de serviciu extern.

În acest proiect, îl folosesc passport-twitter middleware pentru a gestiona autentificarea Twitter utilizând API-ul OAuth 1.0, deoarece economisește timp și gestionează tot procesul complex de autentificare din spatele scenei.

Care sunt punctele finale ale serverului?

/ auth / twitter – autentificați-vă prin intermediul pașaportului twitter

/ auth / login / success – returnează răspunsul de conectare cu informații despre utilizator

/ auth / login / failed – returnează mesajul eșuat de conectare

/ auth / logout – deconectați-vă și redirecționați către pagina de pornire a clientului

/ auth / twitter / redirect – redirecționați către pagina principală dacă autentificarea a reușit sau redirecționați către / auth / login / a eșuat dacă nu reușește

Diagrama arhitecturii

Iată o prezentare generală a diagramei de arhitectură pe care o vom trece în detaliu.

Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
Diagrama arhitecturii

Structura proiectului

Am separat logica serverului și clientului în diferite foldere pentru a fi clară și curată. Ale mele Server merge mai departe localhost: 4000, întrucât client merge mai departe localhost: 3000. (Simțiți-vă liber să vă definiți propriul port.)

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

Implementare

Partea 1: Înregistrați-vă aplicația ca furnizor OAuth pe site-ul aplicației Twitter

În primul rând, înregistrați-vă aplicația la Gestionarea aplicațiilor Twitter. Vi se va emite o cheie pentru consumator (cheie API) și un secret pentru consumatori (API Secret) pe care le puteți utiliza ulterior în strategia de pașapoarte.

De asemenea, va trebui să configurați o adresă URL de apel invers. Aceasta este adresa URL de apelare după ce OAuth a fost autentificat cu succes.

În scopul dezvoltării locale, mi-am personalizat adresele URL de apel invers pentru a fi adresa URL a clientului care este localhost: 3000.

Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
https://developer.twitter.com/en/apps/create

Partea 2: Configurarea serverului Express pentru autentificarea Twitter

Am ales Express.js pentru a configura serverul pe backend. Express.js este un cadru de aplicații web pentru Node.js care a fost conceput pentru a construi API-uri.

|-- server|   |-- config|   |   |-- keys.js|   |   |-- passport-setup.js|-- |-- models|   |   |-- user-model.js|   |-- routes|   |   |-- auth-routes.js|   |-- index.js|   |-- package.json

npm install express pentru a instala un expres Server. Serverul rulează http: // localhost: 4000.

index.js este punctul de intrare pentru toate punctele finale ale serverului.

/routes/auth-routes.js conține toate punctele finale de autentificare.

/config/keys.js conține toate cheile de consumator API Twitter și configurațiile bazei de date. Le puteți copia și pune propriile chei.

Partea 3: Configurarea rutelor de autentificare

Anterior în „Care sunt punctele finale ale serverului?” secțiunea, am identificat punctele finale de autentificare la Twitter API.

/ auth / twitter – autentificare prin pașaport twitter

/ auth / login / success – returnează răspunsul la succesul conectării cu informații despre utilizator

/ auth / login / failed – returnează mesajul eșuat de conectare

/ auth / logout – deconectați-vă și redirecționați către pagina principală a clientului

/ auth / twitter / redirect – redirecționați către pagina principală dacă autentificarea a reușit sau către / auth / login / a eșuat dacă nu reușește

Să le punem în practică.

/routes/auth-routes.js

În index.js, import routes/auth-routes,

npm install cors – acceptă browserul cross-origin

Partea 4: Configurați strategia Twitter utilizând Passport API

API pașaport este un middleware pe care îl folosim pentru autentificare prin Twitter OAuth. API-ul Passport face autentificarea autentificării din spatele scenei, astfel încât să nu aveți nevoie să gestionați logica complexă. De asemenea, are diferite strategii de autentificare (de exemplu, GoogleStrategy, FacebookStrategy). În exemplul meu, am ales să folosesc TwitterStrategy pentru a vă conecta printr-un cont Twitter.

Partea 5: Configurați și conectați o bază de date

Când sistemul autentifică cu succes utilizatorul prin PassportAPI, va trebui să-l stocheze într-o bază de date, astfel încât să poată recupera aceste informații despre utilizator către client.

1612049891 13 Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
schema de arhitectură

Folosesc MongoDB pentru a stoca informațiile de conectare ale utilizatorului.

Partea 5.1 – Înscrieți-vă la mlab și urmați instrucțiunile de aici: https://mlab.com/

Partea 5.2 – Adăugați acreditări MongoDB în keys.js

Partea 5.3 – Stabiliți o conexiune MongoDB folosind mongoose

npm install mongoose pentru a vă conecta la MongoDB.

„Mangusta oferă o soluție simplă, bazată pe schemă, pentru modelarea datelor aplicației dvs. Include tipecastul, validarea și construirea de interogări încorporate.”(https://mongoosejs.com/)

Partea 5.4 – Creați un model de obiect utilizator care reprezintă profilul utilizatorului în înregistrarea bazei de date

/models/user-model.js

Partea 6: Salvați și preluați utilizatorul dintr-o bază de date

Odată ce API-ul Passport s-a autentificat cu succes prin Twitter OAuth, serverul nostru salvează informațiile utilizatorului pe MongoDB. Dacă acest utilizator există deja, sistemul găsește pur și simplu utilizatorul curent din baza de date și îl returnează utilizatorului către client. Toate acestea se fac folosind API-uri mongoose.

/config/passport-setup.js

De fiecare dată când utilizatorul se conectează la un site web, browserul își amintește aceste informații ale utilizatorului, astfel încât utilizatorul să nu fie nevoie să se conecteze din nou. Modul în care acest utilizator este amintit este printr-un cookie HTTP. Un cookie HTTP conține date criptate despre utilizator și cât durează sesiunea.

Dacă vă conectați la orice pagină web și deschideți DevTools, puteți vedea modulele cookie care au fost setate în browser.

1612049891 658 Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
După o autentificare reușită, cookie-urile sunt setate în browser. Deschideți DevTools, accesați Aplicație | Cookie-uri.

Serializarea și deserializarea sunt concepte importante de cunoscut. Serializare este atunci când utilizatorul este criptat din baza de date și îl trimite înapoi la browser ca cookie. Deserializarea este atunci când cookie-ul utilizatorului este decriptat din browser în baza de date.

Pentru a sprijini sesiunile de conectare, Passport va serializa și deserializa instanța utilizatorului către și de la sesiune.

/config/passport-setup.js

Iată finalul index.js folosind cookie-session.

Am ales să folosesc cookie-session ca mijloc de stocare a datelor de sesiune pe client.

$ npm install cookie-session

De asemenea, utilizați cookieSession în index.js

app.use(cookieSession({  name: 'session',  keys: [/* secret keys */],  maxAge: 24 * 60 * 60 * 1000 // session will expire after 24 hours}))

passport.session() acționează ca un middleware pentru a modifica obiectul req și a schimba valoarea de utilizator criptată care este în prezent sig-ul de sesiune (de la cookie-ul clientului) într-un obiect de utilizator.

Pas opțional:

Am personalizat localhost: 4000 / URL-ul rădăcină pentru a afișa mesajul de succes dacă autentificarea corectă arată altfel un mesaj eșuat.

Pasul următor: Client – Configurați pagina de conectare și pagina de deconectare folosind React

Am construit componentele front-end folosind Reacţiona, și React Router pentru a configura link-uri.

1612049891 468 Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
Pagina de conectare și pagina de deconectare

Funcționalitate

Pagina conține un antet cu butonul principal și logare / deconectare. Inițial, pagina va afișa mesajul „bun venit” și butonul „autentificare”. Odată ce utilizatorul s-a autentificat prin autentificare twitter, acesta va afișa numele de utilizator și butonul „deconectare”.

Configurarea clientului

client|-- src|   |-- components|   |   |-- Header.jsx|   |   |-- Homepage.jsx|   |-- App.js|   |-- AppRouter.js|   |-- index.js|   |-- index.css|   |-- serviceWorker.js|-- package.json

Identificați componentele UI

1612049891 343 Cum se configureaza Twitter OAuth folosind Passportjs si ReactJS
Componentele UI
  • HomePage: un container care afișează informații de bun venit și de utilizator. Apeluri / auth / login / success punctul final. Dacă punctul final a reușit, informațiile utilizatorului vor fi stocate în utilizator obiect și starea de autentificat va fi setat Adevărat. Pagina arată un mesaj care „Vă autentificați cu succes”. Dacă punctul final a eșuat, utilizatorul nu este autentificat și fișierul pagina afișează „Bun venit”.
  • Antet: gestionează navigarea. Când utilizatorul este autentificat, „autentificare” va fi schimbată în „deconectare”. autentificat starea este transmisă din HomePage ca o prop.

Implementare

HomePage.jsx: un container care afișează informații de bun venit și de utilizator

Header.jsx – componentă de navigare

În cele din urmă, configurați ruta care navighează la HomePage în AppRouter.jsx și App.jsx

Vă mulțumesc mult pentru că ați citit această postare pe blog. Sper că ți s-a părut de ajutor.

Întregul proiect este disponibil pe Github: https://github.com/leannezhang/twitter-authentication

Dacă aveți comentarii sau feedback, vă rugăm să nu ezitați să comentați mai jos sau să mă contactați.

Twitter: @ liyangz

Materiale de lectură