A maneira mais rápida de construir um sistema de autenticação

Adicionar um sistema de autenticação de usuário ao seu produto deveria ser fácil, certo? Afinal, é um módulo tão padronizado. Pelo menos, foi o que pensei, e a equipe do Logto está dedicada a tornar fácil para todo produto ter um sistema de identidade seguro e adequado para negócios.

Quão rápido pode ser feito? Bem, vamos ver. Há uma solução de baixo código super rápida para aplicativos web, perfeita para testes rápidos ou implantação diretamente na produção. Incluindo o registro na plataforma, tudo pode ser feito em apenas 1 hora ou até mais rápido. Não acredita? Vá em frente, tente você mesmo.

Como uma empresa de ferramentas de IA, tempo é dinheiro, e eu preciso lançar rapidamente para capturar o mercado. Aqui está o que eu preciso para autenticação:

• Registro: E-mail + Verifique e-mail + Defina a senha
• Entrar: E-mail + Senha
• Esqueceu a senha: Verifique o e-mail + Redefina a senha
• Login social: Vamos com o mais popular, login com Google.

Tudo bem, vamos lá.

Passo 1: Crie uma conta e um tenant Logto#

1. Visite cloud.logto.io e inscreva-se para uma conta Logto.
2. Crie um tenant de Produção diretamente. O plano Gratuito (50.000 MAUs) é suficiente para nossas necessidades de startup.

Passo 2: Configure a conexão de e-mail#

Conectar com meu provedor de e-mail de terceiros e criar templates de e-mail? Oh, espere! O Logto tem um Serviço de E-mail predefinido sem necessidade de configuração.

1. Insira informações básicas: Nome do remetente, informações da empresa e carregue o logotipo do e-mail (todos opcionais).
2. Teste: Envie um e-mail para si mesmo. Um e-mail de verificação estiloso chega.

Isso mesmo, toda a configuração e teste leva menos de 5 minutos! Se você não se importar que o remetente seja “[email protected]”, você pode usar este serviço gratuito e deixar de escrever templates de e-mail para diferentes cenários. Caso contrário, você pode optar por um provedor personalizado de e-mails.

Passo 3: Configure a conexão social#

Produtos diferentes precisam de IDs de cliente de provedores Google diferentes, então eu preciso vincular o conector Google por mim mesmo. Mas não é difícil.

1. Preencha o ID do Cliente e o Segredo do Cliente no Logto, depois habilite Google One Tap.

2. Insira a URL de Callback. Selecione ../auth/userinfo.email, ../auth/userinfo.profile, e openid no console da API do Google.

Graças ao guia passo a passo do Logto, finalizei a configuração em menos de 10 minutos.

Passo 4: Configure a experiência de login#

Com os recursos do provedor configurados, é hora de configurar a experiência de login e registro.

1. Navegue para a seção “Experiência de Login”:
   • Carregue o logotipo do seu Aplicativo e o Favicon.
   • Substitua a cor da Marca.
   • Habilite o modo escuro com um clique e preencha os mesmos campos.
2. Vá para a aba “Inscrição & Login” para alterar os métodos de autenticação:
   • Defina “Endereço de e-mail” como o identificador de inscrição, e marque “Crie sua senha” e “Verifique ao se inscrever”.
   • Defina “Endereço de e-mail” e “Senha” como o identificador de login e fator de autenticação.
   • Adicione “Google” para login social.

Convenientemente, as configurações padrão eram exatamente o que eu precisava, então isso não levou muito tempo.

Passo 5: Integre o app web sem SDK#

Por que perder tempo integrando serviços? Use o app protegido do Logto para fazer a proxy das minhas solicitações de app.

1. Crie um Aplicativo Protegido: Insira a URL original do meu aplicativo (aquela sem proteção de autenticação, que qualquer pessoa pode visitar). Defina o domínio do app com um sufixo “.protected.app” para testes (este endereço de site é fornecido aos usuários para visitarem o seu site, mas já está configurado com fluxos de autenticação, daí o nome "Aplicativo Protegido").

   

2. Uma vez criado o aplicativo, visite este endereço de teste acme.protected.app (👈 você também pode tentar!). É necessário autenticação para acessar este site. Teste realizado com sucesso.

   

3. Configure meu domínio real deste site para produção em vez do padrão .protected.app.

4. Opcional: Se você quiser usar a autenticação apenas para rotas específicas, pode adicionar "Regras de autenticação personalizadas". Por padrão, todo o site é protegido.

5. As rotas de autenticação /register, /sign-in, /sign-in-callback, e /sign-out podem ser diretamente adicionadas a botões como Começar, Entrar e Sair.

6. Por último, mas não menos importante, proteja seu servidor de origem com autenticação HTTP Basic para completar esta integração de proxy. Cada solicitação do Aplicativo Protegido inclui o seguinte cabeçalho: Authorization: Basic base64(appId:appSecret).

É isso! Em apenas uma hora, meu site está protegido com autenticação.

Conclusão#

Você pode usar com confiança esta solução super rápida para proteger seu site. À medida que seu produto cresce, o poderoso e abrangente sistema Logto permite que você faça upgrade sem problemas para recursos como suporte a múltiplos aplicativos, MFA, SSO, autorização de apps de terceiros, RBAC e organização multi-tenant, juntamente com integrações para todos os tipos de frameworks para melhorar a proteção de recursos e o gerenciamento de usuários.

Eu convido você a experimentar por si mesmo e rapidamente equipar seu site com proteção de autenticação.

Para mais informações sobre integração rápida de autenticação, envie feedback para o nosso Roadmap ou entre em contato conosco diretamente. E não se esqueça de se juntar à nossa comunidade no Discord para conversar com a equipe do Logto.

Feliz integração!