Tworzenie społecznościowego konektora dla Logto

Tło#

Logowanie społecznościowe to konieczność w nowoczesnych aplikacjach. Upraszcza proces rejestracji użytkownika, poprawia doświadczenie użytkownika i zwiększa jego zaangażowanie oraz wskaźnik konwersji. W Logto używamy konektorów społecznościowych do logowania się za pomocą zewnętrznego dostawcy tożsamości społecznościowej.

Co to jest "konektor"?#

Konektor to mały program, który łączy Logto z zewnętrzną usługą. Odpowiada za zarządzanie procesem logowania, wymianę tokenów oraz pobieranie informacji o użytkowniku od zewnętrznej usługi.

Logto oferuje szeroki zestaw oficjalnych konektorów, które upraszczają integrację z różnymi platformami społecznościowymi. Na dzień dzisiejszy mamy już ponad 30 konektorów, z których ponad 10 jest opracowanych przez naszą społeczność open-source. Oczekujemy, że liczba ta będzie szybko rosnąć w przyszłości.

Jednak wiemy, że nadal istnieje wiele innych platform, które nie mają jeszcze oficjalnego wsparcia Logto. Na szczęście, jako platforma open-source, zawsze możesz łatwo stworzyć własne niestandardowe konektory. W tym poście przeprowadzimy cię przez proces tworzenia niestandardowego społecznościowego konektora dla Logto w kilku prostych krokach.

Przebieg logowania#

Zanim zaczniemy, zrozummy, jak działa przepływ logowania społecznościowego w Logto.

Teraz zaczynamy#

Najszybszym sposobem na rozpoczęcie pracy jest skopiowanie kodu z istniejącego oficjalnego konektora i dostosowanie go do swoich potrzeb. Weźmy za przykład konektor GitHub.

Krok 1: Sklonuj istniejący pakiet konektora#

W folderze źródeł konektora znajdziesz następujące pliki:

• index.ts: Główny plik wejściowy konektora.
• constant.ts: Stałe używane w konektorze.
• types.ts: Typy TypeScript używane w konektorze.
• index.test.ts: Przypadki testowe konektora.
• mock.ts: Dane mockowe używane w przypadkach testowych konektora.

Oprócz tych plików musisz dostarczyć również plik README.md opisujący konektor, plik logo.svg (opcjonalnie logo-dark.svg dla lepszego doświadczenia w trybie ciemnym) oraz plik package.json do zdefiniowania informacji o pakiecie npm.

Krok 2: Zmodyfikuj główny plik wejściowy (index.ts)#

W pliku index.ts znajdziesz większość logiki konektora. Zazwyczaj musisz zaimplementować 4 funkcje:

• getAuthorizationUri: Generowanie URI autoryzacji dla zewnętrznej platformy społecznościowej. Dla GitHub, będzie to: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Zajrzyj do dokumentacji deweloperskiej swojej platformy społecznościowej, aby uzyskać poprawne URI.
• authorizationCallbackHandler: Zabezpiecza wartości zwróconych parametrów w URI zwrotnym autoryzacji, wyodrębnia kod autoryzacyjny code i obsługuje ewentualne błędy.
• getAccessToken: Wymienia kod autoryzacyjny code na token dostępu.
• getUserInfo: Pobiera informacje o użytkowniku ze zewnętrznej platformy społecznościowej za pomocą tokenu dostępu.

Większość innych wspólnych logik została już zaimplementowana w zestawie konektora Logto, co powinno ułatwić twoją pracę.

Na końcu pliku, musisz po prostu wyeksportować obiekt konektora, korzystając z tej samej struktury kodu co konektor GitHub.

Krok 3: Testuj konektor#

Test jednostkowy#

Najpierw napisz kilka przypadków testowych jednostkowych i upewnij się, że podstawowe funkcje działają zgodnie z oczekiwaniami.

Test lokalny#

• Skonfiguruj Logto w swoim lokalnym środowisku: Logto oferuje kilka sposobów na uruchomienie lokalne, możesz użyć CLI, dockera, a nawet skompilować kod źródłowy. Sprawdź dokumentację po więcej szczegółów.

• Połącz swój niestandardowy konektor z instancją Logto: Użyj CLI, aby stworzyć dowiązanie symboliczne konektora do instancji Logto. Więcej szczegółów.

• Po połączeniu konektora, powinieneś zobaczyć go w folderze <logto-root-path>/packages/core/connectors.

• Zrestartuj swoją instancję Logto, przejdź do Konsoli Administracyjnej Logto, powinieneś zobaczyć go na liście konektorów społecznościowych.

• Skonfiguruj swój konektor w sekcji "Doświadczenie logowania" -> "Rejestracja i logowanie" -> "Logowanie społecznościowe". Wypróbuj go w naszej aplikacji demo z funkcją "Podgląd na żywo".

  

Krok 4 (opcjonalnie): Opublikuj konektor#

Możesz opublikować swój konektor na NPM i podzielić się nim ze społecznością. Możesz również przesłać PR i przyczynić się do oficjalnego repozytorium GitHub Logto, aby uczynić go oficjalnie wspieranym konektorem. Oficjalne konektory będą utrzymywane przez zespół deweloperski Logto i będą dostępne zarówno dla użytkowników open-source, jak i Logto Cloud.

Podsumowanie#

Tworzenie niestandardowego społecznościowego konektora dla Logto nie jest tak trudne, jak mogłoby się wydawać. Dzięki zestawowi konektorów Logto i dobrym przykładom kodu, możesz łatwo stworzyć konektor w kilku prostych krokach.

A przyczyniając się do rozwoju swojego konektora, możesz pomóc większej liczbie użytkowników cieszyć się platformą społecznościową, którą wniesiesz do rodziny Logto.