Rozwiązanie uwierzytelniania full-stack z Logto na Netlify: Ochrona aplikacji webowych i funkcji bezserwerowych

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.

Sprawdź podgląd demo online.

Wymagania wstępne#

Oto, co musisz mieć ustawione przed rozpoczęciem tego tutorialu:

• Konto Netlify
• Konto Logto Cloud lub samodzielnie hostowaną instancję Logto.

Utwórz aplikację React za pomocą Vite#

Postępuj zgodnie z Przewodnikiem rozpoczęcia pracy z Vite, aby utworzyć aplikację React.

Postępuj zgodnie z przewodnikiem tworzenia i wybierz preferowany stos technologiczny. W tym artykule wybieramy React + TypeScript.

Następnie wejdź do katalogu głównego projektu, zainstaluj zależności zgodnie z przewodnikiem i uruchom aplikację.

Wdrożenie aplikacji za pomocą Netlify#

Skorzystaj z przewodników Rozpocznij pracę z Netlify, aby wdrożyć swoją aplikację.

Po wdrożeniu aplikacji zobaczysz ją na żywo pod adresem https://<twoja-nazwa-strony>.netlify.app.

Zanotuj ten URL, ponieważ będziemy go potrzebować później do skonfigurowania Logto.

Integracja Logto z Twoją aplikacją#

Aby rozpocząć pracę z uwierzytelnianiem Logto:

1. Przejdź do strony "Aplikacje" w konsoli Logto
2. Utwórz nową aplikację
   • Wybierz swoją frontendową platformę (w naszym przykładzie React)
   • Uwaga: możesz utworzyć dowolną aplikację jedno-stronicową (SPA) lub natywną na podstawie swoich potrzeb
3. Postępuj zgodnie z przewodnikiem integracji dostarczonym w:
   • Wbudowanym przewodniku konsoli Logto lub
   • Oficjalnym przewodniku integracji uwierzytelnienia React
4. Z informacji szczegółowych o aplikacji zanotuj:
   • Twój identyfikator aplikacji
   • 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:

Zabezpieczenie funkcji Netlify przy użyciu Logto#

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:

1. 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

2. Skonfiguruj swoją aplikację do używania tego zasobu API, dodając identyfikator do zmiennych środowiskowych Netlify:

3. Zaktualizuj swoją konfigurację Logto, aby zawierała ten zasób API:

4. 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.

Testowanie naszego demo#

Teraz wdroż aplikację na Netlify i przetestuj ją! Możesz zobaczyć podgląd demo online tutaj.

1. Odwiedź stronę na żywo pod adresem https://<twoja-nazwa-strony>.netlify.app
2. Kliknij przycisk "Zaloguj się" na pasku nawigacyjnym
3. Zaloguj się za pomocą konta użytkownika Logto, a zobaczysz, że jesteś zalogowany.
4. Kliknij kartę "Chroniony Zasób" na pasku nawigacyjnym, a zostaniesz przekierowany na stronę chronioną.
5. Kliknij przycisk "Zobacz chroniony zasób", a zobaczysz dane odpowiedzi z punktu końcowego api/hello.
6. Kliknij przycisk "Wyloguj się" na pasku nawigacyjnym, a zostaniesz przekierowany na stronę główną.

Podsumowanie#

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.