## Johdanto Kun aloitat uuden projektin, et yleensä voi välttää useita asioita: API:t, autentikointi + autorisointi, identiteetti ja loppukäyttäjän kirjautumisprosessi. Näiden asioiden aloittaminen on ollut vaikeaa, koska konseptit ja teknologiat ovat levinneitä: RESTful/GraphQL, verkkoselainrajapinta, natiiviklientti, asiakkaiden yhdistäminen API:hin, autentikointikäytännöt tasapainottamaan turvallisuutta ja käyttäjäkokemusta jne. Lisäksi useimmat työt ovat "toistuvia". Tarkoitan, että ne ovat tarpeellisia ja samanlaisia melkein jokaisessa projektissa, pienillä muokkauksilla. Kuulostaako pelottavalta ja tylsältä? Älä panikoi. Tänään meillä on avoin lähdekoodi. Kahdella alla olevalla avoimen lähdekoodin projektilla asiat eivät ole hankalia: - [Logto](https://github.com/logto-io/logto): Auttaa sinua rakentamaan kirjautumisen, autentikoinnin ja käyttäjäidentiteetin muutamassa minuutissa. - [Hasura](https://github.com/hasura/graphql-engine): Salamannopeat, välittömät reaaliaikaiset GraphQL API:t tietokannallesi hienojakoisella käyttöoikeuden hallinnalla. Tässä artikkelissa keskitymme Logton ja Hasuran yhdistämiseen, mikä mahdollistaa autentikoinnin, autorisoinnin ja GraphQL API:en toteuttamisen ilman kitkaa. Näin voit nopeasti hypätä liiketoimintaasi ilman rakettitieteen opiskelua. ## Aloita ### Edellytykset Koska sekä [Logtolla](https://docs.logto.io/docs/tutorials/get-started/) että [Hasuralla](https://hasura.io/docs/latest/getting-started/index/) on hyvät aloitusoppaat, oletamme, että olet lukenut ne ja sinulla on peruskäsitys. Tarvitset pääsyn käynnissä olevaan instanssiin molemmista. Oletamme, että käytettävät päätepisteet ovat: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Jos käytät Docker/Docker Composea, koneesi (isäntä) `localhost`:iin pääsyyn voit käyttää Dockerin maagista merkkijonoa `host.docker.internal`. Tässä tapauksessa Logton päätepiste on `http://host.docker.internal:3001`. Oletamme myös, että sinulla on suosittu alusta ja kehys asiakassovelluksen rakentamiseen, esimerkiksi React tai Next.js. ### Aseta API Logtossa Logto Admin Consolen vasemmassa navigointipaneelissa, klikkaa "API Resources", ja näet API-resurssien hallintasivun. Klikkaa sitten suurta "+ Create API Resource" -painiketta oikeassa yläkulmassa. Aukeavassa modaalissa syötä `Hasura` API-nimeksi ja `https://hasura.api` API-tunnisteeksi. Luo API-modaali

Käytämme tätä API-tunnistetta loput artikkelistamme. Mutta voit vapaasti muuttaa arvoja mieltymyksesi mukaan. Klikkaa "Create API Resource", ja se näyttää viestin, joka ilmaisee, että resurssi on luotu onnistuneesti. Tämä on kaikki mitä tarvitsemme Logtossa toistaiseksi. ### Luo rooli Hasuraan Jotta voisimme hyödyntää Hasuran oikeuksien hallintaa, aiomme luoda rooleja Logtossa, jotka mapataan Hasuran rooleihin.

Roolin nimen on oltava sama kuin roolin nimi Hasuran "Permissions"-sivulla. Muista määrätä rooli käyttäjille. ### Ota verkkokoukon autentikointi käyttöön Hasurassa [Hasura käyttää roolipohjaista käyttöoikeuden hallintaa](https://hasura.io/docs/latest/auth/index/), joka hoitaa autorisoinnin. Joten meidän tarvitsee vain selvittää autentikointi. Se tukee kahta menetelmää: Webhook ja JWT. Valitsemme [webhookin](https://hasura.io/docs/latest/auth/authentication/webhook/), koska se on joustavampi. Ota verkkokoukon autentikointi käyttöön, sinun täytyy asettaa ylläpitäjän salaisuus ja autentikointikoukun päätepiste. - Ylläpitäjän salaisuus on avain Hasuran ylläpitäjäkäyttöoikeuden saamiseen, kun lähettää pyyntöjä. Se on pakollinen ennen kuin verkkokoukun autentikointi otetaan käyttöön. Muista pitää se jossain turvassa, äläkä käytä sitä tuotannossa. - Autentikointikoukun päätepiste on URL, johon lähettää autentikointipyyntöjä. Voit asettaa ne [ympäristömuuttujilla](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Korvaa omalla salaisuudellasi HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Saatat huomata, että käytämme Logtossa täytettyä API-tunnistetta rakentaaksemme autentikointikoukun päätepisteen. Se varmistaa, että käyttäjä käyttää oikeaa bearer-tokenia, eikä satunnaista, joka saattaa olla haitallinen. Sinun täytyy päivittää autentikointikoukun päätepistettä, jos sinulla on erilainen Logton päätepiste tai API-tunniste. Esimerkiksi, jos sinulla on `https://logto.domain.com` Logton päätepisteenä ja `https://graphql.domain.com` API-tunnisteena, silloin se olisi: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` Tästä eteenpäin, jokaisessa GraphQL-pyynnössä Hasura tuo kaikki pyyntöpäälihteet Logton autentikointikoukun päätepisteeseen, ja Logto vastaa oikein. ## Lähetä suojatut GraphQL-pyynnöt ### Yhteenveto Koska emme käytä Hasuran ylläpitäjän salaisuutta tuotannossa, jokainen GraphQL-pyyntö on turvattu seuraavilla otsikoilla: - `Authorization` Standardeeraattava bearer-token, jonka Logto generoi. - `Expected-Role` Rooli, jonka haluat Logton esittelevän autentikointikoukkuvastauksessa. Jos käyttäjällä, joka on `Authorization`-otsikossa ei ole `Expected-Role`, Logto vastaa `401 Unauthorized`. `Authorization`-otsikko vaatii kelvollisen Access Tokenin JWT-muodossa Hasuran API-tunnisteesta yleisölle. Hold on - on melko vaikeaa muistaa ja koota kaikki nämä asiat. Onneksi meillä on Logto SDK:t, jotka yksinkertaistavat nörttimäistä osaa. ### Integroi Logto SDK Seuraa [integraatio-opasta](https://docs.logto.io/docs/recipes/integrate-logto/) integroidaksesi Logto SDK:n asiakassovellukseesi. Se mahdollistaa paitsi kelvollisen Access Tokenin luomisen GraphQL-pyyntöjä varten, myös sujuvan kirjautumiskokemuksen loppukäyttäjillesi. Kun olet saanut oppaan päätökseen, tarvitsemme pienen muutoksen `LogtoConfig`: Lisää API-tunniste, jonka loit Logto Admin Consolen kohdassa `resources`. Otetaan React SDK esimerkiksi: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Lisää tämä rivi }; ``` ### Lähetä pyynnöt Viimein! Kun käyttäjä on kirjautunut, käytä `getAccessToken()` Logto SDK:ssa saadaksesi Access Tokenin Hasura GraphQL-pyyntöjä varten: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Ennen pyynnön lähettämistä request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Kertaus Yllä olevan työn avulla toteutimme onnistuneesti kaikki johdannon ei-skipattavat asiat: - Tietokantakaava-ohjatun GraphQL API -päätepisteen - Autentikointi- ja identiteettipalvelun OIDC-protokollan päälle - Täydellisen loppukäyttäjän kirjautumisprosessin ja autentikointitilan hallinnan - Suojatun API-käytön käyttäjäidentiteetin ja roolien perusteella Ei niin vaikeaa, vai mitä? Jos kohtaat ongelmia, älä epäröi liittyä [Logto](https://discord.gg/vRvwuwgpVX) tai [Hasura](https://discord.gg/hasura) discord-palvelimelle keskustelemaan tiimin kanssa.