Exemples de code JavaScript

L'exemple de code ci-dessous utilise la bibliothèque cliente des API Google pour JavaScript. Vous pouvez télécharger cet exemple à partir du dossier javascript du dépôt de l'exemple de code des API YouTube sur GitHub.

Le code demande à l'utilisateur l'autorisation d'accéder au champ d'application https://www.googleapis.com/auth/yt-analytics.readonly.

return gapi.auth2.getAuthInstance()
    .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
    ...

Votre application devra peut-être également demander l'accès à d'autres champs d'application. Par exemple, une application qui appelle l'API YouTube Analytics et l'API YouTube Data peut avoir besoin que les utilisateurs accordent également l'accès à leur compte YouTube. La présentation des autorisations identifie les champs d'application généralement utilisés dans les applications qui appellent l'API YouTube Analytics.

Récupérer les statistiques quotidiennes de la chaîne

Cet exemple appelle l'API YouTube Analytics pour récupérer les vues quotidiennes et d'autres métriques concernant la chaîne de l'utilisateur autorisé pour l'année civile 2017. L'exemple utilise la bibliothèque cliente JavaScript des API Google.

Configurer les identifiants d'autorisation

Avant d'exécuter cet exemple localement pour la première fois, vous devez configurer les identifiants d'autorisation pour votre projet:

  1. Créez ou sélectionnez un projet dans la console d'API Google.
  2. Activez l'API YouTube Analytics pour votre projet.
  3. En haut de la page Identifiants, sélectionnez l'onglet Écran d'autorisation OAuth. Sélectionnez une adresse e-mail, saisissez un nom de produit si ce n'est pas déjà fait, puis cliquez sur le bouton "Enregistrer".
  4. Sur la page Identifiants, cliquez sur le bouton Créer des identifiants, puis sélectionnez ID client OAuth.
  5. Sélectionnez le type d'application Web.
  6. Dans le champ "Origines JavaScript autorisées", saisissez l'URL à partir de laquelle vous diffuserez l'exemple de code. Vous pouvez par exemple utiliser http://localhost:8000 ou http://yourserver.example.com. Vous pouvez laisser le champ "URI de redirection autorisés" vide.
  7. Cliquez sur le bouton Créer pour terminer la création de vos identifiants.
  8. Avant de fermer la boîte de dialogue, copiez l'ID client que vous devrez insérer dans l'exemple de code.

Créer une copie locale de l'exemple

Ensuite, enregistrez l'exemple dans un fichier local. Dans l'exemple, recherchez la ligne suivante et remplacez YOUR_CLIENT_ID par l'ID client obtenu lors de la configuration de vos identifiants d'autorisation.

gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});

Exécuter le code

Vous êtes maintenant prêt à tester l'exemple:

  1. Ouvrez le fichier local à partir d'un navigateur Web et ouvrez la console de débogage dans le navigateur. Une page contenant deux boutons doit s'afficher.
  2. Cliquez sur le bouton Autoriser et charger pour lancer le parcours d'autorisation de l'utilisateur. Si vous autorisez l'application à récupérer les données de votre chaîne, les lignes suivantes devraient s'afficher dans la console du navigateur :
    Sign-in successful
    GAPI client loaded for API
  3. Si un message d'erreur s'affiche à la place des lignes ci-dessus, vérifiez que vous chargez le script à partir de l'URI de redirection autorisé que vous avez configuré pour votre projet et que vous insérez votre ID client dans le code comme décrit ci-dessus.
  4. Cliquez sur le bouton Exécuter pour appeler l'API. Un objet response doit s'afficher dans la console du navigateur. Dans cet objet, la propriété result est mappée sur un objet contenant les données de l'API.

Exemple de code

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtubeAnalytics.reports.query({
      "ids": "channel==MINE",
      "startDate": "2017-01-01",
      "endDate": "2017-12-31",
      "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
      "dimensions": "day",
      "sort": "day"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>