OAuth 2.0 è uno standard che consente alle applicazioni di terze parti di accedere ai dati dalle app Web in modo sicuro. Puoi usarlo per recuperare dati tra cui informazioni sul profilo, orari, ecc. che è ospitato su altre app Web come Facebook, Google e GitHub. Un servizio può farlo per conto di un utente senza esporre le proprie credenziali all'applicazione di terze parti.
Scopri come implementare OAuth in un'app Express usando GitHub come provider OAuth in pochi passaggi.
Il flusso OAuth
In un tipico flusso OAuth, il tuo sito offre agli utenti un'opzione per accedere con il proprio account di terze parti da un provider come GitHub o Facebook. Un utente può avviare questo processo facendo clic su un pulsante di accesso OAuth pertinente.
Questo li reindirizza dalla tua applicazione al sito Web del provider OAuth e presenta loro un modulo di consenso. Il modulo di consenso contiene tutte le informazioni a cui desideri accedere dall'utente, che potrebbero essere le sue e-mail, immagini, orari, ecc.
Se l'utente autorizza la tua applicazione, la terza parte li reindirizzerà alla tua applicazione con un codice. L'applicazione può quindi scambiare il codice ricevuto con un token di accesso che può quindi utilizzare per accedere ai dati utente disponibili.
L'implementazione di questo flusso in un'applicazione Express prevede alcuni passaggi.
Passaggio 1: impostazione dell'ambiente di sviluppo
Innanzitutto, crea una directory di progetto vuota e CD nella directory creata.
Per esempio:
mkdir github-app
CD github-app
Quindi, inizializza npm nel tuo progetto eseguendo:
npm init -y
Questo comando crea un pacchetto.json file che contiene dettagli sul tuo progetto come il nome, la versione, ecc.
Questo tutorial presenterà l'uso del sistema di moduli ES6. Impostalo aprendo il tuo pacchetto.json file e specificando "tipo: "modulo" nell'oggetto JSON.
Passaggio 2: installazione delle dipendenze
Dovrai installare alcune dipendenze affinché il tuo server funzioni correttamente:
- ExpressJS: ExpressJS è un framework NodeJS che fornisce un solido set di funzionalità per applicazioni Web e mobili. L'utilizzo di Express semplificherà il processo di creazione del server.
- Axios: Axios è un client HTTP basato su promesse. Avrai bisogno di questo pacchetto per effettuare una richiesta POST per un token di accesso a GitHub.
- dotenv: dotenv è un pacchetto che carica le variabili di ambiente da un file .env nell'oggetto process.env. Ti servirà per nascondere informazioni importanti sulla tua applicazione.
Installali eseguendo:
npm installare espresso assio dotenv
Passaggio 3: creazione di un'app rapida
Devi creare un server Express di base per gestire e fare richieste al provider OAuth.
Innanzitutto, crea un index.js file nella directory principale del tuo progetto contenente quanto segue:
// index.js
importare esprimere da "esprimere";
importare assio da "assio";
importare * come dotenv da "dotenv";
dotenv.config();cost app = espresso();
cost porta = processo.env. PORTO || 3000
app.ascolta (porta, () => {
consolle.tronco d'albero(`L'app è in esecuzione sulla porta ${porta}`);
});
Questo codice importa la libreria Express, istanzia un'istanza Express e inizia ad ascoltare il traffico sulla porta 3000.
Passaggio 4: creazione di gestori di route
Dovrai creare due gestori di route per gestire il flusso OAuth. Il primo reindirizza l'utente a GitHub e richiede l'autorizzazione. Il secondo gestisce il reindirizzamento alla tua app ed effettua la richiesta del token di accesso quando un utente autorizza la tua applicazione.
Il primo gestore di route dovrebbe reindirizzare l'utente a https://github.com/login/oauth/authorize? parametri.
Dovrai passare una serie di parametri richiesti all'URL OAuth di GitHub, che includono:
- ID client: si riferisce all'ID che la tua applicazione OAuth riceve al momento della registrazione su GitHub.
- Ambito: si riferisce a una stringa che specifica la quantità di accesso che un'app OAuth ha alle informazioni di un utente. È possibile trovare un elenco di ambiti disponibili in Documentazione OAuth di GitHub. Qui utilizzerai un "leggi: utente” ambito, che concede l'accesso per leggere i dati del profilo di un utente.
Aggiungi il seguente codice al tuo index.js file:
// index.js
app.get("/auth", (richiesto, ris) => {
// Memorizza i parametri in un oggetto
cost parametri = {
scopo: "leggi: utente",
Identificativo cliente: processi.env.IDENTIFICATIVO CLIENTE,
};
// Converte i parametri in una stringa con codifica URL
cost urlEncodedParams = nuovo URLSearchParams (params).toString();
res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Questo codice implementa il primo gestore di route. Memorizza i parametri richiesti in un oggetto, convertendoli in un formato con codifica URL utilizzando l'API URLSearchParams. Quindi aggiunge questi parametri all'URL OAuth di GitHub e reindirizza l'utente alla pagina di consenso di GitHub.
Aggiungi il seguente codice al tuo index.js file per il secondo gestore di route:
// index.js
app.get("/github-callback", (richiesto, ris) => {
cost { codice } = richiesta.query;cost corpo = {
Identificativo cliente: processi.env.IDENTIFICATIVO CLIENTE,
cliente_segreto: processi.env.CLIENT_SECRET,
codice,
};permettere token di accesso;
opzioni const = { intestazioni: { accetta: "applicazione/json" } };
assio
.inviare("https://github.com/login/oauth/access_token", corpo, opzioni)
.allora((risposta) => response.data.access_token)
.quindi((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.presa((err) => res.status(500).json({ err: err.message }));
});
Il secondo gestore di route estrarrà il file codice restituito da GitHub nel file richiesta.richiesta oggetto. Quindi fa un POST richiesta utilizzando Asso a " https://github.com/login/oauth/access_token" con il codice, Identificativo cliente, e cliente_segreto.
Il cliente_segreto è una stringa privata che genererai quando crei un'applicazione GitHub OAuth. Quando il token di accesso viene recuperato correttamente, viene salvato in una variabile per un uso successivo. L'utente viene infine reindirizzato alla tua applicazione con l'estensione token di accesso.
Passaggio 5: creazione di un'applicazione GitHub
Successivamente, dovrai creare un'applicazione OAuth su GitHub.
Innanzitutto, accedi al tuo account GitHub, quindi vai a Impostazioni, scorri verso il basso fino a Impostazioni dello sviluppatoree seleziona App OAuth. Infine, clicca su “Registra una nuova applicazione.”
GitHub ti fornirà un nuovo modulo di domanda OAuth come questo:
Compila i campi richiesti con i dati desiderati. Il "URL della home page" dovrebbe essere " http://localhost: 3000”. Tuo "URL di richiamata di autorizzazione" dovrebbe essere " http://localhost: 3000/github-richiamata”. Puoi anche abilitare facoltativamente il flusso del dispositivo, consentendoti di autorizzare gli utenti per un'app senza testa, ad esempio uno strumento CLI o Gestore credenziali Git.
Il flusso del dispositivo è in versione beta pubblica e soggetto a modifiche.
Infine, colpisci il Registrati domanda pulsante.
GitHub ti indirizzerà a una pagina con il tuo Identificativo cliente e un'opzione per generare il tuo cliente_segreto. Copia il tuo Identificativo cliente, genera il tuo cliente_segreto, e copialo anche tu.
Crea un file .env e conservare il Identificativo cliente e cliente_segreto dentro. Denominare queste variabili CLIENT_ID e CLIENT_SECRET rispettivamente.
Il tuo flusso OAuth è ora completo e ora puoi effettuare richieste con il token di accesso per leggere i dati utente (il scopo hai specificato prima).
L'importanza di OAuth 2.0
L'utilizzo di OAuth 2.0 nell'applicazione semplifica notevolmente l'attività di implementazione di un flusso di autenticazione. Protegge i dati degli utenti dei tuoi clienti utilizzando lo standard Secure Sockets Layer (SSL), assicurando che rimangano privati.