Ten samouczek poprowadzi Cię przez proces tworzenia i wdrażania własnego interfejsu logowania do Logto Cloud.
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.
Zanim zaczniesz, upewnij się, że masz:
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.
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.
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/.
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.
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ę logowaniaPOST /api/experience/verification/password - Sprawdź nazwę użytkownika i hasłoPOST /api/experience/identification - Zidentyfikuj użytkownika dla bieżącej interakcjiPOST /api/experience/submit - Wyślij interakcję logowaniaOdwiedź dokumentację API Logto Experience aby uzyskać więcej szczegółów.
http://localhost:9000/.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.
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! 🚀