Wprowadź własny interfejs logowania do Logto Cloud

Tło#

Logto zapewnia gotowy interfejs logowania, który obejmuje wszystkie funkcje Logto, w tym logowanie, rejestrację, odzyskiwanie hasła, jednokrotne logowanie (SSO) i więcej. Użytkownicy mogą również dostosować wygląd interfejsu logowania, korzystając z funkcji "Custom CSS".

Jednak niektórzy użytkownicy chcą głębiej dostosować swoje doświadczenie logowania (zarówno UI, jak i przebiegi autoryzacji), aby pasowały do ich marki i specyficznych wymagań biznesowych. Słyszeliśmy Was! I z przyjemnością ogłaszamy, że funkcja "Bring your own UI" jest teraz dostępna w Logto Cloud.

W tym samouczku przeprowadzimy Cię krok po kroku, jak stworzyć i wdrożyć własny interfejs logowania w Logto Cloud.

Wymagania wstępne#

Zanim zaczniesz, upewnij się, że masz:

• Konto w Logto Cloud z planem subskrypcyjnym
• Aplikację zintegrowaną z Logto (Szybki start)
• Zainstalowane Logto tunnel CLI
• Podstawową wiedzę na temat HTML, CSS i JavaScript

Dla uproszczenia użyjemy klasycznego sposobu logowania "nazwa użytkownika i hasło" w poniższych krokach. Pamiętaj, aby zmienić swoją metodę logowania w Logto Console.

Stwórz własny interfejs logowania#

Minimalnym wymogiem dla interfejsu logowania jest posiadanie pliku index.html, z formularzem logowania zawierającym co najmniej pole do wprowadzenia nazwy użytkownika, pole do wprowadzenia hasła i przycisk wysyłania. Użyłem ChatGPT, aby wygenerować przykładowy kod HTML i oto moja różowa urocza strona logowania.

Pominąłem style CSS dla uproszczenia, a oto jak wygląda prosty kod HTML:

Możesz również zacząć od szablonu z ulubionego frameworka front-endowego, takiego jak Create React App, Next.js lub Vue CLI.

Ponieważ Logto jest open source, inną rekomendacją jest sklonowanie projektu Logto Experience i modyfikacja kodu, aby dopasować go do swoich potrzeb. To pełnofunkcyjny, wbudowany interfejs logowania Logto, napisany w React i TypeScript.

Konfiguracja Logto tunnel CLI#

Logto tunnel CLI to narzędzie, które nie tylko serwuje twoje strony HTML, ale także pozwala na interakcję z API Logto Experience z twoimi stronami HTML w lokalnym środowisku deweloperskim.

Zakładając, że twoja strona index.html znajduje się w /path/to/your/custom-ui, a twój Logto tenant ID to foobar, możesz uruchomić komendę w ten sposób:

Lub, jeśli korzystasz z frameworka UI, który ma wbudowany serwer deweloperski, a twoja strona jest serwowana pod adresem http://localhost:4000, możesz uruchomić komendę w ten sposób:

Po uruchomieniu komendy, usługa tunelowania zostanie uruchomiona na twojej lokalnej maszynie http://localhost:9000/.

Uruchom logowanie z swojej aplikacji#

Przejdź do aplikacji, którą utworzyłeś wcześniej, i zmień punkt końcowy Logto z https://foobar.logto.app/ na http://localhost:9000/ w swojej konfiguracji SDK Logto.

Posłużmy się przykładowym projektem Reacta:

Kliknij przycisk "Zaloguj się" w swojej aplikacji. Zamiast widzieć wbudowany interfejs logowania Logto, zostaniesz teraz przekierowany na swoją niestandardową stronę logowania.

Interakcja z API Logto Experience#

W tym kroku będziemy współpracować z API Logto Experience w twoim niestandardowym interfejsie. Najpierw utwórz plik script.js i dodaj odwołanie w swoim index.html.

Włóż następujący kod do swojego pliku script.js.

Ten skrypt zakończy przepływ logowania z nazwą użytkownika i hasłem z pomocą tych API:

• PUT /api/experience - Rozpocznij interakcję logowania
• POST /api/experience/verification/password - Sprawdź nazwę użytkownika i hasło
• POST /api/experience/identification - Zidentyfikuj użytkownika dla bieżącej interakcji
• POST /api/experience/submit - Wyślij interakcję logowania

Odwiedź dokumentację API Logto Experience aby uzyskać więcej szczegółów.

Przetestuj swoją niestandardową stronę logowania#

1. Przejdź do swojej aplikacji i kliknij przycisk "Zaloguj się".
2. Powinieneś zostać przekierowany na swoją niestandardową stronę logowania pod adresem http://localhost:9000/.
3. Wprowadź nazwę użytkownika i hasło, a następnie kliknij przycisk "Submit".
4. Jeśli wszystko zostało poprawnie skonfigurowane, powinieneś zostać przekierowany z powrotem do swojej aplikacji z uwierzytelnionymi informacjami użytkownika.

Wdrożenie niestandardowego interfejsu logowania do Logto Cloud#

Gdy zakończysz tworzenie i testowanie swojego niestandardowego interfejsu logowania lokalnie, możesz go wdrożyć w Logto Cloud. Po prostu utwórz plik zip ze swoim folderem UI i prześlij go na sekcję "Niestandardowy UI" w Logto Console.

Po przesłaniu, zapisz zmiany, a Twój niestandardowy interfejs logowania zostanie uruchomiony w Twoim tenant Logto Cloud, zastępując wbudowane doświadczenie logowania Logto.

Na koniec wróć do swojej aplikacji i zmień URI punktu końcowego z powrotem na swój punkt końcowy chmury Logto: https://foobar.logto.app/. Tym razem możesz zatrzymać usługę tunelowania Logto, a Twoja aplikacja powinna teraz działać bezpośrednio z niestandardowym interfejsem hostowanym online.

Podsumowanie#

W tym samouczku pokazaliśmy Ci, jak zaimplementować i wdrożyć własny niestandardowy interfejs logowania do Logto Cloud.

Dzięki tej funkcji możesz teraz głęboko dostosować swój interfejs logowania i przepływy autoryzacyjne, aby pasowały do Twojego brandingu i specyficznych wymagań biznesowych.

Szczęśliwego kodowania! 🚀