Polski

spoleczne
konektor
bezhaslowe
logowanie
oauth
autoryzacja
integracja

Tworzenie społecznościowego konektora dla Logto

Dowiedz się, jak stworzyć niestandardowy społecznościowy konektor dla Logto w kilku prostych krokach.

Charles

Developer

6/18/2024

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.

Rozpocznij

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.

Wypróbuj Logto Cloud za darmo

Tło#

Co to jest "konektor"?#

Przebieg logowania#

Teraz zaczynamy#

Krok 1: Sklonuj istniejący pakiet konektora#

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

Krok 3: Testuj konektor#

Test jednostkowy#

Test lokalny#

Krok 4 (opcjonalnie): Opublikuj konektor#

Podsumowanie#

Tło#

Co to jest "konektor"?#

Przebieg logowania#

Teraz zaczynamy#

Krok 1: Sklonuj istniejący pakiet konektora#

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

Krok 3: Testuj konektor#

Test jednostkowy#

Test lokalny#

Krok 4 (opcjonalnie): Opublikuj konektor#

Podsumowanie#

Tło

Co to jest "konektor"?

Przebieg logowania

Teraz zaczynamy

Krok 1: Sklonuj istniejący pakiet konektora

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

Krok 3: Testuj konektor

Test jednostkowy

Test lokalny

Krok 4 (opcjonalnie): Opublikuj konektor

Podsumowanie

Tło

Co to jest "konektor"?

Przebieg logowania

Teraz zaczynamy

Krok 1: Sklonuj istniejący pakiet konektora

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

Krok 3: Testuj konektor

Test jednostkowy

Test lokalny

Krok 4 (opcjonalnie): Opublikuj konektor

Podsumowanie