Logto x Hasura: Como usar uma solução de autenticação open-source + GraphQL para impulsionar seu projeto
Neste artigo, vamos nos concentrar em conectar Logto e Hasura, o que permite implementar autenticação, autorização e APIs GraphQL sem atrito. Assim, você pode rapidamente mergulhar no seu negócio sem precisar de aprendizado complexo.
GaoFounder
Pare de perder semanas com autenticação de usuários
Lance aplicativos seguros mais rapidamente com o Logto. Integre a autenticação de usuários em minutos e concentre-se no seu produto principal.
Quando se trata de um novo projeto, geralmente você não pode pular várias coisas: APIs, autenticação + autorização, identidade e fluxo de login do usuário final. Antigamente, era difícil começar essas coisas porque existem muitos conceitos e tecnologias amplamente difundidos: RESTful/GraphQL, frontend web, cliente nativo, conectar clientes com APIs, melhores práticas de autenticação para equilibrar segurança e experiência do usuário, etc.
Além disso, a maioria dos trabalhos são "repetitivos". Quero dizer, eles são necessários e semelhantes para quase todos os projetos, com algumas variações.
Parece assustador e tedioso? Não entre em pânico. Hoje temos o código aberto. Com os dois projetos de código aberto abaixo, as coisas não ficam complicadas:
Logto: Ajuda você a construir o login, autenticação e identidade do usuário em minutos.
Hasura: APIs GraphQL em tempo real super rápidas e instantâneas no seu banco de dados com controle de acesso detalhado.
Neste artigo, vamos nos concentrar em conectar Logto e Hasura, o que permite implementar autenticação, autorização e APIs GraphQL sem atrito. Assim, você pode rapidamente mergulhar no seu negócio sem precisar de aprendizado complexo.
Já que tanto o Logto quanto o Hasura têm um guia de início decente, assumimos que você leu e tem uma noção básica. É necessário o acesso a uma instância em execução de ambos.
Assumimos que os endpoints acessíveis são:
Logto: http://localhost:3001
Hasura: http://localhost:8080
Além disso, assumimos que você tem uma plataforma e framework preferidos para construir o aplicativo cliente, digamos React ou Next.js.
Na barra lateral de navegação à esquerda do seu Console Administrativo do Logto, clique em “Recursos da API” e você verá a página de gerenciamento de Recursos da API.
Em seguida, clique no enorme botão “+ Criar Recurso da API” no canto superior direito. Na modal que se abrir, insira Hasura para o nome da API e https://hasura.api para o identificador da API.
Usaremos este identificador de API no restante do nosso artigo. Mas sinta-se livre para mudar os valores com base na sua preferência.
Clique em “Criar Recurso da API” e aparecerá uma mensagem indicando que o recurso foi criado com sucesso. Isso é tudo que precisamos no Logto por agora.
Para habilitar a autenticação webhook, você deve definir o segredo do administrador e o endpoint do gancho de autenticação.
O segredo do administrador é a chave para ter acesso de administrador do Hasura ao enviar requisições. É necessário antes de habilitar a autenticação webhook. Lembre-se de mantê-lo em algum lugar seguro e não usá-lo em produção.
O endpoint do gancho de autenticação é uma URL para enviar requisições de autenticação.
Você pode notar que usamos o identificador de API preenchido no Logto para construir o endpoint do gancho de autenticação. Ele assegura que o usuário está passando o token de acesso correto ao invés de um qualquer que pode ser malicioso.
Você precisará atualizar o endpoint do gancho de autenticação se tiver um endpoint Logto diferente ou indicador de API. Digamos que você tenha https://logto.domain.com como o endpoint Logto e https://graphql.domain.com como o identificador de API, então será:
A partir de agora, para cada requisição GraphQL, o Hasura trará todos os cabeçalhos de requisição para o endpoint do gancho de autenticação do Logto, e o Logto responderá adequadamente.
Como não usaremos o segredo de administrador do Hasura em produção, cada requisição GraphQL é protegida pelos seguintes cabeçalhos:
Authorization O token bearer padrão que o Logto gera.
Expected-Role O papel que você deseja que o Logto mostre na resposta do gancho de autenticação.
O cabeçalho Authorization requer um Token de Acesso válido no formato JWT com o indicador de API do Hasura para público. Espere - é bastante difícil lembrar e compor todas essas coisas. Felizmente temos SDKs do Logto para simplificar a parte complexa.
Siga o guia de integração para integrar um SDK do Logto no seu aplicativo cliente. Isso habilita não só a capacidade de gerar um Token de Acesso válido para requisições GraphQL, mas também uma experiência de login suave para seus usuários finais.
Uma vez que você terminar o guia, precisamos de uma pequena modificação no LogtoConfig: Adicionar o indicador de API que você criou no Console Administrativo do Logto aos recursos. Tomando o SDK do React como exemplo:
Finalmente! Depois que o usuário estiver logado, use getAccessToken() no SDK do Logto para buscar o Token de Acesso para requisições GraphQL do Hasura:
Com o esforço acima, implementamos com sucesso todas as coisas inevitáveis da introdução:
Um endpoint de API GraphQL dirigido por esquema de banco de dados
Um serviço de autenticação e identidade baseado no protocolo OIDC
O fluxo completo de login do usuário final e gerenciamento de estado de autenticação
Acesso seguro à API baseado na identidade e funções do usuário
Não foi tão difícil, certo? Se você encontrar algum problema, sinta-se à vontade para entrar no servidor do discord do Logto ou Hasura para ter um bate-papo ao vivo com a equipe.
