OAuth 2.0 je standard, ki aplikacijam tretjih oseb omogoča varen dostop do podatkov iz spletnih aplikacij. Uporabite ga lahko za pridobivanje podatkov, vključno s podatki o profilu, urniki itd. ki gostuje v drugih spletnih aplikacijah, kot so Facebook, Google in GitHub. Storitev lahko to stori v imenu uporabnika, ne da bi njihove poverilnice izpostavila aplikaciji tretje osebe.

Naučite se implementirati OAuth v aplikacijo Express z uporabo GitHub kot ponudnika OAuth v nekaj korakih.

Tok OAuth

V običajnem toku OAuth vaše spletno mesto ponuja možnost, da se uporabniki prijavijo s svojim računom tretje osebe pri ponudniku, kot sta GitHub ali Facebook. Uporabnik lahko začne ta postopek s klikom ustreznega gumba za prijavo OAuth.

To jih preusmeri iz vaše aplikacije na spletno mesto ponudnika OAuth in jim predstavi obrazec za soglasje. Obrazec za soglasje vsebuje vse podatke, do katerih želite dostopati od uporabnika, kar so lahko njegova e-pošta, slike, urniki itd.

Če uporabnik avtorizira vašo aplikacijo, ga bo tretja oseba s kodo preusmerila nazaj na vašo aplikacijo. Vaša aplikacija lahko nato zamenja prejeto kodo za dostopni žeton, ki ga lahko nato uporabi za dostop do razpoložljivih uporabniških podatkov.

Implementacija tega toka v aplikaciji Express vključuje nekaj korakov.

1. korak: Nastavitev razvojnega okolja

Najprej ustvarite prazen imenik projekta in cd v ustvarjeni imenik.

Na primer:

mkdir github-aplikacija
cd github-aplikacija

Nato inicializirajte npm v svojem projektu tako, da zaženete:

npm init -y

Ta ukaz ustvari a package.json datoteka, ki vsebuje podrobnosti o vašem projektu, kot so ime, različica itd.

Ta vadnica bo predstavila uporabo sistema modulov ES6. To nastavite tako, da odprete svoj package.json datoteko in navedbo "tip": "modul" v objektu JSON.

2. korak: Namestitev odvisnosti

Za pravilno delovanje strežnika boste morali namestiti nekaj odvisnosti:

  • ExpressJS: ExpressJS je ogrodje NodeJS, ki zagotavlja robusten nabor funkcij za spletne in mobilne aplikacije. Uporaba Expressa bo poenostavila vaš postopek ustvarjanja strežnika.
  • Axios: Axios je odjemalec HTTP, ki temelji na obljubah. Ta paket boste potrebovali za izdelavo zahteve POST za žeton za dostop do GitHub.
  • dotenv: dotenv je paket, ki naloži spremenljivke okolja iz datoteke .env v objekt process.env. Potrebovali ga boste za skrivanje pomembnih informacij o vaši aplikaciji.

Namestite jih tako, da zaženete:

npm namestite izražati axios dotenv

3. korak: Ustvarjanje hitre aplikacije

Moraš ustvarite osnovni strežnik Express za obdelavo in pošiljanje zahtev ponudniku OAuth.

Najprej ustvarite index.js datoteko v korenskem imeniku vašega projekta, ki vsebuje naslednje:

// index.js
uvoz ekspresno od "ekspresno";
uvoz axios od "aksios";
uvoz * kot dotenv od "dotenv";
dotenv.config();
konst app = express();
konst vrata = proces.env. PRISTANIŠČE || 3000
app.listen (vrata, () => {
konzola.log(`Aplikacija se izvaja na vratih ${port}`);
});

Ta koda uvozi ekspresno knjižnico, ustvari ekspresni primerek in začne poslušati promet na vratih 3000.

4. korak: Ustvarjanje upravljavcev poti

Za upravljanje toka OAuth boste morali ustvariti dva upravljalnika poti. Prvi uporabnika preusmeri na GitHub in zahteva avtorizacijo. Drugi obravnava preusmeritev nazaj v vašo aplikacijo in zahteva žeton za dostop, ko uporabnik avtorizira vašo aplikacijo.

Prvi upravljavec poti bi moral uporabnika preusmeriti na https://github.com/login/oauth/authorize? parametri.

URL-ju OAuth za GitHub boste morali posredovati niz zahtevanih parametrov, ki vključujejo:

  • ID odjemalca: To se nanaša na ID, ki ga vaša aplikacija OAuth prejme, ko se registrira na GitHub.
  • Obseg: To se nanaša na niz, ki določa količino dostopa, ki ga ima aplikacija OAuth do uporabnikovih podatkov. Seznam razpoložljivih obsegov najdete v GitHubova dokumentacija OAuth. Tukaj boste uporabljali "beri: uporabnik”, ki omogoča dostop do branja podatkov uporabnikovega profila.

Svoji dodajte naslednjo kodo index.js mapa:

// index.js
app.get("/auth", (req, res) => {
// Shranjevanje parametrov v objekt
konst params = {
 Obseg: "beri: uporabnik",
client_id: postopek.env.CLIENT_ID,
 };
// Pretvori parametre v URL kodiran niz
konst urlEncodedParams = novo URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Ta koda implementira prvi upravljalnik poti. Zahtevane parametre shrani v objekt in jih pretvori v URL-kodirano obliko z API-jem URLSearchParams. Te parametre nato doda URL-ju OAuth za GitHub in uporabnika preusmeri na stran za soglasje GitHub.

Svoji dodajte naslednjo kodo index.js datoteka za drugega upravljalnika poti:

// index.js
app.get("/github-callback", (req, res) => {
konst { koda } = req.query;
konst telo = {
client_id: postopek.env.CLIENT_ID,
odjemalska_skrivnost: postopek.env.CLIENT_SECRET,
 Koda,
 };


pustiti dostopni žeton;
 const options = { headers: { accept: "aplikacija/json" } };
axios
 .post("https://github.com/login/oauth/access_token", telo, možnosti)
 .then((odgovor) => response.data.access_token)
 .then((žeton) => {
 accessToken = žeton;
 res.redirect(`/?token=${token}`);
 })
 .ulov((napaka) => res.status(500).json({ err: err.message }));
});

Drugi upravljavec poti bo izvlekel Koda vrnil iz GitHub v req.query predmet. Nato naredi POST zahteva uporabo Axios za " https://github.com/login/oauth/access_token" s kodo, client_id, in odjemalska_skrivnost.

The odjemalska_skrivnost je zasebni niz, ki ga boste ustvarili, ko ustvarite aplikacijo GitHub OAuth. Ko dostopni žeton je uspešno pridobljen, se shrani v spremenljivko za kasnejšo uporabo. Uporabnik je končno preusmerjen na vašo aplikacijo z dostopni žeton.

5. korak: Ustvarjanje aplikacije GitHub

Nato boste morali ustvariti aplikacijo OAuth na GitHubu.

Najprej se prijavite v svoj račun GitHub, nato pojdite na nastavitve, pomaknite se navzdol do Nastavitve razvijalcain izberite Aplikacije OAuth. Na koncu kliknite »Registrirajte novo aplikacijo.”

GitHub vam bo ponudil nov prijavni obrazec OAuth, kot je ta:

Izpolnite zahtevana polja z želenimi podatki. "URL domače strani" moral bi biti " http://localhost: 3000”. Vaš “URL za povratni klic avtorizacije" moral bi biti " http://localhost: 3000/github-povratni klic”. Izbirno lahko omogočite tudi pretok naprave, kar vam omogoča avtorizacijo uporabnikov za aplikacijo brez glave, kot je npr orodje CLI ali upravitelja poverilnic Git.

Tok naprave je v javni različici beta in se lahko spremeni.

Končno pritisnite Registrirajte aplikacijo gumb.

GitHub vas bo usmeril na stran z vašim client_id in možnost ustvarjanja vašega odjemalska_skrivnost. Kopirajte svoje client_id, ustvarite svoje odjemalska_skrivnost, in ga tudi kopirajte.

Ustvarite datoteko .env in shranite client_id in odjemalska_skrivnost znotraj njega. Poimenujte te spremenljivke CLIENT_ID oziroma CLIENT_SECRET.

Vaš tok OAuth je zdaj končan in zdaj lahko podajate zahteve z žetonom za dostop za branje uporabniških podatkov ( Obseg ste navedli prej).

Pomen OAuth 2.0

Uporaba OAuth 2.0 v vaši aplikaciji močno poenostavi nalogo izvajanja toka preverjanja pristnosti. Varuje uporabniške podatke vaših strank s standardom Secure Sockets Layer (SSL), s čimer zagotavlja, da ostanejo zasebni.