Nem Google Auth til Node.js

5 enkle trin til at integrere med Google - kode inkluderet.

Mine øjne opsvulmede med tårer da jeg indså, at de sidste 10 timers kodning var for intet ... Passport.js havde givet mig, og verdens mennesker, et falskt håb.

Jeg er ikke sikker på, om du nogensinde har set koden inde i Passport.js-biblioteket, men der er ikke meget af den, og den er heller ikke særlig god. Det er dybest set en lille smule kode, der sikrer, at dine godkendelsesoplysninger placeres på det rigtige sted. Men den største ulempe ved dette er, at det dræber din fleksibilitet. Med pas skal du omdirigere dine tilbagekaldsanmodninger til en server. Hvis du ikke ved, hvad det betyder; dybest set suger det, hvis du opretter nogen anden app end en server-gengivet app (f.eks. en enkelt sides app eller SPA).

Men rol ikke! Her er en hurtig tutorial, der viser dig, hvordan du tilføjer Google Auth korrekt.

Før du kommer i gang ️

Denne tutorial antager, at du har:

  1. En god forståelse af JavaScript og Node.js
  2. Et program med en server

Fantastisk, lad os gå!

Trin 1: Installer afhængigheder 🖥

Bare en - det er på NPM, hvis du ikke allerede antog det.

  • googleapis

Det var let!

Trin 2: Konfigurer Google

Derefter skal du konfigurere biblioteket med dine legitimationsoplysninger, så Google ved, hvem der fremsætter anmodningerne.

For at få legitimationsoplysninger - hvis du ikke allerede har dem - skal du gå til din Google Console og oprette et nyt projekt. Når du har et nyt projekt, skal du anmode om nogle API-nøgler. Her er et godt link til mere hjælp til dette.

Fil: src / google-util.js

Ovenstående fil; importerer biblioteket, opretter et konfigurationsobjekt med vores detaljer og tilføjer en funktion, der opretter forbindelse til Google, når vi ønsker det.

Trin 3: Hent Google Login URL

Hvorfor har vi brug for dette?… Nå, for at vi kan logge nogen på Google, er vi nødt til at sende dem til Google-login-siden. Herfra logger de på deres konto, og derefter omdirigeres de til vores app med deres login-detaljer.

Fil: src / google-util.js

Ovenstående kode gør et par ting; det bestemmer hvilke oplysninger og tilladelser, vi ønsker fra brugeren, når de logger på, og det opretter en funktion, vi vil bruge til at generere URL'en. Endelig opretter vi en funktion, der genererer en URL, som du bliver nødt til at sende til klienten.

Trin 4: Din tur - omdiriger dine brugere til Google URL

Dette trin kræver, at du sender dine brugere til den URL, vi lige har oprettet. I min app genererer jeg URL'en i API'en og sender den til min frontend, hvor jeg gør det til href-adressen på en knap, f.eks.

 Log ind med Google 

Dette fører brugeren til login-siden.

Fejlfinding: Hvis du kommer til en side, der fortæller dig, at du ikke har adgang (eller noget lignende), kan det betyde, at du ikke korrekt har konfigureret dine Google-projektoplysninger. Sørg for, at du korrekt konfigurerer dem i din Google Console.

Trin 5: Gem login-oplysningerne

Forhåbentlig ville du have været i stand til at logge ind på din Google-konto, og Google ville have omdirigeret dig tilbage til din app (eller den omdirigeringsadresse, du har sagt, at den skulle gå til). Nu skal vi bare sørge for, at den konto, de loggede på, matcher en bruger i vores database (eller oprette en).

For at gøre dette har Google givet os en parameter på omdirigeringsadressen kaldet "kode". Du vil se dette som:

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

Du skal udpakke denne "kode" -parameter og give den tilbage til Google api-biblioteket for at kontrollere, hvem den loggede bruger er. Her er en god NPM-pakke, der kan hjælpe dig med at udpakke parameteren, men det betyder ikke noget, hvordan du gør dette.

Når du har "kode" -parameteren, og du har sendt den til din server, kan vi få brugerens e-mail og id til at bruge i vores app.

Fil: src / google-util.js

Nu skal du bare tjekke e-mail eller id på din database og logge brugeren på eller tilmelde dem - det er op til dig!

Fuld version

Her er en fuld version af koden uden alle kommentarer. Brug dette til en god oversigt. Hvis du sidder fast, skal du kontrollere eksemplerne ovenfor med forklaringer.

Yahoooo !!

Din app understøtter nu Google. For at få adgang til flere af Googles API'er skal du blot tilføje dem til dit "scopes" array, og når brugeren går til at logge ind, bliver de bedt om at give dig adgang til disse data, f.eks. Google Kalender-data.

Hvis du nød denne artikel, skal du give den et par klapper (du kan give op til 50) eller du kan kommentere, hvis du har spørgsmål, jeg vil gøre mit bedste for at svare!

Følg mig på Twitter.

Tak!

Artikel oprettet af stifterne af Authenticator - Enkel og hurtig autorisation til din app.

Flere indlæg af Jack Scott.

  • Hvordan jeg lancerede en opstart om 4 dage
  • Byg en komplet GraphQL Server med Node.js
  • Farvel Redux