Näyttää, miten suojata Netlify-verkkosovelluksia ja serverless-toimintoja Logton autentikaatiolla, mukana lähdekoodiesimerkkejä ja live-esikatselu.
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:
Tutustu verkkodemoesikatseluun.
Näitä tarvitset ennen tämän oppaan aloittamista:
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.
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.
Aloita Logto-autentikaatiolla:
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.
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:
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:
https://api.backend.com)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.
Nyt, ota sovelluksesi käyttöön Netlifyssä ja kokeile sitä! Voit viitata verkkodemoesikatseluun täällä.
https://<your-site-name>.netlify.appapi/hello-päätepisteestä.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.