Programação expressa usando o Cursor e Logto para criar rapidamente a tua app e gerir fluxos de login
Aprende como desenvolver rapidamente uma app de galeria de fotos usando o Cursor e adiciona login com Logto em minutos. Desde a interface até à autenticação, é rápido, simples e potenciado por IA.
GuamianProduct & Design
Pare de perder semanas com autenticação de utilizadores
Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.
Programação expressa está a tornar-se popular graças a ferramentas poderosas como o Cursor e o Windsurf. Mesmo com pouca experiência, podes criar rapidamente a tua própria app.
Para muitos programadores e criadores, configurar fluxos de login pode ser complicado. Mas com o MCP e as funcionalidades de contexto integradas nos IDEs modernos, adicionar autenticação à tua app já não é uma tarefa complexa, mesmo que não sejas um programador.
Neste tutorial, vou mostrar-te:
Como criar uma aplicação web usando programação expressa no Cursor.
Como adicionar autenticação (fluxos de login) com o Logto para proteger o teu conteúdo.
Primeiro, só preciso de abrir um chat no Cursor e escrever o pedido:
“Cria uma aplicação de página única usando Next.js Page Router.”
O Cursor trata do resto e gera tudo para mim.
Vamos transformá-la numa app de galeria de fotos. Ajuda-me a obter várias fotos do Unsplash e organizá-las por mim.
Adicionar autenticação à tua app de galeria de fotos#
Tradicionalmente, terias de ler a documentação manualmente e explorar o SDK para concluir a integração.
Mas com o Cursor, podes aproveitar totalmente a IA para tornar o processo muito mais simples e rápido.
Podes adicionar um fluxo de login para proteger a tua app. O Cursor suporta prompts sensíveis ao contexto, por isso podes adicionar a documentação do Logto como referência. Isto permite-te integrar facilmente a autenticação usando o Logto SDK para Next.js (Page Router).
Como podes ver, ele faz referência ao guia de início rápido para te dizer o que fazer a seguir. No segundo passo, pede-me para configurar definições como appId, endpoint e assim por diante. Para obter estes valores, tenho de ir ao Logto Cloud e registar uma nova app.
Também me pede para introduzir http://localhost:3000/api/auth/callback/logto como o URI de redirecionamento.
Introduz o Redirect URI na consola do Logto Cloud
Obtém esses valores e guarda-os no teu ficheiro de configuração.
Por isso, só forneço o App ID, App Secret e endpoint do Logto ao Cursor, e ele atualiza o código para mim.
Agora, executo o servidor e obtenho uma página inicial simples de Iniciar sessão. Quando clico em Iniciar sessão, redireciona-me para a página de login do Logto.
É isso! Redirecionou com sucesso para a página de login do Logto!
O ecrã inicial estava demasiado básico, por isso pedi ao Cursor para melhorar o design.
Eis o que me deu.
Agora é hora de testar todo o fluxo.
Por falar nisso, o Logto vem com um serviço de email integrado, por isso podes passar por todo o processo de verificação de email imediatamente.
Depois de concluir o fluxo, inicias sessão com sucesso e consegues ver o teu ID de utilizador apresentado no ecrã.
Agora vamos ver se este utilizador foi adicionado à Console do Logto…
Fixe! Está lá! 🎉
Graças à documentação, boas práticas e à codificação estilo Copilot do Logto, a integração é simples mesmo para quem tem pouca experiência técnica. Configurar um fluxo de login já não é uma tarefa pesada ou aborrecida.
Este é apenas um pequeno exemplo prático. O Logto está activamente a construir servidores MCP que correm diretamente dentro do teu IDE, permitindo interagires com a Logto Console e a Management API sem precisares de sair do ambiente de desenvolvimento.
Com isto, vais poder:
Criar e gerir utilizadores
Obter registos
Configurar e gerir os teus fluxos de login
Conceber e gerir autorização (ex: recursos API, permissões e papéis)
Gerir aplicações e recursos
E muito mais
Fica atento(a), com o poder da IA e a infraestrutura robusta da Logto, a integração de autenticação já não é um desafio!
Introduz o Redirect URI na consola do Logto Cloud
Obtém esses valores e guarda-os no teu ficheiro de configuração.
