Autenticación usando API keys al acceder a la API a través de fetch

Desarrollador
1

¡Hola!

Estoy construyendo un sitio de WordPress sin cabeza (headless) para una revista que tiene su comunidad en Discourse, y los comentarios deben integrarse en las páginas de los artículos. Encontré la documentación de la API y estaba muy contento, ya que el incrustado en iframe no era realmente lo que buscaba, dado que el sitio tendrá modo oscuro y claro, por lo que necesito que la plantilla de comentarios herede las variables CSS del elemento raíz.

Sin embargo, sigo tropezando con el límite de velocidad cuando intento acceder a la API directamente (usando fetch en https://discourseurl.com/t/{id}.json), así que pensé en intentar agregar una clave de API y autenticarme con ella.

Estoy usando este código:

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{clave de API de usuario de la administración de Discourse}',
        },
      })

Y obtengo este error, sin importar qué clave use (incluso probando con una clave de administrador):

error_type: "invalid_access"
errors: Array [ "No tienes permiso para ver el recurso solicitado." ]

Traducción aproximada: “No tienes acceso al recurso solicitado”.

¿Me estoy perdiendo algo en cuanto a cómo funcionan las claves de API? ¿Cuál sería el enfoque recomendado para solicitar estos puntos de la API sin alcanzar el límite de velocidad?

2

Echa un vistazo a la sección de Autenticación, que se encuentra cerca de la parte superior de https://docs.discourse.org/. Allí se muestra un ejemplo de cómo establecer tus credenciales de API en el encabezado de la solicitud. Debes usar Api-Key y Api-Username en el encabezado.

3

¡Gracias! No puedo imaginar cómo se me pasó la parte de autenticación, he estado revisando la documentación una y otra vez :joy:

De todos modos, parece que estoy avanzando un poco, pero ahora me encuentro con este problema en la consola del navegador:
(Reason: missing token ‘api-key’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

No estoy seguro de qué podría estar causándolo, tampoco he encontrado nada en el foro al respecto. ¿Me estaré perdiendo algo? Lo raro es que en mi código estoy especificando el encabezado como ‘Api-Key’. ¿Alguna idea? :slight_smile:

4

Parece que estás construyendo una aplicación de JavaScript y realizando las solicitudes de API desde el navegador.

El enfoque recomendado sería realizar las llamadas a la API del servidor de Discourse en el lado del servidor, y que tu aplicación de JavaScript se comunique con tu servidor de la misma manera que lo hace con WordPress. De esta manera, evitas cualquier problema de CORS.

5

¡Ah, genial! Esto me llevó a revisar el código de WP Discourse y me di cuenta de que solo me falta una opción para que WP exponga el punto final de la API que necesito (exponer los comentarios de Discourse a través de una API). Solo tendré que ajustarlo un poco. Eso es excelente, muchas gracias :slight_smile:

Por curiosidad, ¿por qué no se recomienda trabajar directamente con la API de Discourse desde el lado del cliente? Tengo algunas ideas para expandir el proyecto más adelante si hay presupuesto (con una funcionalidad de inicio de sesión, por ejemplo), y me gustaría que se comunicara con la API de Discourse. ¿Tendría que enrutar todo a través de WordPress? :slight_smile: