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.
Product & Design
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.
Zbuduj aplikację galerii zdjęć w Cursorze
Najpierw otwieram czat w Cursor i wpisuję polecenie:
„Utwórz jednostronicową aplikację z użyciem Next.js Page Router.” Cursor zajmie się resztą i wygeneruje całość za mnie.
Zróbmy z tego galerię zdjęć. Pomaga mi pobierać kilka zdjęć z Unsplash i porządkować je.
Dodaj uwierzytelnianie do swojej galerii zdjęć
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ć.
Dodaj dokumentację Logto jako kontekst
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).
Zakończ integrację
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!
Ulepsz interfejs i przetestuj cały przepływ
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.
Przyszłe iteracje
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!