## 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](https://github.com/logto-io/logto): Ti aiuta a costruire l'accesso, l'autenticazione e l'identità utente in pochi minuti. - [Hasura](https://github.com/hasura/graphql-engine): 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](https://docs.logto.io/docs/tutorials/get-started/) che [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Se stai usando Docker/Docker Compose, per accedere dal tuo computer(host) a `localhost`, puoi usare la stringa magica di Docker `host.docker.internal`. In questo caso, l'endpoint di Logto sarà `http://host.docker.internal:3001`. 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. Crea la modale 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. Crea ruolo

Il nome del ruolo deve essere uguale al nome del ruolo nella pagina "Permissions" di Hasura. Ricordati di assegnare il ruolo agli utenti. ### Abilitare l'autenticazione webhook in Hasura [Hasura utilizza la gestione degli accessi basata su ruoli](https://hasura.io/docs/latest/auth/index/), che gestisce l'autorizzazione. Quindi, dobbiamo solo risolvere l'autenticazione. Supporta due metodi: Webhook e JWT. Scegliamo [webhook](https://hasura.io/docs/latest/auth/authentication/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](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Sostituisci con il tuo segreto HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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à: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 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. Se l'utente indicato dall'header `Authorization` non ha il `Expected-Role`, Logto risponderà con `401 Unauthorized`. 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](https://docs.logto.io/docs/recipes/integrate-logto/) 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: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Aggiungi questa riga }; ``` ### 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: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Prima di inviare la richiesta request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 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](https://discord.gg/vRvwuwgpVX) o [Hasura](https://discord.gg/hasura) per chattare dal vivo con il team.