OAuth 2.0 on standard, mis võimaldab kolmandate osapoolte rakendustel veebirakenduste andmetele turvaliselt juurde pääseda. Saate seda kasutada andmete, sealhulgas profiiliteabe, ajakavade jms toomiseks. mida majutatakse teistes veebirakendustes, nagu Facebook, Google ja GitHub. Teenus saab seda teha kasutaja nimel, avaldamata tema mandaate kolmanda osapoole rakendusele.

Siit saate teada, kuidas OAuthi mõne sammuga rakendada Expressi rakenduses, kasutades GitHubi OAuthi pakkujana.

OAuthi voog

Tavalise OAuthi voo korral pakub teie sait kasutajatele võimalust logida sisse oma kolmanda osapoole kontoga teenusepakkujalt, nagu GitHub või Facebook. Kasutaja saab seda protsessi alustada, klõpsates vastaval OAuthi sisselogimisnupul.

See suunab nad teie rakendusest ümber OAuthi pakkuja veebisaidile ja esitab neile nõusolekuvormi. Nõusoleku vorm sisaldab kogu teavet, millele soovite kasutajalt juurde pääseda, milleks võivad olla tema meilid, pildid, ajakavad jne.

Kui kasutaja volitab teie rakendust, suunab kolmas osapool nad koodiga teie rakendusse tagasi. Teie rakendus saab seejärel vahetada vastuvõetud koodi juurdepääsuloa vastu, mida saab seejärel kasutada saadaolevatele kasutajaandmetele juurde pääsemiseks.

Selle voo rakendamine Expressi rakenduses hõlmab mõnda sammu.

1. samm: arenduskeskkonna seadistamine

Esiteks looge tühi projektikataloog ja cd loodud kataloogi.

Näiteks:

mkdir github-app
cd github-rakendus

Järgmisena lähtestage npm oma projektis, käivitades:

npm init -y

See käsk loob a package.json fail, mis sisaldab teie projekti üksikasju, nagu nimi, versioon jne.

Selles õpetuses käsitletakse ES6 moodulisüsteemi kasutamist. Seadistage see, avades oma package.json faili ja täpsustades "tüüp": "moodul" JSON-objektis.

2. samm: sõltuvuste installimine

Serveri nõuetekohaseks tööks peate installima mõned sõltuvused.

  • ExpressJS: ExpressJS on NodeJS-i raamistik, mis pakub veebi- ja mobiilirakenduste jaoks tugevat funktsioonide komplekti. Expressi kasutamine lihtsustab teie serveri loomise protsessi.
  • Axios: Axios on lubaduspõhine HTTP-klient. Vajate seda paketti GitHubile juurdepääsuloa POST-i päringu tegemiseks.
  • dotenv: dotenv on pakett, mis laadib keskkonnamuutujad .env-failist protsessi.env objekti. Teil on seda vaja rakenduse kohta olulise teabe peitmiseks.

Installige need, käivitades:

npm installida väljendada axios dotenv

3. samm: Expressi rakenduse loomine

Sa pead luua põhiline Expressi server OAuthi pakkujale taotluste haldamiseks ja esitamiseks.

Esiteks looge an index.js faili oma projekti juurkataloogis, mis sisaldab järgmist:

// index.js
importida väljendada alates "ekspress";
importida aksiosid alates "aksios";
importida * nagu dotenv alates "dotenv";
dotenv.config();

konst rakendus = express();
konst port = protsess.env. PORT || 3000

app.listen (port, () => {
konsool.log(`Rakendus töötab pordis ${port}`);
});

See kood impordib kiirteegi, loob kiireksemplari ja hakkab pordi liiklust kuulama 3000.

4. samm: marsruudihaldurite loomine

OAuthi voo haldamiseks peate looma kaks marsruudi töötlejat. Esimene suunab kasutaja GitHubisse ja taotleb autoriseerimist. Teine tegeleb teie rakendusse tagasisuunamisega ja taotleb juurdepääsuluba, kui kasutaja teie rakenduse volitab.

Esimene marsruudihaldur peaks kasutaja ümber suunama https://github.com/login/oauth/authorize? parameetrid.

Peate GitHubi OAuthi URL-ile edastama nõutavate parameetrite komplekti, mis hõlmavad järgmist:

  • Kliendi ID: see viitab ID-le, mille teie OAuthi rakendus saab GitHubis registreerumisel.
  • Ulatus: see viitab stringile, mis määrab OAuthi rakenduse juurdepääsu ulatuse kasutaja teabele. Saadaolevate ulatuste loendi leiate aadressilt GitHubi OAuthi dokumentatsioon. Siin kasutate "loe: kasutaja” ulatus, mis annab juurdepääsu kasutaja profiiliandmete lugemiseks.

Lisage omale järgmine kood index.js fail:

// index.js
app.get("/auth", (req, res) => {
// Parameetrite salvestamine objektis
konst params = {
ulatus: "loe: kasutaja",
kliendi_id: protsessi.env.CLIENT_ID,
};

// Teisendage parameetrid URL-iga kodeeritud stringiks
konst urlEncodedParams = uus URLSearchParams (params).toString();
res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

See kood rakendab esimest marsruudi käitlejat. See salvestab vajalikud parameetrid objekti, teisendades need URL-i kodeeritud vormingusse URLSearchParams API abil. Seejärel lisab see need parameetrid GitHubi OAuthi URL-ile ja suunab kasutaja GitHubi nõusolekulehele.

Lisage omale järgmine kood index.js teise marsruudihalduri fail:

// index.js
app.get("/github-callback", (req, res) => {
konst { kood } = req.query;

konst keha = {
kliendi_id: protsessi.env.CLIENT_ID,
kliendi_saladus: protsessi.env.CLIENT_SECRET,
kood,
};

lase accessToken;
const options = { headers: { aktsepteeri: "rakendus/json" } };

aksiosid
.post("https://github.com/login/oauth/access_token", keha, valikud)
.then((vastus) => response.data.access_token)
.then((märk) => {
accessToken = tunnus;
res.redirect(`/?märk=${token}`);
})
.püüda((err) => res.status(500).json({ err: err.message }));
});

Teine marsruudi töötleja ekstraktib kood aastal GitHubist tagasi req.query objektiks. Seejärel teeb see POSTITUSE taotleda kasutades Axios et " https://github.com/login/oauth/access_token" koodiga, kliendi_id, ja kliendi_saladus.

The kliendi_saladus on privaatne string, mille genereerite GitHubi OAuthi rakenduse loomisel. Kui juurdepääsu_märk laadimine õnnestus, salvestatakse see hilisemaks kasutamiseks muutujasse. Lõpuks suunatakse kasutaja teie rakenduse juurde koos juurdepääsu_märk.

5. samm: GitHubi rakenduse loomine

Järgmisena peate GitHubis looma OAuthi rakenduse.

Esmalt logige sisse oma GitHubi kontole ja seejärel minge aadressile Seaded, kerige alla kuni Arendaja seadedja valige OAuthi rakendused. Lõpuks klõpsake "Registreerige uus taotlus.”

GitHub annab teile sellise uue OAuthi taotlusvormi:

Täitke nõutud väljad soovitud üksikasjadega. "Avalehe URL" peaks olema " http://localhost: 3000”. Sinu "Autoriseerimise tagasihelistamise URL" peaks olema " http://localhost: 3000/github-tagasihelistamine”. Samuti saate valikuliselt lubada seadme voo, mis võimaldab teil volitada kasutajaid peata rakenduse jaoks, näiteks CLI tööriist või Giti mandaadihaldur.

Seadme voog on avalikus beetaversioonis ja võib muutuda.

Lõpuks vajutage nuppu Registreeri taotlus nuppu.

GitHub suunab teid teiega lehele kliendi_id ja võimalus luua oma kliendi_saladus. Kopeerige oma kliendi_id, looge oma kliendi_saladusja kopeerige see ka.

Looge .env-fail ja salvestada kliendi_id ja kliendi_saladus selle sees. Nimetage need muutujad vastavalt CLIENT_ID ja CLIENT_SECRET.

Teie OAuthi voog on nüüd lõpule viidud ja saate nüüd teha juurdepääsuloaga taotlusi kasutajaandmete lugemiseks ( ulatus täpsustasite varem).

OAuth 2.0 tähtsus

OAuth 2.0 kasutamine rakenduses lihtsustab oluliselt autentimisvoo juurutamist. See kaitseb teie klientide kasutajaandmeid, kasutades Secure Sockets Layer (SSL) standardit, tagades nende privaatsuse.