Authentification à l'aide de clés API lors de l'accès à l'API via fetch

Dev
1

Salut !

Je suis en train de construire un site WordPress headless pour un magazine dont la communauté est sur Discourse, et les commentaires doivent être intégrés sur les pages d’articles. J’ai trouvé la documentation de l’API et j’étais super content, car l’intégration via iframe ne correspondait pas vraiment à ce que je cherchais, puisque le site aura un mode sombre et un mode clair. J’ai donc besoin que le modèle des commentaires hérite des variables CSS de l’élément racine.

Cependant, je continue de rencontrer la limite de taux lorsque j’essaie d’accéder à l’API directement (en utilisant fetch sur https://discourseurl.com/t/{id}.json), alors j’ai pensé essayer d’ajouter une clé API et de m’authentifier avec.

J’utilise ce code :

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{clé API utilisateur depuis l'administration Discourse}',
        },
      })

Et je reçois cette erreur, quelle que soit la clé que j’utilise (même en essayant avec une clé administrateur) :

error_type: "invalid_access"
errors: Array [ "Vous n'avez pas l'autorisation d'afficher la ressource demandée." ]

Traduction approximative : « Vous n’avez pas accès à la ressource demandée ».

Est-ce que je manque quelque chose concernant le fonctionnement des clés API ? Quelle serait l’approche recommandée pour accéder à ces points de terminaison de l’API sans atteindre la limite de taux ?

2

Consultez la section Authentification située tout en haut de https://docs.discourse.org/. Elle fournit un exemple montrant comment définir vos identifiants API dans l’en-tête de la requête. Vous devez utiliser Api-Key et Api-Username dans l’en-tête.

3

Merci ! Je n’arrive pas à imaginer comment j’ai pu manquer la partie authentification là, j’ai relu la documentation encore et encore :joy:

Quoi qu’il en soit, je semble faire des progrès, mais je rencontre maintenant ce problème dans la console du navigateur :
(Raison : jeton manquant « api-key » dans l'en-tête CORS « Access-Control-Allow-Headers » provenant du canal de préflight CORS).

Je ne sais pas ce qui pourrait en être la cause, je ne trouve rien non plus sur le forum à ce sujet. Est-ce que j’oublie quelque chose ? Ce qui est étrange, c’est que je spécifie bien l’en-tête comme « Api-Key » dans mon code. Des idées ? :slight_smile:

4

On dirait que vous construisez une application JavaScript et que vous effectuez les requêtes API depuis le navigateur ?

L’approche recommandée consiste à effectuer les appels API vers Discourse côté serveur, et à faire en sorte que votre application JavaScript communique avec votre serveur de la même manière qu’avec WordPress. Cela vous permet d’éviter tout problème de CORS.

5

Ah, super ! Cela m’a poussé à examiner le code de WP Discourse et à réaliser qu’il ne manque qu’une option pour que WP expose l’endpoint API dont j’ai besoin (exposer les commentaires Discourse via une API). Je devrai juste l’ajuster un peu. C’est excellent, merci beaucoup :slight_smile:

Juste par curiosité, pourquoi n’est-il pas recommandé de travailler directement avec l’API Discourse côté client ? J’ai quelques idées pour étendre le projet plus tard, s’il y a un budget (avec une fonctionnalité de connexion, par exemple), et j’aimerais qu’il communique avec l’API Discourse. Devrais-je router tout cela via WordPress ? :slight_smile: