[Logto](https://logto.io/) on moderni identiteetin todentamispalveluntarjoaja, joka tarjoaa turvallista, kattavaa ja käyttäjäystävällistä kirjautumistukea sovelluksille. Se tarjoaa myös lukuisia SDK-paketteja ja integraatio-oppaita eri kehys- ja ohjelmointikielille, mikä mahdollistaa yritystason identiteetin todentamispalveluiden saumattoman integroinnin sovellukseesi muutamassa minuutissa. Tämä artikkeli keskittyy pääasiassa siihen, miten Supabase integroidaan Logton kanssa. ## Supabasen perusteet Supabase hyödyntää [Postgresin rivitason turvallisuutta](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) hallitakseen datan käyttöoikeuksia. Yksinkertaisemmin sanottuna, luomalla rivitason turvallisuuspolitiikkoja tietokannan tauluille, voimme rajoittaa ja hallita, kuka voi lukea, kirjoittaa ja päivittää taulukon dataa. Oletetaan, että sinulla on tietokannassasi taulu nimeltä "posts", jonka sisältö on seuraava: Posts table

Taulun `user_id`-kenttä edustaa käyttäjää, jolle kukin postausdata kuuluu. Voit rajoittaa jokaisen käyttäjän pääsyn vain omaan postausdataansa `user_id`-kentän perusteella. Tämä edellyttää kuitenkin, että Supabase pystyy tunnistamaan nykyisen käyttäjän tietokantaan pääsyn aikana. ### Lisää käyttäjätietoja Supabase-pyyntöihin Kiitos Supabasen tukea JWT:lle, kun sovelluksemme vuorovaikuttaa Supabasen kanssa, voimme luoda JWT:n, joka sisältää käyttäjätiedot käyttäen Supabasen tarjoamaa JWT-salaisuutta. Käytämme tämän JWT:n Autentikointi-otsikkona tehdessämme pyyntöjä. Kun Supabase vastaanottaa pyynnön, se automaattisesti tarkistaa JWT:n pätevyyden ja sallii pääsyn dataan, joka on sisällytetty siihen läpi myöhempien prosessien. Ensiksi voimme saada Supabasen tarjoaman JWT-salaisuuden "Project Settings" -osiosta Supabase-hallintapaneelissa: Supabase API settings page

Seuraavaksi, kun käytämme Supabase SDK:ta tehdäksemme pyyntöjä Supabaselle, käytämme tätä salaisuutta luodaksemme JWT:n ja liitämme sen Autentikointi-otsikkona pyyntöön. (Huomaa, että tämä prosessi tapahtuu sovelluksen backend-palvelussa, eikä JWT-salaisuutta tule koskaan altistaa kolmansille osapuolille). ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; / * Huomaa: * Voit löytää SUPABASE_URL:n, SUPABASE_ANON_KEY:n samasta paikasta, mistä löydät JWT Secretin. */ const SUPABASE_URL = process.env.SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY; const SUPABASE_JWT_SECRET = process.env.SUPABASE_JWT_SECRET; export const getSupabaseClient = (userId) => { const jwtPayload = { userId, }; const jwt = sign(jwtPayload, SUPABASE_JWT_SECRET, { expiresIn: '1h', // Vain demonstrointia varten }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` Seuraavaksi siirry SQL-editoriin Supabase-hallintapaneelissa ja luo funktio, joka hakee userId:n, joka kuljetetaan pyynnön mukana: Create get user ID function

Kuvassa käytetty koodi on seuraava: ```sql create or replace function auth.user_id() returns text as $$ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text; $$ language sql stable; ``` Kuten koodi osoittaa, Supabasessa voit hakea luomamme JWT:n keskuksen kutsumalla `request.jwt.claims`. `userId`-kenttä keskuksessa on asettamamme arvo. Tämän funktion avulla Supabase voi tunnistaa käyttäjän, joka tällä hetkellä käyttää tietokantaa. ### Luo rivitason turvallisuuspolitiikka Seuraavaksi voimme luoda rivitason turvallisuuspolitiikan rajoittamaan jokaisen käyttäjän pääsyn vain omaan postausdataansa posts-taulun `user_id`-kentän perusteella. 1. Siirry posts-taulun pöydälle Supabase-hallintapaneelissa ja valitse posts-taulu. 2. Klikkaa taulukon yläosan "Add RLS Policy" -painiketta. 3. Kehotteessa klikkaa "Create policy". 4. Syötä politiikann nimi ja valitse SELECT Policy -komento. 5. `using`-lohkossa alla olevassa koodissa syötä: ```sql auth.user_id() = user_id ``` Create RLS policy

Käyttämällä tällaisia politiikkoja, datan käyttöoikeuksien hallinta Supabasessa saavutetaan. Todellisissa sovelluksissa, loisit useita politiikkoja rajoittamaan käyttäjän toimia, kuten datan lisäystä ja muokkausta. Tämä artikkeli vetää oven ulkopuolelle. Lisätietoja rivitason turvallisuudesta (RLS), kuukokaa jäljempänä [Suojele tiedot käyttäen Postgres Row Level Security](https://supabase.com/docs/guides/database/postgres/row-level-security). ### Perus integrointiprosessi Logton kanssa Kuten aikaisemmin mainittiin, koska Supabase käyttää RLS: ää pääsynhallintaan, avain Logtoon (tai minkä tahansa muun todennuspalvelun) integroimiseen on luvan saaneen käyttäjän käyttäjäiden hankkiminen ja lähettäminen Supabaselle. Koko prosessi on kuvattu alla olevassa kaaviossa: ```mermaid sequenceDiagram Participant U as Loppukäyttäjä Participant Logto Participant B as Sovelluksen backend-palvelu Participant Supabase U->>Logto: Kirjaudu sisään Logolla Logto-->>U: `access_token` U->>B: Pyydä dataa `access_token` la B->>B: Hae `user_id` `access_token` lla B->>B: Generoi jwt `user_id` & `Supabase JWT secret` lla B->>Supabase: Pyydä dataa jwt:llä Supabase-->>B: Vastattu data B-->>U: Vastattu data ``` Seuraavaksi selitämme, kuinka integroida Logto Supabasen kanssa tämän prosessikaavion perusteella. ## Logton integrointi Logto tarjoaa integraatio-oppaita eri kehyksille ja ohjelmointikielille. Yleisesti ottaen näillä kehyksillä ja kielillä rakennetut sovellukset jakavat kategorioihin kuten Native apps, SPA (yksisivuiset sovellukset), perinteiset web-sovellukset, ja M2M (koneelta koneelle) sovellukset. Voit tutustua [Logton pikakäynnit](https://docs.logto.io/quick-starts/) -sivulle integroidaksesi Logto sovellukseesi käyttöösi sopivan tekniikkapinon mukaan. Sen jälkeen seuraa alla olevia ohjeita integroidaksesi Logto sovellukseesi sen tyyppiin perustuen. ### Native-sovellus tai SPA Sekä native-sovellukset että SPA pyörivät laitteellasi, ja käyttöön saadut tunnistetiedot (access token) tallennetaan laitteellesi. Siksi, kun integroit sovelluksesi Supabasen kanssa, sinun on toimittava Supabasen kanssa backend-palvelusi kautta, koska et voi altistaa arkaluontoista tietoa (kuten Supabase JWT secret) jokaisen käyttäjän laitteella. Oletetaan, että olet rakentamassa SPA:si Reactin ja Expressin avulla. Olet onnistuneesti integroinut Logtoon sovellukseesi noudattamalla [Logto React SDK -opasta](https://docs.logto.io/quick-starts/react/) (voit viitata koodiin nostra [react-sample -aineistossamme](https://github.com/logto-io/js/tree/master/packages/react-sample)). Lisäksi olet lisännyt Logton access tokenin validoimisen backend-palvelimellesi [Suojele API Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/) -dokumentaation mukaisesti. Seuraavaksi käytät Logsolta saatua access tokenia pyytääksesi käyttäjätietoja backend-palvelimeltasi: ```jsx import { useLogto } from '@logto/react'; import { useState, useEffect } from 'react'; import PostList from './PostList'; const endpoint = ''; const resource = ''; function PostPage() { const { isAuthenticated, getAccessToken } = useLogto(); const [posts, setPosts] = useState(); useEffect(() => { const fetchPosts = async () => { const response = await fetch(endpoint, { headers: { Authorization: `Bearer ${await getAccessToken(resource)}`, }, }); setPosts(response.json()); }; if (isAuthenticated) { void fetchPosts(); } }, [isAuthenticated, getAccessToken]); return ; } export default PostPage; ``` Backend-palvelimellasi olet jo poistanut kirjautuneen käyttäjän id:n access tokenista käyttämällä middlewarea: ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // Poista token const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // Raaka Bearer-tunnus, joka on poistettu pyyntöotsikosta createRemoteJWKSet(new URL('https:///oidc/jwks')), // generoi jwks käyttäen Logton palvelimelta saatu jwks_uri { // odotettu tunnuksen emittoija, pitäisi olla Logton palvelimen emittoija issuer: 'https:///oidc', // odotettu yleisön tunniste, pitäisi olla nykyisen API:n resurssi-indikaattori audience: '', } ); // Jos käytät RBAC assert(payload.scope.includes('some_scope')); // mukautettu keskuksen logiikka ctx.auth = { userId: payload.sub, }; return next(); }; ``` Nyt voit käyttää yllä kuvattua `getSupabaseClient`-menetelmää liittämään `userId` JWT:hen, jota käytetään myöhemmissä pyynnöissä Supabaselle. Vaihtoehtoisesti voit luoda middleware-sanonnan luodaksesi Supabase-asiakkaan pyynnöille, joille tarvitsee toimia Supabasen kanssa: ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` Seuraavassa käsittelyvaiheessa voit suoraan kutsua `ctx.supabase`:a kommunikoidaksesi Supabasen kanssa: ```jsx const fetchPosts = async (ctx) => { cosnt { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` Tässä koodissa Supabase palauttaa vain nykyisen käyttäjän postausdatan aiemmin asetettujen politiikkojen perusteella. ### Perinteinen web-sovellus Pääasiallinen ero perinteisen web-sovelluksen ja Native-sovelluksen tai SPA:n välillä on, että perinteiset web-sovellukset renderöivät ja päivittävät sivuja yksinomaan web-palvelimen kautta. Siksi käyttäjätunnuksia hallitaan suoraan web-palvelimen kautta, kun taas Native-sovelluksissa ja SPA:ssa ne sijaitsevat käyttäjän laitteella. Integroidaessasi Logtoa perinteisen web-sovelluksen kanssa Supabasessa voit suoraan hakea kirjautuneen käyttäjän id:n palvelimelta. Esimerkkinä Next.js-projektista, sen jälkeen kun olet integroinut Logton projektiisi seuraamalla [Next.js SDK -opasta](https://docs.logto.io/quick-starts/next-app-router/), voit käyttää Logto SDK:ta hakeaksesi käyttäjätiedot ja luodaksesi vastaavan JWT:n Supabasen kanssa vuorovaikutusta varten. ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export default async function PostPage() { const { cliams } = await getLogtoContext(logtoConfig); // `sub` arvo `cliams` on käyttäjä id. const supabase = getSupabaseClient(cliams.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### Koneelta koneelle -sovellus Koneelta koneelle (M2M) käytetään usein, kun sovelluksesi tarvitsee kommunikoida suoraan resurssipalvelinten kanssa, kuten staattisen palvelun kanssa, joka hakee päivittäiset postaukset jne. Voit käyttää [Koneelta koneelle: Auth Logton kanssa](https://docs.logto.io/quick-starts/m2m/) -opasta koneelta koneelle -sovelluksen todennukseen. Integraatio Supabasen ja koneelta koneelle -sovellusten välillä on samankaltainen kuin Native-sovellusten ja SPA:iden (kuten kuvattaessa "Native-sovellus tai yksisivuinen sovellus"). Se käsittää pääsytokenin hankkimisen Loglosta ja sen jälkeen validoimisen suojatun backend-API:n kautta. On kuitenkin tärkeää huomata, että Native-sovelluksia ja SPA:ita suunnitellaan tyypillisesti loppukäyttäjille, joten saatu käyttäjä-id edustaa itseään. Koneelta koneelle -sovelluksissa pääsytokens edustuu sovellusta itseään, ja pääsytokenin hyötykuorman `sub`-kenttä on M2M-sovelluksen client id, ei tietty käyttäjä. Siksi kehityksessä on ratkaisevan tärkeää erottaa, mitkä tiedot on tarkoitettu M2M-sovelluksille. Lisäksi, jos haluat tietyn M2M-sovelluksen pääsevän Supabaseen koko palvelun puolesta ohittamaan RLS-rajoitukset, voit käyttää Supabaseen `service_role` -salaisuutta luomaan Supabase-asiakkaan. Se on hyödyllistä, kun haluat tehdä joitain hallinnollisia tai automatisoituja tehtäviä, jotka vaativat pääsyn kaikkeen tietokannan dataan ilman rivitason turvallisuuspolitiikkojen rajoittamista, jotka on asetettu yksittäisille käyttäjille. `service_role`-salaisuus löytyy samasta sivusta kuin JWT-salaisuus: Service role secret

Supabase-asiakkaan luodessa käytä `service_role`-salaisuutta, niin tämä asiakas voi käyttää kaikkea tietokannan dataa: ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SCRET = process.env.SUPABASE_SERVICE_ROLE_SCRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SCRET, { // ...options }); ``` ## Yhteenveto Tässä artikkelissa tutkimme Logton ja Supabasen integrointia, valaisten keskeisiä oivalluksia ja kriittisiä integraation näkökulmia. Tutkimme käsitteitä kuten JWT-todennus ja rivitason turvapolitiikat, ohjaten sinua prosessissa, joka mahdollistaa Logton saumattoman inkorporoinnin Supabase-tehoisten sovellustesi joukkoon. Tämän tiedon ansiosta toivomme, että voit luottavaisin mielin parantaa sovelluksesi turvallisuutta ja toiminnallisuutta sekä laajentaa projektejasi lisäominaisuuksilla.