Logto x Hasura: Como usar uma solução de autenticação open-source + GraphQL para impulsionar seu projeto

Introdução#

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.

Começando#

Pré-requisitos#

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.

Configurar API no Logto#

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.

Criar função para o Hasura#

Para aproveitar a gestão de permissões do Hasura, vamos criar funções no Logto, essas funções irão mapear para as funções do Hasura.

Lembre-se de atribuir a função aos usuários.

Habilitar autenticação webhook no Hasura#

Hasura usa gestão de acesso baseada em funções, que lida com a autorização. Portanto, só precisamos descobrir a autenticação. Ele suporta dois métodos: Webhook e JWT. Escolhemos webhook já que é mais flexível.

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 defini-los via variáveis de ambiente:

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.

Enviar requisições GraphQL seguras#

Resumo#

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.

Integrar Logto SDK#

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:

Enviar requisições#

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:

Recapitulando#

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.