Authenticatie & CORS instellen

Voordat een narrow-casting-scherm live data toont, moet je een API-gebruiker aanmaken en CORS toestaan in het admin panel.

1. Hoe de koppeling werkt

Elk voorbeeld haalt data op via een GET-verzoek naar de REST API:

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

• booking/filter — reserveringen (dagrooster, kamerbordjes, slideshow).
• event/filter — publieke events met beschikbaarheid (events-grid).

2. API-gebruiker aanmaken (alleen-lezen)

Let op: de inloggegevens staan leesbaar in de HTML (de browser stuurt ze mee). Gebruik daarom nooit een beheerdersaccount, maar een aparte gebruiker met alleen leesrechten op precies de benodigde producten.

1. Log in op het admin panel als beheerder.
2. Maak onder Gebruikers / Medewerkers een nieuwe gebruiker aan, bijvoorbeeld API_signage.
3. Geef alleen leesrechten op boekingen/events en beperk waar mogelijk tot de relevante producten.
4. Kies een sterk, uniek wachtwoord. Dit vul je in config.js in.

3. Authenticatie in de pagina (Basic Auth)

Vul de gegevens in config.js in; de SDK bouwt hier automatisch de Authorization-header van (Basic base64(gebruiker:wachtwoord)). Heeft een endpoint geen authenticatie nodig (publiek), zet dan auth: null.

4. CORS toestaan in het admin panel

De browser blokkeert standaard verzoeken naar een ander domein dan waar de pagina vandaan komt. Een narrow-casting-pagina draait meestal als file:// of op een lokaal kastje — een andere origin dan https://JOUWOMGEVING.i-reserve.net. Voeg daarom de juiste origin toe aan de CORS-whitelist:

• Los bestand (file://): origin null.
• Lokale webserver: http://localhost of het IP-adres.
• Gehost op een (sub)domein: https://signage.jouwdomein.nl.

In het admin panel onder Instellingen > API / Koppelingen (de naam kan per versie verschillen) staat de lijst met toegestane origins. Vermijd * in productie; whitelist alleen wat je echt gebruikt.

5. Het filter (search)

Het search-veld gebruikt relatieve datums: "0d" = vandaag, "7d" = over 7 dagen, "-1d" = gisteren. Voorbeeld: startdatum >= "0d" AND startdatum <= "0d" AND product IN (101,102,103).

6. Testen

Test eerst buiten de browser met curl (geen CORS-restrictie, puur de auth/filter-check):

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 terug → auth en filter kloppen.
• 401 Unauthorized → gebruiker/wachtwoord of rechten onjuist.
• Leeg in de browser maar wél data via curl → vrijwel zeker CORS.

Beveiligingschecklist

• Aparte API-gebruiker, alleen-lezen, beperkt tot de juiste producten.
• Sterk, uniek wachtwoord; periodiek wijzigen.
• Alleen de benodigde origins in de CORS-whitelist (geen *).
• Geen beheeraccount in config.js.