Authentifizierung mit API-Schlüsseln beim Zugriff auf die API über fetch

Entwickler
1

Hallo!

Ich baue gerade eine Headless-WP-Seite für ein Magazin, dessen Community auf Discourse läuft. Die Kommentare sollen in die Artikelseiten integriert werden. Ich habe die API-Dokumentation gefunden und war sehr erfreut, da das Iframe-Embed nicht wirklich das war, was ich suchte, da die Website über einen Dunkel- und Hellmodus verfügt. Daher muss die Kommentartemplate die CSS-Variablen vom Root-Element erben.

Allerdings stoße ich beim direkten Zugriff auf die API (mittels fetch auf https://discourseurl.com/t/{id}.json) ständig auf das Ratenlimit. Daher habe ich überlegt, einen API-Schlüssel hinzuzufügen und mich damit zu authentifizieren.

Ich verwende folgenden Code:

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{Benutzer-API-Schlüssel aus dem Discourse-Admin}',
        },
      })

Ich erhalte jedoch diese Fehlermeldung, egal welchen Schlüssel ich verwende (auch mit einem Admin-Schlüssel):

error_type: "invalid_access"
errors: Array [ "Du hast keine Berechtigung, die angeforderte Ressource anzuzeigen." ]

(Grobe Übersetzung: „Sie haben keinen Zugriff auf die angeforderte Ressource".)

Verpasse ich etwas bezüglich der Funktionsweise von API-Schlüsseln? Was wäre der empfohlene Ansatz, um diese API-Endpunkte abzurufen, ohne das Ratenlimit zu erreichen?

2

Schauen Sie sich den Abschnitt „Authentifizierung

3

Danke! Ich kann mir nicht vorstellen, wie ich den Authentifizierungsteil übersehen habe. Ich habe die Dokumentation immer und immer wieder durchgelesen :joy:

Wie auch immer, ich scheine zwar Fortschritte zu machen, aber jetzt stoße ich in der Browserkonsole auf dieses Problem:
(Reason: missing token 'api-key' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

Ich bin mir nicht sicher, was das verursachen könnte, und habe auch nichts im Forum dazu gefunden. Habe ich etwas übersehen? Seltsam ist, dass ich den Header in meinem Code als ‘Api-Key’ angebe. Hast du eine Idee? :slight_smile:

4

Das klingt so, als würdest du eine JavaScript-App entwickeln und die API-Anfragen direkt vom Browser stellen?

Der empfohlene Ansatz wäre, die API-Aufrufe serverseitig an den Discourse-Server zu senden und deine JavaScript-App mit deinem Server sprechen zu lassen, genau wie sie mit WordPress spricht. Auf diese Weise vermeidest du CORS-Probleme.

5

Ah, super! Das hat mich dazu gebracht, den WP Discourse-Code durchzusehen, und ich habe festgestellt, dass ich nur eine Option entfernt davon bin, dass WP die benötigte API-Endpunkt freigelegt (die Discourse-Kommentare über eine API verfügbar macht). Ich muss es nur ein wenig anpassen. Das ist hervorragend, vielen Dank :slight_smile:

Nur aus Neugier: Warum wird nicht empfohlen, direkt mit der Discourse-API vom Client aus zu arbeiten? Ich habe einige Ideen, das Projekt später auszubauen, falls ein Budget vorhanden ist (zum Beispiel mit einer Login-Funktion), und ich würde gerne, dass es mit der Discourse-API kommuniziert. Müsste ich dann alles über WordPress routen? :slight_smile: