Google Auth senzill per a Node.js

Inclou 5 passos senzills per integrar amb el codi de Google.

Els meus ulls es van omplir de llàgrimes, quan em vaig adonar que les últimes 10 hores de codificació havien estat gratuïtes ... Passport.js ens havia donat falsa esperança a mi i a la gent d’aquest món.

No estic segur de si alguna vegada heu llegit el codi a la biblioteca Passport.js, però no n'hi ha massa, i tampoc és molt bo. Bàsicament és una mica de codi que assegura que la informació d’autenticació es col·loqui al lloc adequat. El principal desavantatge, però, és que la vostra flexibilitat es ressent. Amb Passport, heu de redirigir les vostres sol·licituds de devolució de trucada a un servidor. Si no sabeu què vol dir això, bàsicament és una pena si creeu un tipus d’aplicació diferent a una aplicació representada per un servidor (per exemple, una aplicació d’una sola pàgina o un SPA).

Però no us preocupeu! Aquest tutorial ràpid us mostrarà com afegir correctament Google Auth.

Abans de començar ️

Aquest tutorial suposa que teniu:

  1. Una bona comprensió de JavaScript i Node.js
  2. Una aplicació amb un servidor

Genial, anem-hi!

Pas 1: instal·leu dependències 🖥

Només un: depèn del NPM, si encara no ho heu endevinat.

  • googleapis

Va ser fàcil!

Pas 2: configureu Google

A continuació, haureu de configurar la biblioteca amb les vostres credencials perquè Google sàpiga qui fa les sol·licituds.

Per obtenir credencials, aneu a la consola de Google i creeu un projecte nou. Quan tingueu un projecte nou, sol·liciteu algunes claus d'API. Aquí teniu un bon enllaç per obtenir més ajuda.

Fitxer: src / google-util.js

El fitxer anterior; importa la biblioteca, crea un objecte de configuració amb les nostres dades i afegeix una funció que es connecta a google si així ho desitgem.

Pas 3: obteniu l'URL d'inici de sessió de Google

Per què ho necessitem? ... Per tal de registrar algú a Google, hem d'enviar-lo a la pàgina d'inici de sessió de Google. A partir d’aquí accediu al vostre compte i, a continuació, se us reenviarà a la nostra aplicació amb les vostres dades d’inici de sessió.

Fitxer: src / google-util.js

El codi anterior fa un parell de coses; Això determinarà quina informació i permisos necessitarà l’usuari en iniciar la sessió i crearà una funció que generarà l’URL. Finalment, crearem una funció que generarà un URL que haureu d’enviar al client.

Pas 4: el vostre torn: redirigiu els usuaris a l'URL de Google

En aquest pas, heu d'enviar els usuaris a l'URL que acabeu de crear. A la meva aplicació, genero l'URL a l'API i l'envio al meu frontal, on el converteixo en l'adreça href d'un botó, per exemple.

Inicieu la sessió amb Google

L'usuari es redirigeix ​​a la pàgina d'inici de sessió.

Resolució de problemes: si arribeu a una pàgina que diu que no hi teniu accés (o alguna cosa similar), pot significar que no heu configurat correctament les vostres credencials de Google Project. Assegureu-vos que els teniu configurats correctament a la consola de Google.

Pas 5: deseu les dades d’inici de sessió

Amb sort, podríeu haver iniciat la sessió al vostre compte de Google i Google us hauria redirigit de nou a la vostra aplicació (o a qualsevol adreça de reenviament que hàgiu proporcionat). Ara tot el que hem de fer és assegurar-nos que el compte amb el qual van iniciar la sessió coincideix amb un usuari de la nostra base de dades (o bé crear un compte).

Per fer-ho, Google ha proporcionat un paràmetre per a l'adreça de reenviament anomenat "codi". Ho veieu com:

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

Heu d'extreure aquest paràmetre "codi" i tornar-lo a la biblioteca de l'API de Google per verificar qui és l'usuari que ha iniciat la sessió. Aquí teniu un bon paquet NPM que podeu utilitzar per extreure el paràmetre. No importa com ho facis.

Un cop tingueu el paràmetre "codi" i l'envieu al vostre servidor, podem utilitzar l'adreça electrònica i l'identificador de l'usuari a la nostra aplicació.

Fitxer: src / google-util.js

Ara tot el que heu de fer és fer coincidir el correu electrònic o l’identificador amb la vostra base de dades i iniciar la sessió o iniciar la sessió a l’usuari.

Versió completa

Aquí teniu una versió completa del codi sense cap comentari. Utilitzeu aquesta opció per obtenir una bona visió general. Si us quedeu atrapats, consulteu els exemples explicatius anteriors.

Yahoooo !!

La vostra aplicació ara és compatible amb Google. Per obtenir accés a altres API de Google, només cal afegir-les a la matriu "Àmbits". Quan l’usuari iniciï la sessió, se’ls demanarà que els doni accés a aquestes dades, per exemple. Dades de Google Calendar.

Si us ha agradat aquest article, doneu-li uns quants clics (podeu deixar fins a 50) o podeu deixar un comentari si teniu cap pregunta. Faré tot el possible per respondre!

Segueix-me a Twitter.

Moltes gràcies!

Article creat pels fundadors d'Authenticator: autenticació fàcil i ràpida per a la vostra aplicació.

Més aportacions de Jack Scott.

  • Com vaig començar una startup en 4 dies
  • Creeu un servidor GraphQL complet amb Node.js
  • Adéu Redux