Egyszerű Google Auth a Node.js számára

5 Egyszerű lépés a Google-hoz való integrációhoz - mellékelve a kódot.

A szemem könnyekkel duzzadt , amikor rájöttem, hogy a kódolás utolsó 10 órája hiábavaló. A Passport.js hamis reményt adott nekem, és a világ embereinek.

Nem vagyok benne biztos, hogy megnézték-e valaha a Passport.js könyvtár belsejében található kódot, de nincs nagyon sok, és az sem nagyon jó. Alapvetően egy kicsit olyan kód, amely biztosítja, hogy a hitelesítési adatok a megfelelő helyre kerüljenek. Ennek legfontosabb hátránya azonban, hogy megöli a rugalmasságot. Az útlevél használatával visszahívási kérelmeit átirányítania kell egy szerverre. Ha nem tudod, mit jelent ez; alapvetően akkor szar, ha bármilyen alkalmazást hoz létre, kivéve a kiszolgáló által nyújtott alkalmazást (például egyoldalas alkalmazást vagy SPA-t).

De ne aggódj! Itt található egy gyors bemutató, amely megmutatja, hogyan kell megfelelően hozzáadni a Google Auth-t.

Mielőtt elkezdené ️

Ez az oktatóprogram feltételezi, hogy van:

  1. A JavaScript és a Node.js jó megértése
  2. Alkalmazás szerverrel

Félelmetes, menjünk!

1. lépés: Telepítse a függőségeket 🖥

Csak egy - az NPM-en van, ha ezt még nem feltételezted.

  • googleapis

Az könnyű volt!

2. lépés: A Google konfigurálása

Ezután be kell állítania a könyvtárat a hitelesítő adataival, hogy a Google tudja, ki készíti a kérelmeket.

Hitelesítő adatok beszerzéséhez - ha még nem rendelkezik ilyenekkel - lépjen a Google Konzolba, és hozzon létre egy új projektet. Ha új projektje van, kérjen néhány API-kulcsot. Itt található egy jó link a további segítségre.

Fájl: src / google-util.js

A fenti fájl; importálja a könyvtárat, létrehoz egy konfigurációs objektumot az adatainkkal, és hozzáad egy olyan funkciót, amely kapcsolódik a Google-hoz, amikor azt akarjuk.

3. lépés: Szerezze be a Google bejelentkezési URL-jét

Miért van szükség erre?… Nos, ahhoz, hogy valaki bejelentkezzen a Google-ba, el kell küldenünk őket a Google bejelentkezési oldalára. Innentől be fognak jelentkezni a fiókjába, majd átirányítják az alkalmazásunkba a bejelentkezés részleteivel.

Fájl: src / google-util.js

A fenti kód néhány dolgot tesz; meghatározza, hogy milyen információkat és engedélyeket kérünk a felhasználótól, amikor bejelentkeznek, és létrehoz egy olyan funkciót, amelyet az URL létrehozására használunk. Végül létrehozunk egy olyan funkciót, amely létrehoz egy URL-t, amelyet el kell küldenie az ügyfélnek.

4. lépés: A sorod - átirányítsa felhasználóit a Google URL-re

Ehhez a lépéshez el kell küldenie a felhasználókat az általunk létrehozott URL-re. Alkalmazásomban előállítom az URL-t az API-ban, és elküldöm a felhasználói felületemre, ahol egy gomb href-címé teszem, pl.

 Bejelentkezés a Google-lal 

Ez a felhasználót a bejelentkezési oldalra viszi.

Hibaelhárítás: ha olyan oldalra jön, amelyen azt mondják, hogy nem rendelkezik hozzáféréssel (vagy valami hasonlóval), ez azt jelentheti, hogy nem konfigurálta helyesen a Google projekt hitelesítő adatait. Győződjön meg arról, hogy helyesen állította be őket a Google Konzolban.

5. lépés: A bejelentkezés részleteinek mentése

Remélhetőleg be tudott volna jelentkezni a Google-fiókjába, és a Google visszahívta volna az alkalmazásába (vagy az átirányítási címre, amelyre megmondta, hogy megy). Most csak annyit kell tennünk, hogy ellenőrizzük, hogy a bejelentkezett fiók megegyezik-e az adatbázisunkban lévő felhasználóval (vagy hozzon létre egyet).

Ehhez a Google megadott egy paramétert az átirányítási címen, amelyet „kódnak” hívtunk. Ezt úgy látja:

https://yourwebsite.com/callback?code=a-bunch-of-random-characters

Ki kell vonnia ezt a „kód” paramétert, és vissza kell adnia a Google API könyvtárhoz, hogy ellenőrizze, ki a bejelentkezett felhasználó. Itt van egy jó NPM csomag, amely segíthet a paraméter kibontásában, de nem számít, hogyan csinálja ezt.

Miután megkapta a „code” paramétert, és elküldte azt a szerverére, megkaphatjuk a felhasználó e-mail címét és azonosítóját az alkalmazásunkban való felhasználáshoz.

Fájl: src / google-util.js

Most csak annyit kell tennie, hogy ellenőrizze az e-mailt vagy az azonosítót az adatbázisával, és jelentkezzen be a felhasználóba, vagy regisztrálja őket - rajtad múlik!

Teljes verzió

Itt található a kód teljes verziója, az összes megjegyzés nélkül. Használja ezt a jó áttekintést. Ha elakad, ellenőrizze a fenti példákat magyarázatokkal.

Yahoooo !!

Az alkalmazás most támogatja a Google-t. A további Google API-khoz való hozzáféréshez egyszerűen vegye fel őket a „hatókörök” tömbbe, és amikor a felhasználó bejelentkezik, a rendszer felkéri őket, hogy hozzáférjenek ezekhez az adatokhoz, pl. A Google Naptár adatai.

Ha tetszett ez a cikk, kérlek, adj neki néhány tapsot (akár 50 is elhagyhat), vagy kérdése van, ha bármilyen kérdése van, megteszem a legjobb válaszomat!

Kövess a Twitteren.

Kösz!

Az Authenticator alapítói által létrehozott cikk - Egyszerű és gyors hitelesítés az alkalmazásához.

Jack Scott további hozzászólásai.

  • Hogyan indítottam el indulást 4 nap alatt
  • Hozzon létre egy teljes GraphQL szervert a Node.js segítségével
  • Viszlát Redux