Facile Google Auth per Node.js

5 semplici passaggi per l'integrazione con Google - codice incluso.

I miei occhi si gonfiarono di lacrime quando mi resi conto che le ultime 10 ore di programmazione non servivano a nulla ... Passport.js mi aveva dato, e la gente di questo mondo, false speranze.

Non sono sicuro che tu abbia mai guardato il codice all'interno della libreria Passport.js ma non ce n'è molto, e non è neanche molto buono. Fondamentalmente è un po 'di codice che assicura che le tue credenziali di autenticazione siano posizionate correttamente. Ma il principale svantaggio di questo è che uccide la tua flessibilità. Con il passaporto, è necessario reindirizzare le richieste di richiamata a un server. Se non sai cosa significa; fondamentalmente fa schifo se stai creando qualsiasi tipo di app diversa da un'app renderizzata dal server (come un'app a pagina singola o SPA).

Ma non preoccuparti! Ecco un breve tutorial che ti mostrerà come aggiungere correttamente Google Auth.

Prima di iniziare ️

Questo tutorial presuppone che tu abbia:

  1. Una buona conoscenza di JavaScript e Node.js
  2. Un'applicazione con un server

Fantastico, andiamo!

Passaggio 1: installare le dipendenze 🖥

Solo uno: è su NPM se non l'hai già assunto.

  • googleapis

È stato facile!

Passaggio 2: configura Google

Successivamente dovrai configurare la libreria con le tue credenziali in modo che Google sappia chi sta effettuando le richieste.

Per ottenere le credenziali - se non le hai già - vai su Google Console e crea un nuovo progetto. Una volta che hai un nuovo progetto, richiedi alcune chiavi API. Ecco un buon link per ulteriori informazioni al riguardo.

File: src / google-util.js

Il file sopra; importa la libreria, crea un oggetto di configurazione con i nostri dettagli e aggiunge una funzione che si collegherà a Google quando lo desideriamo.

Passaggio 3: ottieni l'URL di accesso di Google

Perché ne abbiamo bisogno? ... Bene, per consentirci di accedere a Google, dobbiamo inviarlo alla pagina di accesso di Google. Da qui, accederanno al loro account e verranno reindirizzati alla nostra app con i dettagli di accesso.

File: src / google-util.js

Il codice sopra fa alcune cose; determina quali informazioni e autorizzazioni vogliamo all'utente quando effettuano l'accesso e crea una funzione che useremo per generare l'URL. Infine creiamo una funzione che genera un URL che dovrai inviare al client.

Passaggio 4: il tuo turno - Reindirizza i tuoi utenti all'URL di Google

Questo passaggio richiede di inviare i tuoi utenti all'URL che abbiamo appena creato. Nella mia app, creo l'URL nell'API e lo invio al mio front-end dove lo faccio l'indirizzo href di un pulsante, ad es.

 Accedi con Google 

Questo porterà l'utente alla pagina di accesso.

Risoluzione dei problemi: se arrivi a una pagina che ti dice che non hai accesso (o qualcosa di simile), potrebbe significare che non hai configurato correttamente le credenziali del tuo progetto Google. Assicurati di averli impostati correttamente nella tua Google Console.

Passaggio 5: salvare i dettagli di accesso

Eventualmente, saresti stato in grado di accedere al tuo account Google e Google ti avrebbe reindirizzato alla tua app (o all'indirizzo di reindirizzamento a cui hai detto di andare). Ora tutto ciò che dobbiamo fare è accertarci che l'account con cui hanno effettuato l'accesso corrisponda a un utente nel nostro database (o crearne uno).

Per fare ciò, Google ci ha fornito un parametro sull'indirizzo di reindirizzamento chiamato "codice". Vedrai questo come:

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

È necessario estrarre questo parametro "codice" e restituirlo alla libreria API di Google per verificare chi è l'utente che ha effettuato l'accesso. Ecco un buon pacchetto NPM che può aiutarti a estrarre il parametro ma non importa come lo fai.

Una volta che hai il parametro "codice" e lo hai inviato al tuo server, possiamo ottenere l'e-mail e l'id dell'utente da utilizzare nella nostra app.

File: src / google-util.js

Ora tutto ciò che devi fare è controllare l'e-mail o l'id con il tuo database e accedere all'utente o registrarli - dipende da te!

Versione completa

Ecco una versione completa del codice senza tutti i commenti. Usalo per una buona panoramica. Se rimani bloccato, controlla gli esempi sopra con le spiegazioni.

Yahoooo !!

La tua app ora supporta Google. Per ottenere l'accesso ad altre API di Google, è sufficiente aggiungerle all'array "ambiti" e quando l'utente accede, verrà richiesto di darti accesso a tali dati, ad es. Dati di Google Calendar.

Se ti è piaciuto questo articolo, per favore, fai qualche applauso (puoi lasciarne fino a 50) o puoi commentare se hai domande, farò del mio meglio per rispondere!

Seguimi su Twitter.

Grazie!

Articolo creato dai fondatori di Authenticator - Autenticazione semplice e veloce per la tua app.

Altri post di Jack Scott.

  • Come ho avviato una startup in 4 giorni
  • Crea un server GraphQL completo con Node.js
  • Arrivederci Redux