## 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](https://github.com/logto-io/logto): Ajuda você 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 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](https://docs.logto.io/docs/tutorials/get-started/) quanto o [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Se você estiver usando Docker/Docker Compose, para acessar o `localhost` da sua máquina (host), você pode usar a string mágica do Docker `host.docker.internal`. Nesse caso, o endpoint do Logto será `http://host.docker.internal:3001`. 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. Modal de Criação de 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.

O nome da função deve ser igual ao nome da função na página "Permissõ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](https://hasura.io/docs/latest/auth/index/), que lida com a autorização. Portanto, só precisamos descobrir a autenticação. Ele suporta dois métodos: Webhook e JWT. Escolhemos [webhook](https://hasura.io/docs/latest/auth/authentication/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](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Substitua pelo seu próprio segredo HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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á: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 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. Se o usuário indicado pelo cabeçalho `Authorization` não tiver o `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 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](https://docs.logto.io/docs/recipes/integrate-logto/) 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: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Adicione esta linha }; ``` ### 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: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Antes de enviar a requisição request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 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](https://discord.gg/vRvwuwgpVX) ou [Hasura](https://discord.gg/hasura) para ter um bate-papo ao vivo com a equipe.