Logto x Hasura: Como usar autenticação open-source + solução GraphQL para impulsionar o teu projeto
Neste artigo, iremos focar em conectar o Logto e o Hasura, o que te permite implementar autenticação, autorização e APIs GraphQL sem dificuldades. Assim, podes rapidamente mergulhar no teu negócio sem precisar de aprender ciência de foguetes.
GaoFounder
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.
Quando se trata de um novo projeto, geralmente não podes esquecer várias coisas: APIs, autenticação + autorização, identidade e fluxo de entrada do usuário final. Isso costumava ser difícil de iniciar porque há muitos conceitos e tecnologias que se espalham amplamente: 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 alterações.
Parece assustador e tedioso? Não entres em pânico. Hoje temos open source. Com os dois projetos open-source abaixo, as coisas tornaram-se menos complicadas:
Logto: Ajuda-te a construir o login, autenticação e identidade do usuário em minutos.
Hasura: APIs GraphQL em tempo real, instantâneas e rápidas no teu BD com controle de acesso detalhado.
Neste artigo, iremos focar em conectar o Logto e o Hasura, o que te permite implementar autenticação, autorização e APIs GraphQL sem dificuldades. Assim, podes rapidamente mergulhar no teu negócio sem precisar de aprender ciência de foguetes.
Como tanto o Logto quanto o Hasura têm um guia inicial decente, presumimos que os leste e tens uma noção básica. É necessário ter acesso a uma instância em execução de ambos.
Presumimos que os endpoints acessíveis são:
Logto: http://localhost:3001
Hasura: http://localhost:8080
Além disso, presumimos que tens uma plataforma e um framework preferidos para construir a aplicação cliente, por exemplo React ou Next.js.
Na barra lateral de navegação à esquerda do teu Logto Admin Console, clica em “API Resources”, e verás a página de gestão dos Recursos de API.
Depois clica no enorme botão “+ Create API Resource” no canto superior direito. No modal que se abre, insere Hasura para o nome da API e https://hasura.api para o identificador de API.
Usaremos este identificador de API para o resto do nosso artigo. Mas sinta-te à vontade para mudar os valores com base na tua preferência.
Clica em “Create API Resource”, e aparecerá uma mensagem que indica que o recurso foi criado com sucesso. Isso é tudo o que precisamos no Logto por enquanto.
Para ativar a autenticação por webhook, precisas definir o segredo de admin e o endpoint do hook de autenticação.
O segredo de admin é a chave para ter acesso de admin ao Hasura ao enviar pedidos. É necessário antes de ativar a autenticação por webhook. Lembra-te de guardá-lo em algum lugar seguro e não o uses em produção.
O endpoint do hook de autenticação é uma URL para enviar pedidos de autenticação.
Podes notar que usamos o identificador de API preenchido no Logto para construir o endpoint do hook de autenticação. Isso garante que o usuário está a passar o token de fornecimento correto em vez de um aleatório que pode ser malicioso.
Precisas atualizar o endpoint do hook de autenticação se tiveres um endpoint do Logto ou indicador de API diferente. Se tiveres https://logto.domain.com como o endpoint do Logto e https://graphql.domain.com como o identificador de API, então será:
A partir de agora, para cada pedido GraphQL, o Hasura levará todos os cabeçalhos de pedido para o endpoint do Logto auth hook, e o Logto responderá adequadamente.
Como não usaremos o segredo de admin do Hasura em produção, cada pedido GraphQL é seguro através dos seguintes cabeçalhos:
Authorization O token padrão de portador que o Logto gera.
Expected-Role A função que queres que o Logto mostre na resposta do hook 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 o público. Espera - é bastante difícil lembrar e compor todas essas coisas. Felizmente temos SDKs do Logto para simplificar a parte geek.
Segue o guia de integração para integrar um SDK do Logto na tua aplicação cliente. Ele não apenas permite a capacidade de gerar um Token de Acesso válido para pedidos GraphQL, mas também uma experiência de login suave para teus utilizadores finais.
Depois de finalizar o guia, precisamos de uma pequena modificação no LogtoConfig: Adiciona o indicador de API que criaste no Logto Admin Console em resources. Tomando o SDK de React como exemplo:
Com o esforço acima, implementámos com sucesso todas as coisas que não podem ser ignoradas na introdução:
Um endpoint API GraphQL direcionado pelo esquema do 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 gestão de estado de autenticação
Acesso seguro à API baseado na identidade do usuário e funções
Não é tão difícil, certo? Se encontrares algum problema, sinta-te à vontade para entrar no servidor do Discord do Logto ou do Hasura para teres uma conversa ao vivo com a equipa.
