Logo voor Touripedia, met een locatiepin met gestileerd landschap en gebouwen, naast de tekst Touripedia en de tagline Open Tourism Database.
Login
Aanmelden

← Agendapagina met Google Calendar · klus 2 van 4

Klus 2 · ± 10 minuten · eenmalig, gratis

Haal een gratis Google API-sleutel op

De website mag je agenda alleen uitlezen met een sleutel van Google. Die maak je in de Google Cloud Console. Dat ziet er technisch uit, maar je doet er drie dingen: één project aanmaken, één API aanzetten, één sleutel kopiëren.

1

Maak een project aan

  1. Log in op de Google Cloud Console — je gewone Google-account volstaat
  2. Maak een nieuw project aan, bijvoorbeeld met de naam “agenda-website”, en selecteer dat project daarna bovenin de blauwe balk
    Aanmaakscherm van een nieuw project in de Google Cloud Console, met een veld Project name en een knop Create.
    Een naam invullen is genoeg. Het Project ID vult Google zelf in, en “No organization” bij Parent resource laat je staan.
2

Zet de Calendar API aan

Open de Calendar API-pagina en klik op “Enable”.

De pagina van de Google Calendar API in de Cloud Console, met een blauwe knop Enable.
Staat er “Manage” in plaats van “Enable”? Dan is de API al aangezet en ben je hier klaar.
3

Maak de sleutel

  1. Open de Credentials-pagina en klik op “+ Create credentials” → “API key”
    De Credentials-pagina met het geopende menu Create credentials en de eerste optie API key.
    “API key” is de bovenste optie in het uitklapmenu. De andere opties (OAuth, service account) heb je niet nodig.
  2. In het paneel Create API key: geef bij Name een herkenbare naam (bijvoorbeeld “agenda-website”) en kies onderaan bij Select API restrictions alleen Google Calendar API. Daarna zie je Selected APIs: Google Calendar API staan, met daaronder het vinkje Authenticate API calls through a service account — dat laat je uit. Het grijze infoblok erboven gaat over Vertex en Gemini; daar hoef je niets mee
    Het paneel Create API key, met een veld Name en onderaan Select API restrictions op No APIs selected.
    Onderaan staat eerst “No APIs selected”. Klap dat lijstje open.
    Uitgeklapte lijst met API's waarin alleen Google Calendar API is aangevinkt.
    Vink alleen Google Calendar API aan en klik op OK. Typen in het filterveld bovenaan scheelt scrollen.
    Selected APIs met Google Calendar API, een uitgevinkt vakje voor service account, en daaronder Application restrictions op None.
    Zo hoort het te staan: één geselecteerde API, het service-account-vakje leeg. Wat daaronder begint — Application restrictions — is stap 4 hieronder.
  3. Klik op “Create” en kopieer de sleutel — die begint met AIza…. Bewaar hem bij het agenda-ID; je vult hem in klus 3 in bij API_KEY
    Venster API key created met het veld Your API key, waarin de sleutel is afgeschermd.
    De sleutel verschijnt eenmalig in dit venster. Kopieer hem meteen — kwijt? Hij staat terug op de Credentials-pagina. Deel hem verder met niemand.
4

Aanbevolen: beperk de sleutel tot je eigen website

De sleutel komt in de broncode van je pagina te staan en is daar voor iedereen te zien. Met deze instelling is hij voor anderen onbruikbaar.

  1. Klik op de Credentials-pagina op de sleutel die je zojuist gemaakt hebt
  2. Kies bij Application restrictions de optie “Websites”
  3. Voeg als toegestane referrers toe:
    • je eigen domein, bijvoorbeeld https://www.fivelga.nl/*
    • gebruik je Google Sites? Dan óók https://*.googleusercontent.com/* — Google Sites toont embeds vanaf dat domein, en zonder deze regel krijg je een 403-fout terwijl verder alles klopt
    • gebruik je JouwWeb? Dan https://*.jouwweb.nl/*, plus je eigen domein
  4. Opslaan
Tip: test in klus 3 eerst zónder beperking. Werkt de agenda? Zet de beperking dan aan en controleer nog een keer.
← Klus 1: Google AgendaKlus 3: De agenda op je website →