Przynieś swój 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 wiele innych. Użytkownicy mogą również dostosować wygląd interfejsu logowania przy użyciu naszej funkcji "Custom CSS".

Jednak niektórzy użytkownicy wciąż chcą głęboko dostosować swoje doświadczenie logowania (zarówno interfejs, jak i przepływy uwierzytelniania), aby pasowało do ich brandingu i specyficznych wymagań biznesowych. Usłyszeliśmy was! I z przyjemnością ogłaszamy, że funkcja "Przynieś swój własny interfejs" jest już dostępna w Logto Cloud.

W tym poradniku przeprowadzimy Cię przez kroki tworzenia i wdrażania własnego interfejsu logowania do Logto Cloud.

Wymagania wstępne#

Zanim zaczniesz, upewnij się, że masz:

• Konto Logto Cloud z planem subskrypcyjnym
• Aplikację zintegrowaną z Logto (Quick-starty)
• Zainstalowany Logto tunnel CLI
• Podstawową znajomość HTML, CSS i JavaScript

Dla uproszczenia w kolejnych krokach użyjemy klasycznej metody logowania „nazwa użytkownika i hasło”. Pamiętaj, aby zmienić metodę logowania w Logto Console.

Twórz własny interfejs logowania#

Minimalnym wymogiem dla interfejsu logowania jest posiadanie pliku index.html, z formularzem logowania, który zawiera co najmniej pole nazwy użytkownika, pole hasła i przycisk zatwierdzenia. Użyłem ChatGPT do wygenerowania przykładowego HTML-a, i oto mam tą uroczą różową stronę logowania.

Dla uproszczenia pominąłem style CSS, a tak wygląda prosty HTML:

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

Ponieważ Logto jest open source, innym poleceniem jest sklonowanie Projektu Logto Experience i modyfikacja kodu, aby odpowiadał Twoim potrzebom. To pełna wersja wbudowanego interfejsu logowania w Logto, napisanego w React i TypeScript.

Skonfiguruj Logto tunnel CLI#

Logto tunnel CLI to narzędzie, które nie tylko serwuje strony HTML, ale także pozwala na interakcję ze środowiskiem API Logto z Twoich stron HTML w środowisku lokalnym.

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

Lub, jeśli używasz frameworka UI, który ma wbudowany serwer deweloperski, a Twoja strona działa pod adresem http://localhost:4000, możesz uruchomić komendę w ten sposób:

Po uruchomieniu polecenia, usługa tunelowa rozpocznie działanie na Twoim komputerze lokalnym http://localhost:9000/.

Wywołaj logowanie z Twojej aplikacji#

Przejdź do wcześniej utworzonej aplikacji i zmień endpoint Logto z https://foobar.logto.app/ na http://localhost:9000/ w konfiguracji SDK Logto.

Weźmy nasz przykładowy projekt React jako przykład:

Kliknij przycisk "Zaloguj się" w swojej aplikacji. Zamiast widzieć wbudowany interfejs logowania Logto, teraz powinieneś zostać przekierowany na swoją własną stronę logowania.

Interakcja z Logto Experience API#

W tym kroku będziemy interagować z Logto Experience API w Twoim własnym interfejsie. Najpierw utwórz plik script.js i dodaj odwołanie w Twoim index.html.

Umieść następujący kod w swoim pliku script.js.

Ten skrypt zakończy proces logowania za pomocą nazwy użytkownika i hasła przy pomocy następujących API:

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

Odniesienie do dokumentacji Logto Experience API dla szczegółów.

Przetestuj własną stronę logowania#

1. Przejdź do swojej aplikacji i kliknij przycisk "Zaloguj się".
2. Powinieneś zostać przekierowany na swoją własną stronę logowania pod http://localhost:9000/.
3. Wprowadź nazwę użytkownika i hasło, a następnie kliknij przycisk "Zatwierdź".
4. Jeśli wszystko jest poprawnie skonfigurowane, zostaniesz przekierowany z powrotem do swojej aplikacji, z uwierzytelnioną informacją o użytkowniku.

Wdróż swój interfejs logowania w Logto Cloud#

Gdy skończysz rozwój i testowanie swojego interfejsu logowania lokalnie, możesz wdrożyć go w Logto Cloud. Po prostu utwórz plik zip z folderu swojego interfejsu i załaduj go do sekcji "Custom UI" w Logto Console.

Po przesłaniu, zapisz zmiany, a Twój 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 endpointu z powrotem na Twój endpoint Logto cloud: https://foobar.logto.app/. Tym razem możesz zatrzymać usługę tunelową Logto, a Twoja aplikacja powinna teraz działać bezpośrednio z interfejsem hostowanym online.

Podsumowanie#

W tym poradniku przeprowadziliśmy Cię przez proces implementacji i wdrażania własnego interfejsu logowania w Logto Cloud.

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

Szczęśliwego kodowania! 🚀