Tworzenie SDK webowego dla Logto w kilka minut

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.

Proces logowania#

Zanim zaczniemy, zrozummy proces logowania w Logto. Składa się on z następujących kroków:

1. Przekierowanie do Logto: Użytkownik jest przekierowywany do strony logowania Logto.
2. Autentykacja: Użytkownik wprowadza swoje dane logowania i autentykuje się w Logto.
3. Przekierowanie z powrotem do Twojej aplikacji: Po pomyślnej autentykacji, użytkownik jest przekierowywany z powrotem do Twojej aplikacji z kodem uwierzytelniania.
4. Wymiana kodów: Twoja aplikacja wymienia kod autoryzacyjny na tokeny.

Krótkie wprowadzenie do @logto/browser#

Pakiet @logto/browser udostępnia klasę LogtoClient, która zapewnia podstawowe funkcje Logto, włączając w to metody do procesu logowania:

1. signIn(): Generuje URL autoryzacji OIDC i przekierowuje do niego.
2. 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.
3. isAuthenticated(): Sprawdza, czy użytkownik jest uwierzytelniony.

Tworzenie SDK React#

W SDK dostarczymy 2 haki: useLogto i useHandleSignInCallback, a także komponent LogtoProvider:

1. useLogto: Hak, który dostarcza metodę signIn do uruchomienia procesu logowania, oraz stan isAuthenticated, który pozwala sprawdzić, czy użytkownik jest uwierzytelniony.
2. 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.

Krok 1: Zainstaluj pakiet#

Po pierwsze, zainstaluj pakiet @logto/browser przy użyciu npm lub innego menedżera pakietów:

Krok 2: Zdefiniuj kontekst React#

Zdefiniuj kontekst dostawcy, zawierający 3 części:

1. Podstawową instancję LogtoClient, która będzie zainicjowana w dostawcy i używana w hakach.
2. Stan uwierzytelnienia.
3. Metodę ustawiania stanu uwierzytelnienia.

Utwórz nowy plik context.tsx i wpisz następujący kod:

Krok 3: Zaimplementuj dostawcę#

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:

Krok 4: Zaimplementuj haki#

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:

Punkty kontrolne: używanie SDK#

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.

Podsumowanie#

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:

1. Logto Browser SDK
2. Logto React SDK