Koduj z Vibe za pomocą Cursor i Logto, aby szybko zbudować swoją aplikację i obsłużyć logowanie
Dowiedz się, jak z vibe code stworzyć aplikację galerii zdjęć przy użyciu Cursor oraz dodać logowanie przez Logto w kilka minut. Od interfejsu po uwierzytelnianie – to szybkie, proste i wspierane przez AI.
GuamianProduct & Design
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.
Vibe coding (programowanie na luzie) staje się coraz bardziej popularne dzięki potężnym narzędziom jak Cursor i Windsurf. Nawet z ograniczonym doświadczeniem możesz szybko stworzyć własną aplikację.
Dla wielu programistów i twórców konfiguracja przebiegów logowania bywa trudna. Jednak dzięki MCP i funkcjom kontekstowym wbudowanym we współczesne IDE, dodanie uwierzytelniania do aplikacji nie jest już skomplikowanym zadaniem, nawet jeśli nie jesteś deweloperem.
W tym poradniku pokażę ci:
Jak zbudować aplikację webową korzystając z vibe coding w Cursorze.
Jak dodać uwierzytelnianie (logowanie) z Logto, by chronić swoje treści.
Tradycyjnie musiałbyś ręcznie czytać dokumentację i przechodzić przez SDK, by dokończyć integrację.
Jednak z Cursor możesz w pełni wykorzystać AI, by uprościć ten proces i go przyspieszyć.
Możesz dodać przebieg logowania, aby chronić swoją aplikację. Cursor obsługuje polecenia kontekstowe, więc możesz dodać dokumentację Logto jako odniesienie. Pozwala to łatwo zintegrować uwierzytelnianie za pomocą Logto SDK dla Next.js (Page Router).
Jak widać, odwołuje się do przewodnika Szybki Start, mówiąc, co należy zrobić dalej. W drugim kroku prosi mnie o skonfigurowanie ustawień jak appId, endpoint itd. Aby je uzyskać, muszę przejść do Logto Cloud i zarejestrować nową aplikację.
Prosi też, bym podał http://localhost:3000/api/auth/callback/logto jako URI przekierowania.
Wprowadź URI przekierowania w konsoli Logto Cloud
Pobierz te wartości i zapisz w swoim pliku konfiguracyjnym.
Podaję więc App ID, App Secret oraz Logto endpoint do Cursor, a ten aktualizuje za mnie kod.
Teraz uruchamiam serwer i otrzymuję prostą stronę główną Zaloguj się. Gdy klikam Zaloguj się, przekierowuje mnie do strony logowania Logto.
Tak jest! Udało się przekierować na stronę logowania Logto!
Początkowy ekran wyglądał zbyt prosto, więc poprosiłem Cursor o poprawę wyglądu.
Oto co otrzymałem.
Teraz czas przetestować cały przepływ.
Na marginesie, Logto ma wbudowaną obsługę e-mail, więc możesz przejść przez cały proces weryfikacji mailowej od ręki.
Po zakończeniu procesu jesteś pomyślnie zalogowany i widzisz wyświetlony swój identyfikator użytkownika na ekranie.
Sprawdźmy teraz, czy ten użytkownik został dodany do Logto Console…
Jest! 🎉
Dzięki dokumentacji Logto, dobrym praktykom i kodowaniu w stylu Copilot, integracja jest prosta nawet dla osób z minimalnym doświadczeniem technicznym. Konfiguracja logowania nie jest już ciężkim czy nużącym zadaniem.
To tylko mały przykładowy projekt. Logto aktywnie tworzy serwery MCP, które będą działać bezpośrednio w twoim IDE, dając możliwość korzystania z Logto Console i Management API bez opuszczania środowiska programistycznego.
Z tym będziesz mógł:
Tworzyć i zarządzać użytkownikami
Pobierać logi
Konfigurować i zarządzać przebiegami logowania
Projektować oraz zarządzać autoryzacją (np. zasobami API, uprawnieniami, rolami)
Zarządzać aplikacjami i zasobami
I wiele więcej
Zostań na bieżąco – dzięki mocy AI i solidnej infrastrukturze Logto integracja auth już nie jest wyzwaniem!
Wprowadź URI przekierowania w konsoli Logto Cloud
Pobierz te wartości i zapisz w swoim pliku konfiguracyjnym.
