Rozwiązanie uwierzytelniania full-stack z Logto na Netlify: Ochrona aplikacji webowych i funkcji bezserwerowych
Pokazuje, jak zabezpieczyć aplikacje webowe Netlify i funkcje bezserwerowe za pomocą uwierzytelniania Logto, wraz z przykładami kodu źródłowego i podglądem demo.
YijunDeveloper
Przestań tracić tygodnie na uwierzytelnianie użytkowników
Uruchamiaj bezpieczne aplikacje szybciej z Logto. Zintegruj uwierzytelnianie użytkowników w kilka minut i skup się na swoim głównym produkcie.
Netlify to potężna platforma do wdrażania i hostowania nowoczesnych projektów webowych, oferująca bezproblemową integrację z Git, zautomatyzowane kompilacje i funkcje bezserwerowe dla szybkiego i skalowalnego procesu rozwoju.
W tym kompleksowym przewodniku dowiesz się, jak:
Zaimplementować uwierzytelnianie w aplikacji jedno-stronicowej (SPA) przy użyciu Logto na Netlify, pokazane na przykładzie Vite + React.
Zabezpieczyć funkcje bezserwerowe Netlify za pomocą uwierzytelniania Logto.
Wdrożyć aplikację gotową do produkcji, korzystając z naszego przykładowego wdrożenia: example-vite-react-logto.
Endpoint Logto (znajduje się w sekcji "Endpoints & Credentials", zazwyczaj w formacie https://<twoja-instancja>.logto.app/)
Te dane będą wymagane w kolejnych krokach.
Pamiętaj, że w naszym demo używamy ścieżki /callback do obsługi przekierowania po zalogowaniu Logto. URI przekierowania w Logto muszą być skonfigurowane jako https://<twoja-nazwa-strony>.netlify.app/callback.
Po wylogowaniu użytkowników wracamy na stronę główną, więc ustawiamy URI przekierowania po wylogowaniu na https://<twoja-nazwa-strony>.netlify.app.
Następnie ustaw informacje o utworzonej aplikacji Logto w zmiennych środowiskowych Netlify (Twoja strona -> konfiguracja strony -> Zmienne środowiskowe):
Następnie używamy tych konfiguracji w naszym projekcie frontendowym:
Możesz zobaczyć zintegrowany kod końcowy tutaj: example-vite-react-logto.
Zwróć uwagę, że przy wdrożeniu na Netlify i logowaniu przez Logto, nasz URL nie przekierowuje automatycznie na stronę Callback. Dzieje się tak, ponieważ Netlify domyślnie nie obsługuje routingu po stronie klienta dla aplikacji jedno-stronicowych (SPA).
Gdy odwiedzasz takie ścieżki jak /callback, Netlify będzie próbował znaleźć odpowiadające im pliki na serwerze, zamiast przekazywać żądanie do twojej aplikacji React.
W tym momencie musimy utworzyć plik _redirects w katalogu publicznym projektu Netlify, aby poinformować Netlify, że wszystkie żądania mają być przekierowane do index.html:
Alternatywnie, możesz utworzyć plik netlify.toml w katalogu głównym projektu:
Teraz nasz routing powinien działać poprawnie.
Tworzenie API backendowych za pomocą funkcji Netlify#
Funkcje Netlify zapewniają prosty, ale potężny sposób na budowanie API backendowych. Dzięki funkcjom Netlify możemy pisać logikę po stronie serwera bez martwienia się o tradycyjną konfigurację i utrzymanie serwera.
Funkcje te są kontrolowane przez system wersji, budowane i wdrażane razem z twoją stroną, co sprawia, że proces rozwoju i wdrażania jest bezproblemowy między frontendem a backendem.
Rozpocznijmy budowanie naszych API backendowych przy użyciu funkcji Netlify.
Najpierw musimy utworzyć katalog functions w katalogu netlify projektu, a następnie utworzyć plik hello.ts:
Gdy odwiedzimy https://<twoja-nazwa-strony>.netlify.app/.netlify/functions/hello, ta funkcja zostanie wywołana i zwróci "Hello world!".
Jeśli uważasz, że ścieżka /.netlify/functions/hello wygląda trochę dziwnie, możesz skonfigurować przekierowanie do wywołania funkcji, dodając regułę przekierowania w pliku public/_redirects:
W ten sposób, gdy odwiedzimy https://<twoja-nazwa-strony>.netlify.app/api/hello, zostanie wywołana nasza funkcja i zwróci "Hello world!". Jest to powszechny sposób budowania API przy użyciu funkcji Netlify.
Możemy uzyskać dostęp do tego API w naszym projekcie frontendowym używając fetch:
Teraz, gdy mamy API backendowe, musimy upewnić się, że tylko uwierzytelnieni użytkownicy mają do niego dostęp. Zabezpieczymy nasze funkcje Netlify za pomocą mechanizmu uwierzytelnienia Logto.
Aby chronić nasze punkty końcowe API:
Utwórz zasób API w konsoli Logto, aby reprezentował nasze API backendowe:
Przejdź do "Zasoby API" w konsoli Logto i utwórz nowe API
Ustaw nazwę i identyfikator API (np. https://api.backend.com)
Zanotuj identyfikator API na stronie szczegółów zasobu API, ponieważ będzie on potrzebny później
Skonfiguruj swoją aplikację do używania tego zasobu API, dodając identyfikator do zmiennych środowiskowych Netlify:
Zaktualizuj swoją konfigurację Logto, aby zawierała ten zasób API:
Podczas wykonywania żądań do chronionych punktów końcowych, twój frontend musi zawierać prawidłowy token dostępu. Oto, jak go uzyskać i używać:
Teraz zaimplementujmy walidację tokena w naszym backendzie, aby upewnić się, że tylko żądania z prawidłowymi tokenami dostępu są przetwarzane.
Najpierw musimy zainstalować zależność jose, która pomoże nam zweryfikować token JWT:
Następnie możemy zaimplementować walidację tokena w naszym backendzie:
Teraz zaktualizujmy naszą funkcję Netlify, aby używała funkcji verifyLogtoToken:
I to wszystko! Teraz nasza funkcja Netlify jest chroniona przez Logto i tylko żądania z prawidłowymi tokenami dostępu będą przetwarzane.
Ten przewodnik pokazuje, jak zintegrować uwierzytelnianie Logto z aplikacją webową wdrożoną na Netlify.
Dzięki skonfigurowaniu aplikacji Logto i zasobów API wdrożyliśmy uwierzytelnianie frontendowe i zabezpieczyliśmy punkty końcowe funkcji Netlify.
Dla bardziej szczegółowej kontroli dostępu możesz korzystać z możliwości Logto RBAC (Role-Based Access Control), definiując role i uprawnienia w konsoli Logto i weryfikując role użytkowników w funkcjach Netlify.
