Vibe кодинг с помощью Cursor и Logto — быстро создавай приложение и настраивай логин
Узнай, как закодить фотовитрину с помощью Cursor и за считанные минуты добавить вход через Logto. От интерфейса до аутентификации — всё быстро, просто и с поддержкой ИИ.
Product & Design
Vibe кодинг становится всё популярнее благодаря мощным инструментам вроде Cursor и Windsurf. Даже при минимальном опыте ты можешь быстро создать своё собственное приложение.
Для многих разработчиков и энтузиастов настройка сценариев логина бывает сложной задачей. Но с появлением MCP и контекстно-зависимых возможностей современных IDE добавление аутентификации в приложение больше не сложно, даже если ты не программист.
В этом туториале я покажу тебе:
- Как сделать веб-приложение с vibe кодингом в Cursor.
- Как добавить аутентификацию (сценарии входа) через Logto для защиты твоего контента.
Создаём приложение-галерею фото в Cursor
Сначала я просто открываю чат в Cursor и набираю такой промпт:
«Создай одностраничное приложение на Next.js Page Router.» Cursor всё сделает за меня и сгенерирует проект.
Сделаем это приложением-галереей фото. Оно поможет мне получить несколько фотографий с Unsplash и красиво их расставить.
Добавляем аутентификацию в галерею
Раньше для этого нужно было вручную разбираться с документацией и SDK, чтобы завершить интеграцию. Но с Cursor ты полностью можешь использовать AI, чтобы сделать всё куда проще и быстрее.
Добавляем документацию Logto как контекст
Можно добавить сценарий авторизации, чтобы защитить приложение. Cursor поддерживает контекстные промпты, поэтому ты можешь добавить документацию Logto как справку. Это позволяет легко интегрировать аутентификацию через Logto SDK для Next.js (Page Router).
Завершаем интеграцию
Как видишь, в инструкции ссылаются на Quick Start-гайд — и рассказывают, что делать дальше. На втором шаге мне нужно настроить такие параметры, как appId, endpoint и т. д. Чтобы их получить, я захожу в Logto Cloud и регистрирую новое приложение.
Также меня просят указать http://localhost:3000/api/auth/callback/logto как Redirect URI.
Ввести Redirect URI в консоли Logto Cloud
Возьми эти значения и сохрани в своём конфиге.
Далее я просто передаю App ID, App Secret и Logto endpoint в Cursor, и он обновляет код за меня.
Теперь я запускаю сервер и вижу простую домашнюю страницу Sign in. Когда я жму Sign In, происходит редирект на страницу логина Logto.
О да! Успешно произошло перенаправление на страницу входа Logto!
Прокачиваем интерфейс и тестируем весь сценарий
Начальный экран выглядел слишком просто, поэтому я попросил Cursor сделать дизайн поинтереснее.
Вот что получилось.
Пора протестировать всю цепочку.
Кстати, в Logto встроен email-сервис, поэтому ты можешь пройти полную верификацию email прямо из коробки.
После прохождения сценария, ты успешно заходишь, и твой user ID отображается на экране.
Теперь давай посмотрим, появился ли этот пользователь в Logto Console… Ура! Там есть! 🎉
Благодаря документации Logto, лучшим практикам и подходу Copilot-style, интеграция проста даже для тех, у кого минимум технического опыта. Настройка сценария логина больше не тяжёлая или нудная работа.
Дальнейшее развитие
Это всего лишь небольшой учебный пример. Logto активно разрабатывает MCP-серверы, которые работают прямо внутри твоей IDE и позволяют взаимодействовать с Logto Console и Management API без выхода из среды разработки. С их помощью ты сможешь:
- Создавать и управлять пользователями
- Скачивать логи
- Настраивать и управлять сценариями входа
- П роектировать и управлять авторизацией (например, API-ресурсы, права, роли)
- Управлять приложениями и ресурсами
- И многое другое
Следи за обновлениями: с мощью ИИ и надёжной инфраструктурой Logto интеграция аутентификации больше не проблема!