## Introdução 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](https://github.com/logto-io/logto): Ajuda-te a construir o login, autenticação e identidade do usuário em minutos. - [Hasura](https://github.com/hasura/graphql-engine): 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. ## Começar ### Pré-requisitos Como tanto o [Logto](https://docs.logto.io/docs/tutorials/get-started/) quanto o [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Se estás a usar Docker/Docker Compose, para aceder ao `localhost` da tua máquina (host), podes usar a string mágica do Docker `host.docker.internal`. Neste caso, o endpoint Logto será `http://host.docker.internal:3001`. Além disso, presumimos que tens uma plataforma e um framework preferidos para construir a aplicação cliente, por exemplo React ou Next.js. ### Configurar API no Logto 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. Create API modal

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. ### Criar função para 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. Create Role

O nome da função deve ser igual ao nome da função na página "Permissões" do Hasura. Lembra-te de atribuir a função aos usuários. ### Ativar autenticação por webhook no Hasura [O Hasura usa gestão de acesso baseada em função](https://hasura.io/docs/latest/auth/index/), que lida com a autorização. Portanto, só precisamos esclarecer a autenticação. Ele suporta dois métodos: Webhook e JWT. Escolhemos [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/) porque é mais flexível. 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 configurá-los através de [variáveis de ambiente](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Substituir pela tua própria chave secreta HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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á: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 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. ## Enviar pedidos GraphQL seguros ### Resumo 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. Se o usuário que o cabeçalho `Authorization` indica não tiver a `Expected-Role`, o Logto responderá com `401 Unauthorized`. 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. ### Integrar SDK do Logto Segue o [guia de integração](https://docs.logto.io/docs/recipes/integrate-logto/) 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: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Adiciona esta linha }; ``` ### Enviar pedidos Finalmente! Depois que o usuário estiver conectado, usa `getAccessToken()` no SDK do Logto para buscar o Token de Acesso para pedidos Hasura GraphQL: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Antes de enviar o pedido request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Recapitulando 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](https://discord.gg/vRvwuwgpVX) ou do [Hasura](https://discord.gg/hasura) para teres uma conversa ao vivo com a equipa.