Logto x Hasura: Come usare soluzioni open-source auth + GraphQL per potenziare il tuo progetto

Introduzione#

Quando si tratta di un nuovo progetto, di solito non si possono evitare diverse cose: API, autenticazione + autorizzazione, identità e flusso di accesso per l'utente finale. Era difficile avviare queste cose perché ci sono molti concetti e tecnologie che si diffondono ampiamente: RESTful/GraphQL, frontend web, client nativo, connettere i client con le API, migliori pratiche di autenticazione per bilanciare sicurezza ed esperienza utente, ecc.

Inoltre, la maggior parte dei lavori è “ripetitiva”. Cioè, sono necessarie e simili per quasi tutti i progetti, con alcune modifiche.

Ti sembra spaventoso e noioso? Non farti prendere dal panico. Oggi abbiamo l'open source. Con i due progetti open-source qui sotto, le cose non diventano complicate:

• Logto: Ti aiuta a costruire l'accesso, l'autenticazione e l'identità utente in pochi minuti.
• Hasura: API GraphQL istantanee e velocissime sul tuo DB con controllo degli accessi dettagliato.

In questo articolo, ci concentreremo sulla connessione tra Logto e Hasura, il che ti permette di implementare autenticazione, autorizzazione e API GraphQL senza attriti. Così puoi iniziare velocemente a lavorare sul tuo business senza dover imparare cose complicate.

Iniziare#

Prerequisiti#

Poiché sia Logto che Hasura hanno una buona guida introduttiva, presumiamo che tu le abbia lette e abbia una conoscenza di base. È necessario accedere a un'istanza in esecuzione di entrambi.

Presumiamo che gli endpoint accessibili siano:

• Logto: http://localhost:3001
• Hasura: http://localhost:8080

Presumiamo anche che tu abbia una piattaforma e un framework preferiti per costruire l'app client, ad esempio React o Next.js.

Configurare l'API in Logto#

Nella barra laterale di navigazione a sinistra del tuo Logto Admin Console, clicca su “API Resources”, e vedrai la pagina di gestione delle risorse API.

Poi fai clic sul grande pulsante “+ Create API Resource” nell'angolo in alto a destra. Nella finestra modale che si apre, inserisci Hasura come nome dell'API e https://hasura.api come identificativo dell'API.

Utilizzeremo questo identificativo dell'API per il resto del nostro articolo. Ma sentiti libero di cambiare i valori in base alle tue preferenze.

Clicca su “Create API Resource”, e verrà visualizzato un messaggio che indica che la risorsa è stata creata con successo. Questo è tutto ciò di cui abbiamo bisogno in Logto per ora.

Creare un ruolo per Hasura#

Per sfruttare la gestione delle autorizzazioni di Hasura, creeremo ruoli in Logto, questi ruoli verranno mappati ai ruoli di Hasura.

Ricordati di assegnare il ruolo agli utenti.

Abilitare l'autenticazione webhook in Hasura#

Hasura utilizza la gestione degli accessi basata su ruoli, che gestisce l'autorizzazione. Quindi, dobbiamo solo risolvere l'autenticazione. Supporta due metodi: Webhook e JWT. Scegliamo webhook poiché è più flessibile.

Per abilitare l'autenticazione webhook, devi impostare il segreto di amministrazione e l'endpoint dell'hook di autenticazione.

• Il segreto di amministrazione è la chiave per avere accesso amministrativo a Hasura quando si inviano richieste. È richiesto prima di abilitare l'autenticazione webhook. Ricorda di conservarlo in un luogo sicuro e di non usarlo in produzione.
• L'endpoint dell'hook di autenticazione è un URL per inviare richieste di autenticazione.

Puoi impostarli tramite variabili d'ambiente:

Puoi notare che usiamo l'identificativo dell'API compilato in Logto per costruire l'endpoint dell'hook di autenticazione. Assicura che l'utente stia passando il giusto token bearer invece di uno casuale che potrebbe provenire da un malintenzionato.

Devi aggiornare l'endpoint dell'hook di autenticazione se hai un endpoint Logto diverso o un indicatore dell'API diverso. Supponiamo tu abbia https://logto.domain.com come endpoint Logto e https://graphql.domain.com come identificativo dell'API, allora sarà:

Da ora in poi, per ogni richiesta GraphQL, Hasura porterà tutti gli header della richiesta all'endpoint dell'hook di autenticazione di Logto, e Logto risponderà correttamente.

Inviare richieste GraphQL protette#

Riepilogo#

Poiché non utilizzeremo il segreto di amministrazione di Hasura in produzione, ogni richiesta GraphQL è protetta dai seguenti header:

• Authorization Il token standard bearer generato da Logto.
• Expected-Role Il ruolo che vuoi che Logto mostri nella risposta dell'hook di autenticazione.

L'header Authorization richiede un token di accesso valido in formato JWT con l'indicatore dell'API Hasura per il pubblico. Aspetta un attimo - è abbastanza difficile ricordare e comporre tutte queste cose. Fortunatamente abbiamo gli SDK di Logto per semplificare la parte geek.

Integrare Logto SDK#

Segui la guida all'integrazione per integrare un SDK Logto nella tua app client. Ciò abilita non solo la capacità di generare un token di accesso valido per le richieste GraphQL, ma anche un'esperienza di accesso fluida per i tuoi utenti.

Una volta terminata la guida, abbiamo bisogno di una piccola modifica nel LogtoConfig: Aggiungi l'indicatore dell'API creato nel Logto Admin Console a resources. Prendendo come esempio il React SDK:

Inviare richieste#

Finalmente! Dopo che l'utente ha effettuato l'accesso, usa getAccessToken() nell'SDK Logto per recuperare il token di accesso per le richieste GraphQL di Hasura:

Ricapitolare#

Con lo sforzo sopra, abbiamo implementato con successo tutte le cose non saltabili nell'introduzione:

• Un endpoint API GraphQL basato su database-schema
• Un servizio di autenticazione e identità basato sul protocollo OIDC
• Il flusso di accesso completo per l'utente finale e gestione dello stato di autenticazione
• Accesso API protetto basato sull'identità e sui ruoli degli utenti

Non è stato così difficile, giusto? Se incontri problemi, sentiti libero di unirti al server discord di Logto o Hasura per chattare dal vivo con il team.