Najszybszy sposób na zbudowanie systemu uwierzytelniania

Dodanie systemu uwierzytelniania użytkowników do twojego produktu powinno być proste, prawda? W końcu to taki znormalizowany moduł. Przynajmniej tak pomyślałem, a zespół Logto jest zaangażowany w to, aby każdy produkt miał bezpieczny i dopasowany do biznesu system tożsamości.

Jak szybko można to zrobić? No cóż, zobaczmy. Jest błyskawiczne rozwiązanie low-code dla aplikacji webowych, idealne do szybkiego testowania lub wdrożenia bezpośrednio do produkcji. Włączając rejestrację platformy, wszystko można zrobić w zaledwie 1 godzinę lub nawet szybciej. Nie wierzysz? Śmiało, spróbuj sam.

Jako firma tworząca narzędzia AI, czas to pieniądz, a ja muszę szybko wprowadzić produkt na rynek, aby zdobyć przewagę. Oto, czego potrzebuję do uwierzytelniania:

• Rejestracja: Email + Weryfikacja emaila + Ustaw hasło
• Logowanie: Email + Hasło
• Zapomniałem hasła: Weryfikacja emaila + Zresetowanie hasła
• Logowanie społecznościowe: Wybierzmy najpopularniejsze, logowanie Google.

Dobrze, zaczynajmy.

Krok 1: Utworzenie konta Logto i najemcy#

1. Odwiedź cloud.logto.io i zarejestruj się, aby utworzyć konto Logto.
2. Utwórz bezpośrednio najemcę produkcyjnego. Plan darmowy (50 000 MAU) jest wystarczający na potrzeby naszego startupu.

Krok 2: Ustawienie połączenia e-mail#

Łączenie się z zewnętrznym dostawcą e-mail i tworzenie szablonów e-maili? O, chwileczkę! Logto ma wbudowaną usługę e-mail, która wymaga żadnej konfiguracji.

1. Wprowadź podstawowe informacje: Nazwę nadawcy, informacje o firmie i załaduj logo e-maila (wszystkie opcjonalne).
2. Przetestuj to: Wyślij e-mail do siebie. Otrzymasz elegancki e-mail weryfikacyjny.

To prawda, cała konfiguracja i testowanie zajmują mniej niż 5 minut! Jeśli nie masz nic przeciwko temu, że nadawcą będzie „[email protected]”, możesz korzystać z tej darmowej usługi i zrezygnować z pisania szablonów e-maili dla różnych scenariuszy. W przeciwnym razie możesz wybrać niestandardowego dostawcę e-maila.

Krok 3: Konfiguracja połączenia społecznościowego#

Różne produkty wymagają różnych identyfikatorów klienta dostawcy Google, więc muszę samodzielnie połączyć się z konektorem Google. Ale to nie jest trudne.

1. Wypełnij Client ID i Client secret w Logto, a następnie włącz Google One Tap.

2. Wprowadź URL powrotny (Callback URL). W konsoli API Google wybierz ../auth/userinfo.email, ../auth/userinfo.profile oraz openid.

Dzięki przewodnikowi krok po kroku od Logto, zakończyłem konfigurację w mniej niż 10 minut.

Krok 4: Ustawienie doświadczenia logowania#

Po skonfigurowaniu zasobów dostawców, nadszedł czas na ustawienie doświadczenia logowania i rejestracji.

1. Przejdź do sekcji „Doświadczenie logowania”:
   • Załaduj logo swojej aplikacji i Favicon.
   • Zmień kolor marki.
   • Włącz tryb ciemny jednym kliknięciem i wypełnij te same pola.
2. Przejdź do zakładki „Rejestracja i logowanie”, aby zmienić metody uwierzytelniania:
   • Ustaw „Adres e-mail” jako identyfikator rejestracji, wybierz „Utwórz swoje hasło” i „Zweryfikuj przy rejestracji”.
   • Ustaw „Adres e-mail” i „Hasło” jako identyfikator logowania i czynnik uwierzytelniania.
   • Dodaj „Google” dla logowania społecznościowego.

Na szczęście domyślne ustawienia były dokładnie takie, jakich potrzebowałem, więc nie zajęło to dużo czasu.

Krok 5: Integracja aplikacji web bez SDK#

Po co tracić czas na integrację usług? Skorzystaj z chronionej aplikacji Logto, aby proxyfikować żądania mojej aplikacji.

1. Utwórz Chronioną Aplikację: Wprowadź oryginalny URL mojej aplikacji (bez ochrony uwierzytelniania, każdy może odwiedzić). Ustaw domenę aplikacji z przyrostkiem ".protected.app" do testowania (adres tej strony internetowej jest udostępniany użytkownikom do odwiedzenia twojej strony, ale już skonfigurowany z przepływami uwierzytelniania, stąd nazwa "Chroniona Aplikacja").

   

2. Po utworzeniu aplikacji, odwiedź ten adres testowy acme.protected.app (👈 możesz to również wypróbować!). Aby uzyskać dostęp do tej strony, wymagana jest autoryzacja. Test zakończony sukcesem.

   

3. Skonfiguruj rzeczywistą domenę tej strony internetowej do użytku produkcyjnego zamiast domyślnej .protected.app.

4. Opcjonalne: Jeśli chcesz używać uwierzytelniania tylko dla określonych tras, możesz dodać „Niestandardowe reguły uwierzytelniania”. Domyślnie cała strona jest chroniona.

5. Trasy uwierzytelniające /register, /sign-in, /sign-in-callback i /sign-out można bezpośrednio dodać do przycisków takich jak Rozpocznij, Zaloguj się, Wyloguj się.

6. Ostatnie, ale nie mniej ważne, zabezpiecz swój serwer źródłowy za pomocą HTTP Basic Authentication, aby ukończyć tę integrację proxy. Każde żądanie z Chronionej Aplikacji zawiera nagłówek: Authorization: Basic base64(appId:appSecret).

I to wszystko! W zaledwie godzinę moja strona internetowa jest chroniona uwierzytelnianiem.

Wnioski#

Możesz pewnie korzystać z tego superszybkiego rozwiązania, aby chronić swoją stronę internetową. W miarę rozwoju twojego produktu, potężny i kompleksowy system Logto pozwala na płynne podniesienie funkcjonalności, takich jak wsparcie dla wielu aplikacji, MFA, SSO, autoryzacja aplikacji zewnętrznych, RBAC i organizacja wielu najemców, wraz z integracjami dla wszystkich typów frameworków, aby zwiększyć ochronę zasobów i zarządzanie użytkownikami.

Zachęcam cię do samodzielnego doświadczenia i szybkiego wyposażenia swojej strony w ochronę uwierzytelniania.

Więcej informacji na temat szybkiej integracji uwierzytelniania, opinie na naszym Roadmap lub kontaktuj się z nami bezpośrednio. I nie zapomnij dołączyć do naszej społeczności na Discord, żeby porozmawiać z zespołem Logto.

Szczęśliwego integrowania!