Guide de démarrage rapide pour JavaScript

Créez une application Web JavaScript qui envoie des requêtes à l'API Reseller.

Les guides de démarrage rapide expliquent comment configurer et exécuter une application qui appelle une API Google Workspace. 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 familiariser avec l'authentification et l'autorisation avant de choisir les identifiants d'accès adaptés à votre application.

Ce guide de démarrage rapide utilise les bibliothèques clientes d'API recommandées par Google Workspace pour gérer certains détails du flux d'authentification et d'autorisation.

Objectifs

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

Prérequis

Node.js et npm installés.
Un projet Google Cloud.

Une instance de domaine de revendeur Google
Un contrat partenaire Google Workspace entièrement exécuté

Configurer votre environnement

Pour suivre ce guide de 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 Reseller.

Activer l'API

Configurer l'écran de consentement OAuth

Si vous utilisez un nouveau projet Google Cloud pour effectuer ce démarrage rapide, configurez l'écran de consentement OAuth. Si vous avez déjà effectué cette étape pour votre projet Cloud, passez à la section suivante.

Dans la console API Google, accédez à Menu > Google Auth Platform > Branding.
Accéder à la page "Branding"
Si vous avez déjà configuré Google Auth Platform, vous pouvez configurer les paramètres de l'écran de consentement OAuth suivants dans Branding, Audience et Accès aux données. Si le message Google Auth Platform pas encore configuré s'affiche, cliquez sur Premiers pas :

Sous Informations sur l'application, dans Nom de l'application, saisissez un nom pour l'application.
Dans Adresse e-mail d'assistance utilisateur, choisissez une adresse e-mail d'assistance à laquelle les utilisateurs peuvent vous contacter s'ils ont des questions sur leur consentement.
Cliquez sur Suivant.
Sous Audience, sélectionnez Interne.
Cliquez sur Suivant.
Sous Coordonnées, saisissez une adresse e-mail à laquelle vous recevrez des notifications en cas de modification de votre projet.
Cliquez sur Suivant.
Sous Terminer, consultez le Règlement sur les données utilisateur dans les services d'API Google et, si vous l'acceptez, sélectionnez J'accepte le Règlement sur les données utilisateur dans les services d'API Google.
Cliquez sur Continuer.
Cliquez sur Créer.

Pour l'instant, vous pouvez ignorer l'ajout de niveaux d'accès. À l'avenir, lorsque vous créerez une application à utiliser en dehors de votre organisation Google Workspace, vous devrez définir le type d'utilisateur sur Externe. Ajoutez ensuite les niveaux d'autorisation dont votre application a besoin. Pour en savoir plus, consultez le guide complet Configurer l'écran de consentement OAuth guide.

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 chacune d'elles.

Dans la console API Google, accédez à Menu > Google Auth Platform > Clients.
Accéder à "Clients"
Cliquez sur Créer un client.
Cliquez sur Type d'application > Application Web.
Dans le champ Nom, saisissez un nom pour l'identifiant. Ce nom ne s'affiche que dans la console API Google.
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 du navigateur. Cela identifie les domaines à partir desquels votre application peut envoyer des requêtes d'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 vers lequel le serveur OAuth 2.0 peut envoyer des réponses.
Cliquez sur Créer.
L'identifiant que vous venez de créer s'affiche sous ID client OAuth 2.0.

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

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

Créer une clé API

Dans la console Google Cloud, accédez à Menu > API et services > Identifiants.
Accéder à "Identifiants"
Cliquez sur Créer des identifiants > Clé API.
Votre nouvelle clé API s'affiche.
- Cliquez sur Copy pour copier votre clé API et l'utiliser dans le code de votre application. Vous pouvez également trouver la clé API dans la section "Clés API" des identifiants de votre projet.
- Pour éviter toute utilisation abusive, nous recommandons d'ajouter des restrictions pour limiter les emplacements et les API pour lesquels la clé API peut être utilisée. Pour en savoir plus, consultez la section Ajouter des restrictions d'API.

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 :

adminSDK/reseller/index.html

Afficher sur GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Google Workspace Reseller API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google WOrkspace Reseller 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/reseller/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/apps.order';

      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 listSubscriptions();
        };

        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 first ten subscriptions.
       */
      async function listSubscriptions() {
        let response;
        try {
          response = await gapi.client.reseller.subscriptions.list({
            'maxResults': 10,
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const subscriptions = response.result.subscriptions;
        if (!subscriptions || subscriptions.length == 0) {
          document.getElementById('content').innerText = 'No subscriptions found.';
          return;
        }
        // Flatten to string to display
        const output = subscriptions.reduce(
            (str, subscription) => {
              const customer = subscription.customerId;
              const sku = subscription.skuId;
              const plan = subscription.plan.planName;
              return `${str}${customer} (${sku},${plan})\n`;
            },
            'Subscriptions:\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.

Exécuter l'exemple

Dans votre répertoire de travail, installez le package http-server :
```
npm install http-server
```
Dans votre répertoire de travail, démarrez un serveur Web :
```
npx http-server -p 8000
```

Dans votre navigateur, accédez à http://localhost:8000.
Une invite s'affiche pour autoriser l'accès :
1. Si vous n'êtes pas encore connecté à votre compte Google, connectez-vous lorsque vous y êtes invité. Si vous êtes connecté à plusieurs comptes, sélectionnez-en un à utiliser pour l'autorisation.
2. Cliquez sur Accepter.

Votre application JavaScript s'exécute et appelle l'API Reseller.

Étapes suivantes

Essayez les API Google Workspace dans l'explorateur d'API.

Guide de démarrage rapide pour JavaScript Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.