OAuth 2.0 este un standard care permite aplicațiilor terțe să acceseze datele din aplicațiile web în siguranță. Îl puteți folosi pentru a prelua date, inclusiv informații despre profil, programe etc. care este găzduit în alte aplicații web precum Facebook, Google și GitHub. Un serviciu poate face acest lucru în numele unui utilizator fără a-și expune acreditările la aplicația terță parte.

Aflați cum să implementați OAuth într-o aplicație Express folosind GitHub ca furnizor OAuth în câțiva pași.

Fluxul OAuth

Într-un flux tipic OAuth, site-ul dvs. oferă utilizatorilor o opțiune de a se conecta cu contul lor terță parte de la un furnizor precum GitHub sau Facebook. Un utilizator poate începe acest proces făcând clic pe un buton de conectare OAuth relevant.

Acest lucru îi redirecționează de la aplicația dvs. către site-ul web al furnizorului OAuth și le prezintă un formular de consimțământ. Formularul de consimțământ conține toate informațiile pe care doriți să le accesați de la utilizator, care ar putea fi e-mailurile, pozele, programele, etc.

instagram viewer

Dacă utilizatorul vă autorizează aplicația, terțul îl va redirecționa înapoi către aplicația dvs. cu un cod. Aplicația dvs. poate schimba apoi codul primit cu un jeton de acces pe care îl poate folosi apoi pentru a accesa datele disponibile ale utilizatorului.

Implementarea acestui flux într-o aplicație Express implică câțiva pași.

Pasul 1: Configurarea mediului de dezvoltare

Mai întâi, creați un director de proiect gol și CD în directorul creat.

De exemplu:

mkdir github-app
CD github-app

Apoi, inițializați npm în proiectul dvs. rulând:

npm init -y

Această comandă creează un pachet.json fișier care conține detalii despre proiectul dvs., cum ar fi numele, versiunea etc.

Acest tutorial va prezenta utilizarea sistemului de module ES6. Configurați acest lucru deschizându-vă pachet.json fișier și specificând „tip": "modul" în obiectul JSON.

Pasul 2: Instalarea dependențelor

Va trebui să instalați câteva dependențe pentru ca serverul dvs. să funcționeze corect:

  • ExpressJS: ExpressJS este un cadru NodeJS care oferă un set robust de caracteristici pentru aplicații web și mobile. Utilizarea Express vă va simplifica procesul de creare a serverului.
  • Axios: Axios este un client HTTP bazat pe promisiuni. Veți avea nevoie de acest pachet pentru a face o solicitare POST pentru un token de acces la GitHub.
  • dotenv: dotenv este un pachet care încarcă variabile de mediu dintr-un fișier .env în obiectul process.env. Veți avea nevoie de el pentru a ascunde informații importante despre aplicația dvs.

Instalați-le rulând:

npm instalare exprima axios dotenv

Pasul 3: Crearea unei aplicații Express

Trebuie să creați un server Express de bază pentru a gestiona și a face cereri către furnizorul OAuth.

Mai întâi, creați un index.js fișier în directorul rădăcină al proiectului, care conține următoarele:

// index.js
import expres din "expres";
import axios din „axios”;
import * la fel de dotenv din „dotenv”;
dotenv.config();
const aplicație = expres();
const port = process.env. PORT || 3000
app.ascultă (port, () => {
consolă.Buturuga(`Aplicația rulează pe port ${port}`);
});

Acest cod importă biblioteca expres, instanțează o instanță expres și începe să asculte traficul pe port 3000.

Pasul 4: Crearea rutelor de gestionare

Va trebui să creați doi handlere de rută pentru a gestiona fluxul OAuth. Prima redirecționează utilizatorul către GitHub și solicită autorizare. Al doilea se ocupă de redirecționarea înapoi către aplicația dvs. și face cererea pentru simbolul de acces atunci când un utilizator vă autorizează aplicația.

Primul handler de rută ar trebui să redirecționeze utilizatorul către https://github.com/login/oauth/authorize? parametrii.

Va trebui să transmiteți un set de parametri necesari adresei URL OAuth a GitHub, care includ:

  • ID client: se referă la ID-ul pe care aplicația dvs. OAuth îl primește atunci când este înregistrată pe GitHub.
  • Domeniu de aplicare: se referă la un șir care specifică cantitatea de acces pe care o aplicație OAuth o are la informațiile unui utilizator. Puteți găsi o listă cu domeniile disponibile în Documentația OAuth a GitHub. Aici vei folosi un „citiți: utilizator”, care oferă acces pentru a citi datele de profil ale unui utilizator.

Adăugați următorul cod la dvs index.js fişier:

// index.js
app.get("/auth", (req, res) => {
// Stochează parametrii într-un obiect
const parametri = {
 domeniul de aplicare: "citiți: utilizator",
client_id: proces.env.CLIENT_ID,
 };
// Convertiți parametrii într-un șir codificat în URL
const urlEncodedParams = nou URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Acest cod implementează primul handler de rută. Stochează parametrii necesari într-un obiect, transformându-i într-un format codificat în URL folosind API-ul URLSearchParams. Apoi adaugă acești parametri la adresa URL OAuth a GitHub și redirecționează utilizatorul către pagina de consimțământ a GitHub.

Adăugați următorul cod la dvs index.js fișier pentru al doilea handler de rută:

// index.js
app.get("/github-callback", (req, res) => {
const { cod } = req.query;
const corp = {
client_id: proces.env.CLIENT_ID,
client_secret: proces.env.CLIENT_SECRET,
 cod,
 };


lăsa jeton de acces;
 const options = { antete: { accept: "aplicație/json" } };
axios
 .post("https://github.com/login/oauth/access_token", corp, opțiuni)
 .atunci((răspuns) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .captură((err) => res.status(500).json({ err: err.message }));
});

Al doilea handler de rută va extrage fișierul cod revenit de la GitHub în cerere.interogare obiect. Apoi face un POST cerere folosind Axios la " https://github.com/login/oauth/access_token" cu codul, client_id, și client_secret.

The client_secret este un șir privat pe care îl veți genera atunci când creați o aplicație OAuth GitHub. Cand jeton de acces este preluat cu succes, este salvat într-o variabilă pentru utilizare ulterioară. În cele din urmă, utilizatorul este redirecționat către aplicația dvs jeton de acces.

Pasul 5: Crearea unei aplicații GitHub

În continuare, va trebui să creați o aplicație OAuth pe GitHub.

Mai întâi, conectați-vă la contul dvs. GitHub, apoi accesați Setări, derulați în jos la Setări pentru dezvoltatori, și selectați Aplicații OAuth. În cele din urmă, faceți clic pe „Înregistrați o nouă aplicație.”

GitHub vă va oferi un nou formular de cerere OAuth, ca acesta:

Completați câmpurile obligatorii cu detaliile dorite. „Adresa URL a paginii de pornire" ar trebui să fie " http://localhost: 3000”. Ta "Adresa URL de returnare a autorizării" ar trebui să fie " http://localhost: 3000/github-callback”. De asemenea, puteți activa opțional fluxul dispozitivului, permițându-vă să autorizați utilizatorii pentru o aplicație fără cap, cum ar fi un instrument CLI sau manager de acreditări Git.

Fluxul dispozitivului este în versiune beta publică și poate fi modificat.

În cele din urmă, lovește Înregistrați aplicația buton.

GitHub vă va direcționa către o pagină cu dvs client_id și o opțiune de a genera client_secret. Copiați-vă client_id, generați-vă client_secretși copiați-l și pe acesta.

Creați un fișier .env și depozitați client_id și client_secret inauntru. Denumiți aceste variabile CLIENT_ID și, respectiv, CLIENT_SECRET.

Fluxul dvs. OAuth este acum complet și acum puteți face solicitări cu simbolul de acces pentru a citi datele utilizatorului ( domeniul de aplicare ai specificat mai devreme).

Importanța OAuth 2.0

Utilizarea OAuth 2.0 în aplicația dvs. simplifică foarte mult sarcina de implementare a unui flux de autentificare. Securizează datele utilizatorilor clienților tăi folosind standardul Secure Sockets Layer (SSL), asigurându-se că acestea rămân private.