Täysipinoinen autentikaatioratkaisu Logton kanssa Netlifyssä: Suojaa verkkosovellukset ja serverless-toiminnot

Netlify on tehokas alusta modernien verkkoprojektien käyttöönottoon ja isännöintiin, tarjoten saumatonta Git-integraatiota, automatisoituja rakennelmia ja serverless-toimintoja nopeaa ja skaalautuvaa kehitystyötä varten.

Tässä kattavassa oppaassa opit:

• Toteuttamaan autentikaation yksisivuisessa sovelluksessa (SPA) käyttäen Logtoa Netlifyssä, esimerkkinä Vite + React
• Suojaamaan Netlify-serverless-toiminnot Logto-autentikaation avulla
• Ota käyttöön tuotantovalmiin sovellus referenssitoteutuksemme avulla: example-vite-react-logto

Tutustu verkkodemoesikatseluun.

Esivaatimukset#

Näitä tarvitset ennen tämän oppaan aloittamista:

• Netlify-tili
• Logto Cloud -tili tai itseisännöity Logto-instanssi

Luo React-sovellus Viten avulla#

Noudata Viten Aloitusopasta React-sovelluksen luomiseksi.

Seuraapa luomisopasta ja valitse haluamasi teknologiakasa. Tässä artikkelissa valitsemme React + TypeScript.

Sitten siirry projektin juurihakemistoon, asenna riippuvuudet ohjeen mukaan ja suorita sovellus.

Ota sovellus käyttöön Netlifyssä#

Noudata Get started with Netlify -oppaita sovelluksen käyttöönottoon.

Kun olet ottanut toimintasi käyttöön, voit nähdä suoran sivuston osoitteessa https://<your-site-name>.netlify.app.

Merkitse tämä URL-muistiin, sillä tarvitsemme sitä myöhemmin Logton asetuksissa.

Integroi Logto sovellukseesi#

Aloita Logto-autentikaatiolla:

1. Siirry "Applikaatiot"-sivulle Logto-konsolissa
2. Luo uusi applikaatio
   • Valitse käyttöliittymäkirjasto (esimerkissämme React)
   • Huomaa: Voit luoda minkä tahansa Yksisivuisen sovelluksen (SPA) tai paikallissovelluksen tarpeidesi mukaan
3. Seuraa joko:
   • Logto Consolen sisäänrakennettua opasta, tai
   • Virallista React-autentikaatiointegrointiopasta
4. Applikaation yksityiskohtasivulta, ota huomioon:
   • Applikaatiosi ID
   • Logton päätepiste (löytyy "Endpoints & Credentials" -osiosta, tyypillisesti muodossa https://<your-instance>.logto.app/) Nämä tunnukset ovat vaadittuja seuraavissa vaiheissa.

Huomaa, että demossamme käytämme /callback-reittiä käsittelemään Logton kirjautumisen uudelleenohjausta. Uudelleenohjaus-URI:t Logtossa on määritettävä https://<your-site-name>.netlify.app/callback. Kun käyttäjät kirjautuvat ulos, palaamme kotisivulle, joten asetamme kirjautumisen jälkeiset uudelleenohjaus-URI:t https://<your-site-name>.netlify.app.

Määritä sitten luodun Logto-applikaation tiedot Netlifyn ympäristömuutujiin (Verkkosivustosi -> sivuston asetukset -> Ympäristömuuttujat):

Sitten käytämme näitä konfiguraatioita frontend-projektissamme:

Voit katsella lopullisen integroidun koodin täältä: example-vite-react-logto.

Huomaa, että kun otamme käyttöön Netlifyssä ja kirjaudumme sisään Logton kautta, URL-mme ei automaattisesti uudelleenohjaa Callback-sivullemme. Tämä johtuu siitä, että Netlify ei oletuksena tue asiakaspohjaista reititystä yksisivuisissa sovelluksissa (SPA).

Kun vierailet poluilla kuten /callback, Netlify yrittää löytää vastaavat tiedostot palvelimelta, sen sijaan että se ohjaisi pyynnön React-sovellukseesi.

Tässä vaiheessa meidän on luotava _redirects-tiedosto julkiseen hakemistoon Netlify-projektistasi kertomaan Netlifylle uudelleenohjata kaikki pyynnöt index.html-tiedostoon:

Vaihtoehtoisesti voit luoda netlify.toml-tiedoston projektisi juureen:

Nyt reitityksen pitäisi toimia oikein.

Luo backend-API:t Netlify-toiminnoilla#

Netlify Functions tarjoaa yksinkertaisen mutta tehokkaan tavan rakentaa backend-API:ita. Netlify Functionsin avulla voimme kirjoittaa palvelinpuolen logiikkaa ilman huolta perinteisestä palvelimen konfiguraatiosta ja ylläpidosta.

Nämä toiminnot ovat versioituja, rakennettuja, ja otettu käyttöön yhdessä verkkosivustosi kanssa, tehden frontendin ja backendin kehitys- ja käyttöönottoprosessista saumatonta.

Aloitetaan backend-API:iden rakentaminen käyttämällä Netlify-toimintoja.

Ensin meidän on luotava functions-hakemisto projektin netlify-hakemiston alle ja sitten luotava hello.ts-tiedosto:

Kun vierailemme https://<your-site-name>.netlify.app/.netlify/functions/hello, tämä toiminto kutsutaan ja palauttaa "Hello world!"".

Jos mielestäsi polku /.netlify/functions/hello näyttää hieman oudolta, voit asettaa uudelleenohjauksen kutsumaan toimintoa lisäämällä uudelleenohjaussäännön public/_redirects-tiedostoon:

Tällä tavalla, kun vierailemme https://<your-site-name>.netlify.app/api/hello, se kutsuu toimintoa ja palauttaa "Hello world!". Tämä on itse asiassa yleinen tapa rakentaa API:ita käyttämällä Netlify-toimintoja.

Ja voimme käyttää tätä API:ia frontend-projektissamme käyttäen fetch-komentoa:

Suojaa Netlify-toiminnot Logton avulla#

Nyt kun meillä on backend-API, meidän on varmistettava, että vain todennetut käyttäjät voivat käyttää sitä. Suojaamme Netlify-toimintomme Logton autentikaatiomekanismilla.

Suojaa API-päätepisteemme:

1. Luo API Resource Logto Consolessa edustamaan backend-API:amme:

• Mene "API Resources"-kohtaan Logto Consolessa ja luo uusi API
• Aseta nimi ja API-tunniste (esim. https://api.backend.com)
• Huomaa API-tunniste API-resurssin yksityiskohtasivulta, tarvitsemme sen myöhemmin

2. Konfiguroi sovelluksesi käyttämään tätä API-resurssia lisäämällä tunniste Netlify-ympäristömuuttujiin:

3. Päivitä Logto-konfiguraatiosi sisältämään tämä API-resurssi:

4. Kun teet pyyntöjä suojatuille päätepisteille, käyttöliittymäsi täytyy sisältää kelvollinen käyttöoikeustunnus. Näin voit pyytää ja käyttää sitä:

Nyt toteutamme tunnuksen validoimisen backendissämme varmistaaksemme, että vain pyynnöt, joissa on kelvollinen käyttöoikeustunnus, käsitellään.

Ensin meidän täytyy asentaa jose-riippuvuus, joka auttaa meitä tarkistamaan JWT-tunnuksen:

Sitten voimme toteuttaa tunnuksen validoimisen backendissamme:

Nyt, päivitetään Netlify-toimintoamme käyttämään verifyLogtoToken-funktiota:

Siinä kaikki! Nyt Netlify-toimintomme on suojattu Logton avulla ja vain pyynnöt, joissa on kelvollinen käyttöoikeustunnus, käsitellään.

Testaa demomme#

Nyt, ota sovelluksesi käyttöön Netlifyssä ja kokeile sitä! Voit viitata verkkodemoesikatseluun täällä.

1. Vieraile suorassa sivustossa https://<your-site-name>.netlify.app
2. Klikkaa navigaatiopalkissa "Kirjaudu sisään" -painiketta
3. Kirjaudu sisään Logto-käyttäjätilillä, ja näet, että olet kirjautunut sisään.
4. Klikkaa navigaatiopalkissa "Suojaamaton resurssi" -välilehteä, ja sinut ohjataan suojatulle sivulle.
5. Klikkaa "Näytä suojattu resurssi" -painiketta, ja näet vastaustiedot api/hello-päätepisteestä.
6. Klikkaa navigaatiopalkissa "Kirjaudu ulos" -painiketta ja sinut ohjataan takaisin kotisivulle.

Yhteenveto#

Tässä oppaassa esitetään, kuinka integroida Logto-autentikaatio verkkosovellukseen, joka on otettu käyttöön Netlifyssä.

Konfiguroimalla Logto-käyttäjä- ja API-resursseja, toteutimme frontend-autentikaation ja suojatut Netlify-toimintopäätteen.

Tarkempaa pääsynhallintaa varten voit hyödyntää Logton RBAC (Role-Based Access Control) ominaisuuksia määrittelemällä rooleja ja oikeuksia Logto Consolessa ja validoimalla käyttäjärooleja Netlify Functionsissa.