Authentifizierung & CORS einrichten

Bevor ein Narrow-Casting-Bildschirm Live-Daten anzeigt, müssen Sie einen API-Benutzer anlegen und CORS im Admin-Panel zulassen.

1. Wie die Verbindung funktioniert

Jedes Beispiel ruft Daten über eine GET-Anfrage an die REST API ab:

GET https://JOUWOMGEVING.i-reserve.net/api/rest/booking/filter?columns=…&search=…
Authorization: Basic <base64(gebruiker:wachtwoord)>

• booking/filter — Reservierungen (Tagesplan, Raumschilder, Slideshow).
• event/filter — öffentliche Events mit Verfügbarkeit (Events-Grid).

2. API-Benutzer anlegen (nur Lesen)

Hinweis: Die Anmeldedaten stehen lesbar im HTML (der Browser sendet sie mit). Verwenden Sie daher niemals ein Administratorkonto, sondern einen separaten Benutzer mit ausschließlich Leserechten auf genau die benötigten Produkte.

1. Melden Sie sich als Administrator im Admin-Panel an.
2. Legen Sie unter Benutzer / Mitarbeiter einen neuen Benutzer an, zum Beispiel API_signage.
3. Vergeben Sie nur Leserechte auf Buchungen/Events und beschränken Sie diese nach Möglichkeit auf die relevanten Produkte.
4. Wählen Sie ein starkes, eindeutiges Passwort. Dieses tragen Sie in config.js ein.

3. Authentifizierung in der Seite (Basic Auth)

Tragen Sie die Daten in config.js ein; das SDK erstellt daraus automatisch den Authorization-Header (Basic base64(gebruiker:wachtwoord)). Benötigt ein Endpunkt keine Authentifizierung (öffentlich), setzen Sie auth: null.

4. CORS im Admin-Panel zulassen

Der Browser blockiert standardmäßig Anfragen an eine andere Domain als die, von der die Seite stammt. Eine Narrow-Casting-Seite läuft meist als file:// oder auf einem lokalen Gerät — einer anderen Origin als https://JOUWOMGEVING.i-reserve.net. Fügen Sie daher die richtige Origin zur CORS-Whitelist hinzu:

• Einzelne Datei (file://): Origin null.
• Lokaler Webserver: http://localhost oder die IP-Adresse.
• Gehostet auf einer (Sub-)Domain: https://signage.jouwdomein.nl.

Im Admin-Panel unter Einstellungen > API / Verbindungen (der Name kann je nach Version abweichen) finden Sie die Liste der zugelassenen Origins. Vermeiden Sie * in der Produktion; setzen Sie nur das auf die Whitelist, was Sie tatsächlich verwenden.

5. Der Filter (search)

Das Feld search verwendet relative Daten: "0d" = heute, "7d" = in 7 Tagen, "-1d" = gestern. Beispiel: startdatum >= "0d" AND startdatum <= "0d" AND product IN (101,102,103).

6. Testen

Testen Sie zunächst außerhalb des Browsers mit curl (keine CORS-Beschränkung, rein die Auth-/Filter-Prüfung):

curl -u "API_signage:WACHTWOORD" "https://JOUWOMGEVING.i-reserve.net/api/rest/booking/filter?columns=RES_CUSTOM02,RES_FROMTIME&search=startdatum%20%3E%3D%20%220d%22"

• JSON zurück → Auth und Filter stimmen.
• 401 Unauthorized → Benutzer/Passwort oder Rechte falsch.
• Leer im Browser, aber Daten über curl vorhanden → nahezu sicher CORS.

Sicherheits-Checkliste

• Separater API-Benutzer, nur Lesen, beschränkt auf die richtigen Produkte.
• Starkes, eindeutiges Passwort; regelmäßig ändern.
• Nur die benötigten Origins in der CORS-Whitelist (kein *).
• Kein Administratorkonto in config.js.