Autenticando usando chaves de API ao acessar a API através do fetch

Dev
1

Ei!

Estou construindo um site headless com WordPress para uma revista que tem sua comunidade no Discourse, e os comentários devem ser integrados nas páginas dos artigos. Encontrei a documentação da API e fiquei muito feliz, pois o embed via iframe não era exatamente o que eu procurava, já que o site terá modo escuro e claro, então preciso que o template dos comentários herde as variáveis CSS do elemento raiz.

No entanto, continuo esbarrando no limite de taxa ao tentar acessar a API diretamente (usando fetch em https://discourseurl.com/t/{id}.json), então pensei em tentar adicionar uma chave de API e autenticar usando-a.

Estou usando este código:

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{chave de API do usuário do admin do Discourse}',
        },
      })

e recebo este erro, não importa qual chave eu use (até tentando com uma chave de administrador):

error_type: "invalid_access"
errors: Array [ "Você não tem permissão para visualizar o recurso solicitado." ]

Tradução aproximada: “Você não tem acesso ao recurso solicitado”.

Estou perdendo algo em relação ao funcionamento das chaves de API? Qual seria a abordagem recomendada para solicitar esses endpoints da API sem atingir o limite de taxa?

2

Dê uma olhada na seção de Autenticação, que fica perto do topo de https://docs.discourse.org/. Ela fornece um exemplo de como definir suas credenciais de API no cabeçalho da solicitação. Você precisa usar Api-Key e Api-Username no cabeçalho.

3

Obrigado! Não consigo imaginar como perdi a parte de autenticação ali, estive lendo a documentação várias vezes :joy:

De qualquer forma, parece que estou fazendo algum progresso, mas agora encontrei esse problema no console do navegador:
(Motivo: token 'api-key' ausente no cabeçalho CORS 'Access-Control-Allow-Headers' do canal de pré-verificação CORS).

Não tenho certeza do que pode estar causando isso, também não encontrei nada sobre isso no fórum. Estou esquecendo algo? O estranho é que estou especificando o cabeçalho como ‘Api-Key’ no meu código. Alguma ideia? :slight_smile:

4

Parece que você está construindo um aplicativo JavaScript e fazendo as requisições à API diretamente no navegador?

A abordagem recomendada seria fazer as chamadas à API do Discourse no lado do servidor e fazer com que seu aplicativo JavaScript se comunique com seu servidor da mesma forma que se comunica com o WordPress. Dessa forma, você evita problemas de CORS.

5

Ah, ótimo! Isso me fez examinar o código do WP Discourse e perceber que estou a apenas uma opção de distância de o WP expor o endpoint de API que preciso (expor os comentários do Discourse via API). Vou apenas precisar ajustá-lo um pouco. Isso é excelente, muito obrigado :slight_smile:

Só por curiosidade, por que não é recomendado trabalhar diretamente com a API do Discourse do lado do cliente? Tenho algumas ideias para expandir o projeto mais tarde, se houver orçamento (com uma funcionalidade de login, por exemplo), e gostaria que ele se comunicasse com a API do Discourse. Eu teria que rotear tudo através do WordPress? :slight_smile: