Dowiedz się, jak stworzyć własne SDK dla Logto przy użyciu `@logto/browser`.
Logto, platforma autoryzacji typu open-source, oferuje wiele oficjalnych SDK, które mają na celu ułatwienie integracji z różnymi ramkami i platformami. Niemniej jednak, nadal wiele platform nie posiada oficjalnych SDK.
Aby zapełnić tę lukę, Logto oferuje podstawowy pakiet @logto/browser, zaprojektowany aby pomóc deweloperom w tworzeniu własnych SDK, dostosowanych do konkretnych wymagań. Ten pakiet implementuje podstawowe funkcje Logto, niezależnie od konkretnej ramy czy platformy, pod warunkiem, że obsługuje JavaScript i działa w środowisku przeglądarki.
W tym przewodniku pokażemy Ci, jak krok po kroku stworzyć React SDK przy użyciu @logto/browser, które będzie implementować proces logowania. Możesz podjąć te same kroki, tworząc SDK dla każdej innej platformy opartej na JavaScript, która działa w przeglądarce.
Zanim zaczniemy, zrozummy proces logowania w Logto. Składa się on z następujących kroków:
@logto/browserPakiet @logto/browser udostępnia klasę LogtoClient, która zapewnia podstawowe funkcje Logto, włączając w to metody do procesu logowania:
signIn(): Generuje URL autoryzacji OIDC i przekierowuje do niego.handleSignInCallback(): Sprawdza i przetwarza URL wywołania zwrotnego, ekstrahuje kod autoryzacyjny, a następnie wymienia kod na tokeny poprzez wywołanie końcówki token.isAuthenticated(): Sprawdza, czy użytkownik jest uwierzytelniony.W SDK dostarczymy 2 haki: useLogto i useHandleSignInCallback, a także komponent LogtoProvider:
useLogto: Hak, który dostarcza metodę signIn do uruchomienia procesu logowania, oraz stan isAuthenticated, który pozwala sprawdzić, czy użytkownik jest uwierzytelniony.useHandleSignInCallback: Hak, który obsługuje URL wywołania zwrotnego i wymienia kod autoryzacyjny na tokeny, kończąc proces logowania.Aby użyć SDK, wystarczy opakować swoją aplikację komponentem LogtoProvider i użyć haków do sprawdzania stanu uwierzytelnienia, logowania i obsługi wywołań zwrotnych.
Po pierwsze, zainstaluj pakiet @logto/browser przy użyciu npm lub innego menedżera pakietów:
Zdefiniuj kontekst dostawcy, zawierający 3 części:
LogtoClient, która będzie zainicjowana w dostawcy i używana w hakach.Utwórz nowy plik context.tsx i wpisz następujący kod:
Mając gotowy kontekst, zaimplementujmy dostawcę. Dostawca zainicjuje instancję LogtoClient, sprawdzi, czy użytkownik jest uwierzytelniony, i dostarczy kontekst jego dzieciom.
Utwórz nowy plik provider.tsx:
Teraz zaimplementujemy haki.
useLogto: W tym haku używamy kontekstu, aby uzyskać instancję LogtoClient, i dostarczamy metodę signIn oraz stan isAuthenticated. Możesz kontynuować dodawanie więcej metod do tego haka.useHandleSignInCallback: Ten hak odczyta url wywołania zwrotnego z przeglądarki, ekstrahuje kod uwierzytelniania i wymienia go na tokeny. Ustawi również stan uwierzytelnienia na true po uwierzytelnieniu użytkownika.Utwórz nowy plik hooks.ts i wpisz następujący kod:
Teraz stworzyłeś React SDK dla Logto. Możesz go użyć w swojej aplikacji, owijając aplikację komponentem LogtoProvider i używając haków do sprawdzania stanu uwierzytelnienia, logowania i obsługi wywołań zwrotnych. Możesz sprawdzić oficjalny projekt próbki React tutaj.
W tym przewodniku pokazaliśmy Ci, jak stworzyć React SDK dla Logto implementujące podstawowy proces uwierzytelniania. Dostarczone tutaj SDK to podstawowy przykład. Możesz rozszerzyć go, dodając więcej metod i funkcjonalności, aby spełnić potrzeby Twojej aplikacji.
Możesz podjąć te same kroki, aby stworzyć SDK dla jakiejkolwiek innej platformy opartej na JavaScript, która działa w przeglądarce.
Materiały: