Cette page a été traduite par l'API Cloud Translation.

Guide de démarrage rapide 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 de Google Workspace utilisent les bibliothèques clientes de l'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. Avant de pouvoir exécuter l'exemple d'application, vous devez activer l'authentification et l'autorisation pour chaque démarrage rapide. Si vous ne connaissez pas l'authentification et l'autorisation pour les API Google Workspace, consultez la présentation de l'authentification et des autorisations.

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

Objectifs

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

Prérequis

Python 2.4 ou version ultérieure pour exécuter le serveur Web
Un projet Google Cloud.

Un compte Google pour lequel Google Drive est activé

Configurer votre environnement

Pour effectuer ce démarrage rapide, configurez 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 Drive.

Activer l'API

Autoriser des identifiants pour une application Web

Pour vous authentifier en tant qu'utilisateur final 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 permet d'identifier une seule application sur les 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.

Dans la console Google Cloud, accédez à Menu > API et services > Identifiants.
Accéder à "Identifiants"
Cliquez sur Créer des identifiants > ID client OAuth.
Cliquez sur Type d'application > Application Web.
Dans le champ Nom, saisissez le nom de l'identifiant. Ce nom ne s'affiche que dans la console Google Cloud.
Ajoutez des 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 de 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.
Cliquez sur Créer. L'écran du client OAuth créé s'affiche. Il contient votre nouvel ID client et votre nouveau code secret.
Notez l'ID client. Les codes secrets des clients ne sont pas utilisés pour les applications Web.
Cliquez sur OK. Les nouveaux identifiants apparaissent sous ID client OAuth 2.0.
Facultatif: Si vous créez des identifiants comme condition préalable pour un démarrage rapide JavaScript, vous devez également générer une clé API.

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

Configurer l'exemple

Dans votre répertoire de travail, créez un fichier nommé index.html.

Dans le fichier index.html, collez l'exemple de code suivant:

drive/quickstart/index.html

Afficher sur GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Drive API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive 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/drive/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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 listFiles();
        };

        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 metadata for first 10 files.
       */
      async function listFiles() {
        let response;
        try {
          response = await gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': 'files(id, name)',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const files = response.result.files;
        if (!files || files.length == 0) {
          document.getElementById('content').innerText = 'No files found.';
          return;
        }
        // Flatten to string to display
        const output = files.reduce(
            (str, file) => `${str}${file.name} (${file.id})\n`,
            'Files:\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 :

YOUR_CLIENT_ID: ID client que vous avez créé lorsque vous avez autorisé les identifiants pour une application Web.
YOUR_API_KEY: clé API que vous avez créée en tant que condition préalable

Exécuter l'exemple

Dans votre répertoire de travail, démarrez un serveur Web:
Python 2.x
```
python -m SimpleHTTPServer 8000
```
Python 3.x
```
python3 -m http.server 8000
```
Dans votre navigateur, accédez à http://localhost:8000.
La première fois que vous exécutez l'exemple, vous êtes invité à autoriser l'accès:
1. Si vous n'êtes pas déjà connecté à votre compte Google, vous êtes invité à le faire. Si vous êtes connecté à plusieurs comptes, sélectionnez un compte à utiliser pour l'autorisation.
2. Cliquez sur Accepter.
3. Copiez le code du navigateur, collez-le dans l'invite de ligne de commande, puis appuyez sur Enter.
Les informations d'autorisation sont stockées dans le système de fichiers. Par conséquent, la prochaine fois que vous exécuterez l'exemple de code, aucune autorisation ne vous sera demandée.

Vous venez de créer votre première application JavaScript qui envoie des requêtes à l'API Google Drive.