Guide de démarrage rapide pour JavaScript

Les guides de démarrage rapide expliquent comment configurer et exécuter une application qui appelle une API Google Workspace.

Les guides de démarrage rapide Google Workspace utilisent les bibliothèques clientes des API pour gérer certains détails du flux d'authentification et d'autorisation. Nous vous recommandons d'utiliser les bibliothèques clientes pour vos propres applications. Ce guide de démarrage rapide utilise une approche d'authentification simplifiée adaptée à un environnement de test. Pour un environnement de production, nous vous recommandons de vous renseigner sur l'authentification et l'autorisation avant de choisir les identifiants d'accès appropriés pour votre application.

Créer une application Web JavaScript qui envoie des requêtes à l'API Google Calendar

Objectifs

  • configurer votre environnement ;
  • Configurez l'exemple.
  • Exécutez l'exemple.

Prérequis

  • Un compte Google pour lequel Google Agenda est activé

Configurer votre environnement

Pour suivre ce guide de démarrage rapide, vous devez configurer votre environnement.

Activer l'API

Avant d'utiliser les API Google, vous devez les activer dans un projet Google Cloud. Vous pouvez activer une ou plusieurs API dans un même projet Google Cloud.
  • Dans la console Google Cloud, activez l'API Google Calendar.

    Activer l'API

Si vous utilisez un nouveau projet Google Cloud pour suivre ce guide de démarrage rapide, configurez l'écran de consentement OAuth et ajoutez-vous en tant qu'utilisateur test. Si vous avez déjà effectué cette étape pour votre projet Cloud, passez à la section suivante.

  1. Dans la console Google Cloud, accédez à Menu > API et services > Écran de consentement OAuth.

    Accéder à l'écran de consentement OAuth

  2. Pour Type d'utilisateur, sélectionnez Interne, puis cliquez sur Créer.
  3. Remplissez le formulaire d'enregistrement de l'application, puis cliquez sur Save and Continue (Enregistrer et continuer).
  4. Pour l'instant, vous pouvez ignorer l'ajout de champs d'application et cliquer sur Enregistrer et continuer. Par la suite, lorsque vous créerez une application destinée à être utilisée en dehors de votre organisation Google Workspace, vous devrez définir le type d'utilisateur sur Externe, puis ajouter les niveaux d'autorisation requis par votre application.

  5. Consultez le résumé d'enregistrement de votre application. Pour apporter des modifications, cliquez sur Modifier. Si l'enregistrement de l'application semble correct, cliquez sur Back to Dashboard (Revenir au tableau de bord).

Autoriser les identifiants pour une application Web

Pour authentifier les utilisateurs finaux et accéder aux données utilisateur dans votre application, vous devez créer un ou plusieurs ID client OAuth 2.0. Un ID client sert à identifier une application unique auprès des serveurs OAuth de Google. Si votre application s'exécute sur plusieurs plates-formes, vous devez créer un ID client distinct pour chaque plate-forme.
  1. Dans la console Google Cloud, accédez à Menu > API et services > Identifiants.

    Accéder à "Identifiants"

  2. Cliquez sur Créer des identifiants > ID client OAuth.
  3. Cliquez sur Type d'application > Application Web.
  4. Dans le champ Name (Nom), saisissez un nom pour l'identifiant. Ce nom ne s'affiche que dans la console Google Cloud.
  5. Ajoutez les URI autorisés associés à votre application :
    • Applications côté client (JavaScript) : sous Origines JavaScript autorisées, cliquez sur Ajouter un URI. Saisissez ensuite un URI à utiliser pour les requêtes du navigateur. Ce champ identifie les domaines à partir desquels votre application peut envoyer des requêtes API au serveur OAuth 2.0.
    • Applications côté serveur (Java, Python, etc.) : sous URI de redirection autorisés, cliquez sur Ajouter un URI. Saisissez ensuite un URI de point de terminaison auquel le serveur OAuth 2.0 peut envoyer des réponses.
  6. Cliquez sur Créer. L'écran du client OAuth créé s'affiche, avec l'ID et le code secret du client que vous venez de créer.

    Notez l'ID client. Les codes secrets des clients ne sont pas utilisés pour les applications Web.

  7. Cliquez sur OK. Les nouveaux identifiants s'affichent sous ID client OAuth 2.0.

Notez ces identifiants, car vous en aurez besoin ultérieurement dans ce guide de démarrage rapide.

Créer une clé API

  1. Dans la console Google Cloud, accédez à Menu > API et services > Identifiants.

    Accéder à "Identifiants"

  2. Cliquez sur Créer des identifiants > Clé API.
  3. Votre nouvelle clé API s'affiche.
    • Cliquez sur Copier pour copier votre clé API afin de l'utiliser dans le code de votre application. La clé API est également disponible dans la section "Clés API" des identifiants de votre projet.
    • Cliquez sur Restreindre la clé pour mettre à jour les paramètres avancés et limiter l'utilisation de votre clé API. Pour en savoir plus, consultez Appliquer des restrictions de clé API.

Configurer l'exemple

  1. Dans votre répertoire de travail, créez un fichier nommé index.html.
  2. Dans le fichier index.html, collez l'exemple de code suivant:

    calendar/quickstart/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>Google Calendar API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Google Calendar API Quickstart</p>
    
        <!--Add buttons to initiate auth sequence and sign out-->
        <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
        <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
    
        <pre id="content" style="white-space: pre-wrap;"></pre>
    
        <script type="text/javascript">
          /* exported gapiLoaded */
          /* exported gisLoaded */
          /* exported handleAuthClick */
          /* exported handleSignoutClick */
    
          // TODO(developer): Set to client ID and API key from the Developer Console
          const CLIENT_ID = '<YOUR_CLIENT_ID>';
          const API_KEY = '<YOUR_API_KEY>';
    
          // Discovery doc URL for APIs used by the quickstart
          const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
          let tokenClient;
          let gapiInited = false;
          let gisInited = false;
    
          document.getElementById('authorize_button').style.visibility = 'hidden';
          document.getElementById('signout_button').style.visibility = 'hidden';
    
          /**
           * Callback after api.js is loaded.
           */
          function gapiLoaded() {
            gapi.load('client', initializeGapiClient);
          }
    
          /**
           * Callback after the API client is loaded. Loads the
           * discovery doc to initialize the API.
           */
          async function initializeGapiClient() {
            await gapi.client.init({
              apiKey: API_KEY,
              discoveryDocs: [DISCOVERY_DOC],
            });
            gapiInited = true;
            maybeEnableButtons();
          }
    
          /**
           * Callback after Google Identity Services are loaded.
           */
          function gisLoaded() {
            tokenClient = google.accounts.oauth2.initTokenClient({
              client_id: CLIENT_ID,
              scope: SCOPES,
              callback: '', // defined later
            });
            gisInited = true;
            maybeEnableButtons();
          }
    
          /**
           * Enables user interaction after all libraries are loaded.
           */
          function maybeEnableButtons() {
            if (gapiInited && gisInited) {
              document.getElementById('authorize_button').style.visibility = 'visible';
            }
          }
    
          /**
           *  Sign in the user upon button click.
           */
          function handleAuthClick() {
            tokenClient.callback = async (resp) => {
              if (resp.error !== undefined) {
                throw (resp);
              }
              document.getElementById('signout_button').style.visibility = 'visible';
              document.getElementById('authorize_button').innerText = 'Refresh';
              await listUpcomingEvents();
            };
    
            if (gapi.client.getToken() === null) {
              // Prompt the user to select a Google Account and ask for consent to share their data
              // when establishing a new session.
              tokenClient.requestAccessToken({prompt: 'consent'});
            } else {
              // Skip display of account chooser and consent dialog for an existing session.
              tokenClient.requestAccessToken({prompt: ''});
            }
          }
    
          /**
           *  Sign out the user upon button click.
           */
          function handleSignoutClick() {
            const token = gapi.client.getToken();
            if (token !== null) {
              google.accounts.oauth2.revoke(token.access_token);
              gapi.client.setToken('');
              document.getElementById('content').innerText = '';
              document.getElementById('authorize_button').innerText = 'Authorize';
              document.getElementById('signout_button').style.visibility = 'hidden';
            }
          }
    
          /**
           * Print the summary and start datetime/date of the next ten events in
           * the authorized user's calendar. If no events are found an
           * appropriate message is printed.
           */
          async function listUpcomingEvents() {
            let response;
            try {
              const request = {
                'calendarId': 'primary',
                'timeMin': (new Date()).toISOString(),
                'showDeleted': false,
                'singleEvents': true,
                'maxResults': 10,
                'orderBy': 'startTime',
              };
              response = await gapi.client.calendar.events.list(request);
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
    
            const events = response.result.items;
            if (!events || events.length == 0) {
              document.getElementById('content').innerText = 'No events found.';
              return;
            }
            // Flatten to string to display
            const output = events.reduce(
                (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
                'Events:\n');
            document.getElementById('content').innerText = output;
          }
        </script>
        <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
        <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
      </body>
    </html>

    Remplacez les éléments suivants :

Exécuter l'exemple

  1. Dans votre répertoire de travail, installez le package http-server:

    npm install http-server
    
  2. Dans votre répertoire de travail, démarrez un serveur Web:

    npx http-server -p 8000
    
  1. Dans votre navigateur, accédez à http://localhost:8000.
  2. Vous êtes invité à autoriser l'accès :
    1. Si vous n'êtes pas déjà connecté à votre compte Google, connectez-vous lorsque vous y êtes invité. Si vous êtes connecté à plusieurs comptes, sélectionnez un compte à utiliser pour l'autorisation.
    2. Cliquez sur Accept (Accepter).

Votre application JavaScript exécute et appelle l'API Google Calendar.

Étapes suivantes