OAuth 2.0 standard je koji aplikacijama trećih strana omogućuje siguran pristup podacima iz web-aplikacija. Možete ga koristiti za dohvaćanje podataka uključujući informacije o profilu, rasporede itd. koji se nalazi na drugim web aplikacijama kao što su Facebook, Google i GitHub. Usluga to može učiniti u ime korisnika bez izlaganja njihovih vjerodajnica aplikaciji treće strane.
Naučite kako implementirati OAuth u Express aplikaciji koristeći GitHub kao OAuth davatelja u nekoliko koraka.
OAuth tijek
U tipičnom tijeku OAuth-a, vaša web-lokacija pruža opciju korisnicima da se prijave sa svojim računom treće strane od pružatelja usluga kao što su GitHub ili Facebook. Korisnik može započeti ovaj proces klikom na odgovarajući gumb za prijavu na OAuth.
Ovo ih preusmjerava s vaše aplikacije na web mjesto pružatelja OAutha i predstavlja im obrazac pristanka. Obrazac pristanka sadrži sve podatke kojima želite pristupiti od korisnika, a to mogu biti njegova e-pošta, slike, rasporedi itd.
Ako korisnik autorizira vašu aplikaciju, treća strana će ih preusmjeriti natrag na vašu aplikaciju pomoću koda. Vaša aplikacija zatim može zamijeniti primljeni kod za pristupni token koji zatim može koristiti za pristup dostupnim korisničkim podacima.
Implementacija ovog toka u Express aplikaciji uključuje nekoliko koraka.
Korak 1: Postavljanje razvojnog okruženja
Prvo stvorite prazan direktorij projekta i CD u kreirani imenik.
Na primjer:
mkdir github-aplikacija
CD github-aplikacija
Zatim inicijalizirajte npm u svom projektu pokretanjem:
npm init -y
Ova naredba stvara a paket.json datoteka koja sadrži detalje o vašem projektu kao što su naziv, verzija itd.
Ovaj vodič će prikazati korištenje ES6 modulskog sustava. Postavite ovo otvaranjem svog paket.json datoteka i navođenje "tip": "modul" u JSON objektu.
Korak 2: Instaliranje ovisnosti
Morat ćete instalirati nekoliko ovisnosti kako bi vaš poslužitelj ispravno radio:
- ExpressJS: ExpressJS je okvir NodeJS koji pruža robustan skup značajki za web i mobilne aplikacije. Korištenje Expressa pojednostavit će vaš proces stvaranja poslužitelja.
- Axios: Axios je HTTP klijent temeljen na obećanjima. Trebat će vam ovaj paket da napravite POST zahtjev za pristupni token GitHubu.
- dotenv: dotenv je paket koji učitava varijable okruženja iz .env datoteke u process.env objekt. Trebat će vam da sakrijete važne informacije o vašoj prijavi.
Instalirajte ih pokretanjem:
npm instalirati izraziti axios dotenv
Korak 3: Izrada Express aplikacije
Trebaš stvoriti osnovni Express poslužitelj za obradu i slanje zahtjeva OAuth davatelju.
Najprije izradite index.js datoteku u korijenskom direktoriju vašeg projekta koja sadrži sljedeće:
// index.js
uvoz izraziti iz "izraziti";
uvoz axios iz "aksios";
uvoz * kao dotenv iz "dotenv";
dotenv.config();konst app = express();
konst luka = proces.env. LUKA || 3000
app.listen (port, () => {
konzola.log(`Aplikacija radi na priključku ${port}`);
});
Ovaj kod uvozi ekspresnu biblioteku, instancira ekspresnu instancu i počinje osluškivati promet na portu 3000.
Korak 4: Stvaranje rukovatelja rutom
Morat ćete izraditi dva rukovatelja rutom za rukovanje OAuth protokom. Prvi preusmjerava korisnika na GitHub i traži autorizaciju. Drugi upravlja preusmjeravanjem natrag na vašu aplikaciju i postavlja zahtjev za pristupni token kada korisnik autorizira vašu aplikaciju.
Prvi rukovatelj rutom trebao bi preusmjeriti korisnika na https://github.com/login/oauth/authorize? parametri.
Morat ćete proslijediti skup potrebnih parametara na GitHubov OAuth URL, koji uključuju:
- ID klijenta: ovo se odnosi na ID koji vaša OAuth aplikacija prima kada se registrira na GitHub.
- Opseg: ovo se odnosi na niz koji navodi količinu pristupa koju OAuth aplikacija ima korisnikovim informacijama. Popis dostupnih opsega možete pronaći u GitHubova OAuth dokumentacija. Ovdje ćete koristiti "čitaj: korisnik”, koji daje pristup čitanju podataka profila korisnika.
Dodajte sljedeći kôd svom index.js datoteka:
// index.js
app.get("/auth", (req, res) => {
// Pohranjivanje parametara u objekt
konst parametri = {
opseg: "čitaj: korisnik",
client_id: postupak.env.ID_KLIJENTA,
};
// Pretvori parametre u URL kodirani niz
konst urlEncodedParams = novi URLSearchParams (params).toString();
res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Ovaj kod implementira prvi rukovatelj rutom. Pohranjuje tražene parametre u objektu, pretvarajući ih u URL-kodirani format pomoću API-ja URLSearchParams. Zatim dodaje ove parametre u GitHubov OAuth URL i preusmjerava korisnika na GitHubovu stranicu pristanka.
Dodajte sljedeći kôd svom index.js datoteka za drugi rukovatelj rutom:
// index.js
app.get("/github-callback", (req, res) => {
konst { kod } = req.query;konst tijelo = {
client_id: postupak.env.ID_KLIJENTA,
klijent_tajna: postupak.env.KLIJENT_TAJNA,
kodirati,
};neka accessToken;
opcije const = { zaglavlja: { prihvati: "aplikacija/json" } };
axios
.post("https://github.com/login/oauth/access_token", tijelo, opcije)
.then((odgovor) => response.data.access_token)
.then((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.ulov((pogreška) => res.status(500).json({ err: err.poruka }));
});
Drugi rukovatelj rutom izdvojit će kodirati vratio s GitHuba u req.upit objekt. Zatim pravi POST zahtjev pomoću Axios za " https://github.com/login/oauth/access_token" s kodom, client_id, i klijent_tajna.
The klijent_tajna je privatni niz koji ćete generirati kada izradite GitHub OAuth aplikaciju. Kada access_token je uspješno dohvaćen, sprema se u varijablu za kasniju upotrebu. Korisnik je konačno preusmjeren na vašu aplikaciju s access_token.
Korak 5: Stvaranje GitHub aplikacije
Zatim ćete morati izraditi OAuth aplikaciju na GitHubu.
Prvo se prijavite na svoj GitHub račun, a zatim idite na postavke, pomaknite se prema dolje do Postavke programerai odaberite OAuth aplikacije. Na kraju kliknite na "Registrirajte novu prijavu.”
GitHub će vam pružiti novi OAuth prijavni obrazac poput ovog:
Ispunite potrebna polja željenim detaljima. "URL početne stranice" trebalo bi " http://localhost: 3000”. Vaš “URL povratnog poziva autorizacije" trebalo bi " http://localhost: 3000/github-povratni poziv”. Također možete izborno omogućiti tijek uređaja, omogućujući vam da autorizirate korisnike za aplikaciju bez glave, kao što je CLI alat ili upravitelj vjerodajnica Git.
Tijek uređaja je u javnoj beta verziji i podložan je promjenama.
Na kraju, pritisnite Registriraj prijavu dugme.
GitHub će vas uputiti na stranicu s vašim client_id i mogućnost generiranja vašeg klijent_tajna. Kopiraj svoje client_id, generirajte svoje klijent_tajna, i također ga kopirajte.
Stvorite .env datoteku i pohraniti client_id i klijent_tajna unutar. Imenujte ove varijable CLIENT_ID i CLIENT_SECRET.
Vaš OAuth tijek je sada dovršen i sada možete postavljati zahtjeve s pristupnim tokenom za čitanje korisničkih podataka ( djelokrug ranije ste naveli).
Važnost OAutha 2.0
Korištenje OAutha 2.0 u vašoj aplikaciji uvelike pojednostavljuje zadatak implementacije tijeka provjere autentičnosti. Štiti korisničke podatke vaših klijenata pomoću standarda Secure Sockets Layer (SSL), osiguravajući da ostanu privatni.
