Utiliser OAuth 2.0 pour les applications Web JavaScript

Ce document explique comment mettre en œuvre l'autorisation OAuth 2.0 pour accéder à l'API YouTube Analytics ou à l'API YouTube Reporting à partir d'une application Web JavaScript. OAuth 2.0 permet aux utilisateurs de partager des données spécifiques avec une application tout en préservant la confidentialité de leurs noms d'utilisateur, mots de passe et autres informations. Par exemple, une application peut utiliser OAuth 2.0 pour obtenir l'autorisation de récupérer les données YouTube Analytics d'une chaîne.

Ce flux OAuth 2.0 est appelé flux d'attribution implicite. Il est conçu pour les applications qui n'accèdent aux API que lorsque l'utilisateur est présent dans l'application. Ces applications ne sont pas en mesure de stocker des informations confidentielles.

Dans ce flux, votre application ouvre une URL Google qui utilise des paramètres de requête pour identifier votre application et le type d'accès à l'API dont elle a besoin. Vous pouvez ouvrir l'URL dans la fenêtre actuelle du navigateur ou dans une fenêtre pop-up. L'utilisateur peut s'authentifier auprès de Google et accorder les autorisations demandées. Google redirige ensuite l'utilisateur vers votre application. La redirection inclut un jeton d'accès que votre application vérifie, puis utilise pour envoyer des requêtes API.

Bibliothèque cliente des API Google et Google Identity Services

Si vous utilisez la bibliothèque cliente des API Google pour JavaScript pour effectuer des appels autorisés à Google, vous devez utiliser la bibliothèque JavaScript des services Google Identity pour gérer le flux OAuth 2.0. Veuillez consulter le modèle de jeton des services Google Identity, qui est basé sur le flux d'attribution implicite OAuth 2.0.

Prérequis

Activer les API pour votre projet.

Toute application qui appelle des API Google doit les activer dans API Console.

Pour activer une API pour votre projet, procédez comme suit:

  1. Open the API Library dans Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Sur la page "Bibliothèque", recherchez et activez les API YouTube Analytics et YouTube Reporting. De nombreuses applications qui récupèrent les données YouTube Analytics interagissent également avec l'API YouTube Data. Recherchez toutes les autres API que votre application utilisera et activez-les également.

Créer des identifiants d'autorisation

Toute application qui utilise OAuth 2.0 pour accéder aux API Google doit disposer d'identifiants d'autorisation qui identifient l'application sur le serveur OAuth 2.0 de Google. Les étapes suivantes expliquent comment créer des identifiants pour votre projet. Vos applications peuvent ensuite utiliser ces identifiants pour accéder aux API que vous avez activées pour ce projet.

  1. Go to the Credentials page.
  2. Cliquez sur Créer des identifiants > ID client OAuth.
  3. Sélectionnez le type d'application Application Web.
  4. Remplissez le formulaire. Les applications qui utilisent JavaScript pour effectuer des requêtes API Google autorisées doivent spécifier les origines JavaScript autorisées. Les origines identifient les domaines à partir desquels votre application peut envoyer des requêtes au serveur OAuth 2.0. Ces origines doivent respecter les Règles de validation de Google.

Identifier les niveaux d'accès

Les niveaux d'accès permettent à votre application de ne demander l'accès qu'aux ressources dont elle a besoin, tout en permettant aux utilisateurs de contrôler le niveau d'accès qu'ils accordent à votre application. Ainsi, il peut y avoir une relation inverse entre le nombre de champs d'application demandés et la probabilité d'obtenir le consentement de l'utilisateur.

Avant de commencer à implémenter l'autorisation OAuth 2.0, nous vous recommandons d'identifier les habilitations auxquelles votre application devra être autorisée à accéder.

L'API YouTube Analytics utilise les champs d'application suivants:

Portées
https://www.googleapis.com/auth/youtube Gérez votre compte YouTube
https://www.googleapis.com/auth/youtube.readonly Affichez votre compte YouTube
https://www.googleapis.com/auth/youtubepartner Affichez et gérez vos actifs et le contenu associé sur YouTube
https://www.googleapis.com/auth/yt-analytics-monetary.readonly Affichez des rapports YouTube Analytics monétaires et non monétaires pour votre contenu YouTube
https://www.googleapis.com/auth/yt-analytics.readonly Afficher les rapports YouTube Analytics pour votre contenu YouTube

L'API YouTube Reporting utilise les champs d'application suivants:

Portées
https://www.googleapis.com/auth/yt-analytics-monetary.readonly Affichez des rapports YouTube Analytics monétaires et non monétaires pour votre contenu YouTube
https://www.googleapis.com/auth/yt-analytics.readonly Afficher les rapports YouTube Analytics pour votre contenu YouTube

Le document Champs d'application de l'API OAuth 2.0 contient la liste complète des champs d'application que vous pouvez utiliser pour accéder aux API Google.

Obtenir des jetons d'accès OAuth 2.0

Les étapes suivantes montrent comment votre application interagit avec le serveur OAuth 2.0 de Google pour obtenir le consentement d'un utilisateur afin d'effectuer une requête API en son nom. Votre application doit obtenir ce consentement pour pouvoir exécuter une requête API Google nécessitant l'autorisation de l'utilisateur.

Étape 1: Redirigez les utilisateurs vers le serveur OAuth 2.0 de Google

Pour demander l'autorisation d'accéder aux données d'un utilisateur, redirigez celui-ci vers le serveur OAuth 2.0 de Google.

Points de terminaison OAuth 2.0

Générez une URL pour demander l'accès depuis le point de terminaison OAuth 2.0 de Google à l'adresse https://accounts.google.com/o/oauth2/v2/auth. Ce point de terminaison est accessible via HTTPS ; les connexions HTTP simples sont refusées.

Le serveur d'autorisation Google accepte les paramètres de chaîne de requête suivants pour les applications de serveur Web:

Paramètres
client_id Obligatoire

ID client de votre application. Vous trouverez cette valeur dans API Console Credentials page.

redirect_uri Obligatoire

Détermine où le serveur d'API redirige l'utilisateur une fois que celui-ci a terminé le flux d'autorisation. La valeur doit correspondre exactement à l'un des URI de redirection autorisés pour le client OAuth 2.0, que vous avez configuré dans le fichier API Console Credentials pagede votre client. Si cette valeur ne correspond à aucun URI de redirection autorisé pour le client_id fourni, une erreur redirect_uri_mismatch est générée.

Notez que le schéma http ou https, la casse et la barre oblique finale ("/") doivent tous correspondre.

response_type Obligatoire

Les applications JavaScript doivent définir la valeur du paramètre sur token. Cette valeur indique au serveur d'autorisation Google de renvoyer le jeton d'accès en tant que paire name=value dans l'identifiant de fragment de l'URI (#) vers lequel l'utilisateur est redirigé une fois le processus d'autorisation terminé.

scope Obligatoire

Liste de champs d'application délimités par un espace qui identifient les ressources auxquelles votre application peut accéder pour le compte de l'utilisateur. Ces valeurs déterminent l'écran de consentement que Google présente à l'utilisateur.

Les niveaux d'accès permettent à votre application de ne demander l'accès qu'aux ressources dont elle a besoin, tout en permettant aux utilisateurs de contrôler le niveau d'accès qu'ils accordent à votre application. Ainsi, il existe une relation inverse entre le nombre de champs d'application demandés et la probabilité d'obtenir le consentement de l'utilisateur.

L'API YouTube Analytics utilise les champs d'application suivants:

Portées
https://www.googleapis.com/auth/youtube Gérez votre compte YouTube
https://www.googleapis.com/auth/youtube.readonly Affichez votre compte YouTube
https://www.googleapis.com/auth/youtubepartner Affichez et gérez vos actifs et le contenu associé sur YouTube
https://www.googleapis.com/auth/yt-analytics-monetary.readonly Affichez des rapports YouTube Analytics monétaires et non monétaires pour votre contenu YouTube
https://www.googleapis.com/auth/yt-analytics.readonly Afficher les rapports YouTube Analytics pour votre contenu YouTube

L'API YouTube Reporting utilise les champs d'application suivants:

Portées
https://www.googleapis.com/auth/yt-analytics-monetary.readonly Affichez des rapports YouTube Analytics monétaires et non monétaires pour votre contenu YouTube
https://www.googleapis.com/auth/yt-analytics.readonly Afficher les rapports YouTube Analytics pour votre contenu YouTube

Le document Champs d'application de l'API OAuth 2.0 fournit une liste complète des champs d'application que vous pouvez utiliser pour accéder aux API Google.

Dans la mesure du possible, nous vous recommandons que votre application demande l'accès aux champs d'application des autorisations dans leur contexte. En demandant l'accès aux données utilisateur en contexte via une autorisation incrémentielle, vous aidez les utilisateurs à comprendre plus facilement pourquoi votre application a besoin de cet accès.

state Recommandé

Spécifie toute valeur de chaîne utilisée par votre application pour maintenir l'état entre votre requête d'autorisation et la réponse du serveur d'autorisation. Le serveur renvoie la valeur exacte que vous envoyez en tant que paire name=value dans l'identifiant de fragment d'URL (#) de redirect_uri une fois que l'utilisateur a accepté ou refusé la demande d'accès de votre application.

Vous pouvez utiliser ce paramètre à plusieurs fins, par exemple pour rediriger l'utilisateur vers la ressource appropriée de votre application, pour envoyer des nonces et pour atténuer la falsification de requête intersite. Étant donné que la valeur redirect_uri peut être devinée, l'utilisation d'une valeur state peut vous permettre de vous assurer qu'une connexion entrante est le résultat d'une requête d'authentification. Si vous générez une chaîne aléatoire ou encodez le hachage d'un cookie ou d'une autre valeur qui capture l'état du client, vous pouvez valider la réponse pour vous assurer que la requête et la réponse proviennent du même navigateur, ce qui vous protège contre les attaques telles que la falsification de requêtes intersites. Consultez la documentation OpenID Connect pour découvrir comment créer et confirmer un jeton state.

include_granted_scopes Optional

Permet aux applications d'utiliser l'autorisation incrémentielle pour demander l'accès à des champs d'application supplémentaires en contexte. Si vous définissez la valeur de ce paramètre sur true et que la demande d'autorisation est accordée, le nouveau jeton d'accès couvre également tous les champs d'application auxquels l'utilisateur a précédemment accordé l'accès à l'application. Consultez la section sur l'autorisation incrémentielle pour obtenir des exemples.

login_hint Optional

Si votre application sait quel utilisateur tente de s'authentifier, elle peut utiliser ce paramètre pour fournir un indice au serveur d'authentification de Google. Le serveur utilise cet indice pour simplifier le flux de connexion en préremplissant le champ d'adresse e-mail dans le formulaire de connexion ou en sélectionnant la session de connexion multicompte appropriée.

Définissez la valeur du paramètre sur une adresse e-mail ou un identifiant sub, qui équivaut à l'ID Google de l'utilisateur.

prompt Optional

Liste d'invites sensibles à la casse et séparées par des espaces, qui sont présentées à l'utilisateur. Si vous ne spécifiez pas ce paramètre, l'utilisateur n'en sera invité que la première fois que votre projet demande l'accès. Pour en savoir plus, consultez Demander une nouvelle demande de consentement.

Les valeurs possibles sont :

none N'affichez aucun écran d'authentification ou de consentement. Cette valeur ne doit pas être spécifiée avec d'autres valeurs.
consent Demander le consentement de l'utilisateur
select_account Invitez l'utilisateur à sélectionner un compte.

Exemple de redirection vers le serveur d'autorisation de Google

L'URL d'exemple ci-dessous demande un accès hors connexion (access_type=offline) à un champ d'application permettant de récupérer les rapports YouTube Analytics de l'utilisateur. Il utilise une autorisation incrémentielle pour garantir que le nouveau jeton d'accès couvre tous les champs d'application auxquels l'utilisateur a précédemment accordé l'accès à l'application. L'URL définit également des valeurs pour les paramètres obligatoires redirect_uri, response_type et client_id, ainsi que pour le paramètre state. L'URL contient des sauts de ligne et des espaces pour faciliter la lecture.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Une fois l'URL de requête créée, redirigez l'utilisateur vers elle.

Exemple de code JavaScript

L'extrait de code JavaScript suivant montre comment lancer le flux d'autorisation dans JavaScript sans utiliser la bibliothèque cliente des API Google pour JavaScript. Comme ce point de terminaison OAuth 2.0 n'est pas compatible avec le partage des ressources entre origines multiples (CORS, Cross-Origin Resource Sharing), l'extrait crée un formulaire qui ouvre la requête à ce point de terminaison.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/yt-analytics.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Étape 2: Google invite l'utilisateur à donner son consentement

À cette étape, l'utilisateur décide d'accorder ou non l'accès demandé à votre application. À ce stade, Google affiche une fenêtre de consentement qui affiche le nom de votre application et des services d'API Google auxquels l'utilisateur demande l'autorisation d'accéder, à l'aide des identifiants d'autorisation de l'utilisateur, ainsi qu'un résumé des niveaux d'accès à accorder. L'utilisateur peut alors autoriser l'accès à un ou plusieurs champs d'application demandés par votre application, ou refuser la requête.

Votre application n'a rien à faire à ce stade, car elle attend la réponse du serveur OAuth 2.0 de Google indiquant si un accès a été accordé. Cette réponse est expliquée à l'étape suivante.

Erreurs

Les requêtes envoyées au point de terminaison d'autorisation OAuth 2.0 de Google peuvent afficher des messages d'erreur visibles par l'utilisateur au lieu des flux d'authentification et d'autorisation attendus. Vous trouverez ci-dessous la liste des codes d'erreur courants et des solutions suggérées.

admin_policy_enforced

Le compte Google ne peut pas autoriser un ou plusieurs champs d'application demandés en raison des règles de son administrateur Google Workspace. Consultez l'article d'aide pour les administrateurs Google Workspace Contrôler quelles applications tierces et internes ont accès aux données Google Workspace pour savoir comment un administrateur peut restreindre l'accès à tous les champs d'application ou à des niveaux d'accès sensibles et restreints jusqu'à ce que l'accès soit explicitement accordé à votre ID client OAuth.

disallowed_useragent

Le point de terminaison d'autorisation est affiché dans un user-agent intégré non autorisé par les règles OAuth 2.0 de Google.

Android

Les développeurs Android peuvent rencontrer ce message d'erreur lors de l'ouverture des requêtes d'autorisation dans android.webkit.WebView. Nous recommandons aux développeurs d'utiliser plutôt des bibliothèques Android telles que Google Sign-In pour Android ou la plate-forme AppAuth pour Android d'OpenID Foundation.

Les développeurs Web peuvent rencontrer cette erreur lorsqu'une application Android ouvre un lien Web général dans un user-agent intégré et qu'un utilisateur accède au point de terminaison d'autorisation OAuth 2.0 de Google depuis votre site. Les développeurs doivent autoriser l'ouverture des liens généraux dans le gestionnaire de liens par défaut du système d'exploitation, ce qui inclut à la fois les gestionnaires Android App Links ou l'application de navigateur par défaut. La bibliothèque d'onglets personnalisés Android est également une option compatible.

iOS

Les développeurs iOS et macOS peuvent rencontrer cette erreur lorsqu'ils ouvrent des demandes d'autorisation dans WKWebView. Nous recommandons aux développeurs d'utiliser plutôt des bibliothèques iOS telles que Google Sign-In pour iOS ou AppAuth pour iOS d'OpenID Foundation.

Les développeurs Web peuvent rencontrer cette erreur lorsqu'une application iOS ou macOS ouvre un lien Web général dans un user-agent intégré et qu'un utilisateur accède au point de terminaison d'autorisation OAuth 2.0 de Google depuis votre site. Les développeurs doivent autoriser l'ouverture des liens généraux dans le gestionnaire de liens par défaut du système d'exploitation, ce qui inclut à la fois les gestionnaires de liens universels ou l'application de navigateur par défaut. La bibliothèque SFSafariViewController est également une option compatible.

org_internal

L'ID client OAuth de la requête fait partie d'un projet limitant l'accès aux comptes Google d'une organisation Google Cloud spécifique. Pour en savoir plus sur cette option de configuration, consultez la section Type d'utilisateur de l'article d'aide "Configurer votre écran de consentement OAuth".

invalid_client

L'origine à partir de laquelle la requête a été effectuée n'est pas autorisée pour ce client. Consultez origin_mismatch.

invalid_grant

Lorsque vous utilisez une autorisation incrémentielle, le jeton a peut-être expiré ou été invalidé. Authentifiez à nouveau l'utilisateur et demandez-lui son consentement pour obtenir de nouveaux jetons. Si l'erreur persiste, vérifiez que votre application a été correctement configurée, et que vous utilisez les jetons et paramètres corrects dans votre requête. Sinon, le compte utilisateur a peut-être été supprimé ou désactivé.

origin_mismatch

Le schéma, le domaine et/ou le port du JavaScript à l'origine de la requête d'autorisation peuvent ne pas correspondre à un URI d'origine JavaScript autorisé enregistré pour l'ID client OAuth. Examinez les origines JavaScript autorisées dans Google API Console Credentials page.

redirect_uri_mismatch

Le redirect_uri transmis dans la requête d'autorisation ne correspond à aucun URI de redirection autorisé pour l'ID client OAuth. Examinez les URI de redirection autorisés dans Google API Console Credentials page.

Le schéma, le domaine et/ou le port du JavaScript à l'origine de la requête d'autorisation peuvent ne pas correspondre à un URI d'origine JavaScript autorisé enregistré pour l'ID client OAuth. Examinez les origines JavaScript autorisées dans le Google API Console Credentials page.

Le paramètre redirect_uri peut faire référence au flux OAuth hors bande (OOB) qui est obsolète et n'est plus accepté. Consultez le guide de migration pour mettre à jour votre intégration.

invalid_request

Il y a eu un problème avec votre demande. Plusieurs raisons peuvent expliquer ce problème:

  • Le format de la requête n'a pas été correct.
  • Il manquait des paramètres obligatoires dans la requête
  • La requête utilise une méthode d'autorisation non compatible avec Google. Vérifier que votre intégration OAuth utilise une méthode d'intégration recommandée

Étape 3: Gérez la réponse du serveur OAuth 2.0

Points de terminaison OAuth 2.0

Le serveur OAuth 2.0 envoie une réponse au redirect_uri spécifié dans votre requête de jeton d'accès.

Si l'utilisateur approuve la demande, la réponse contient un jeton d'accès. Si l'utilisateur n'approuve pas la requête, la réponse contient un message d'erreur. Le jeton d'accès ou le message d'erreur est renvoyé sur le fragment de hachage de l'URI de redirection, comme indiqué ci-dessous:

  • Réponse de jeton d'accès:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    Outre le paramètre access_token, la chaîne de fragment contient également le paramètre token_type, qui est toujours défini sur Bearer, et le paramètre expires_in, qui spécifie la durée de vie du jeton, en secondes. Si le paramètre state a été spécifié dans la requête de jeton d'accès, sa valeur est également incluse dans la réponse.

  • Une réponse d'erreur :
    https://oauth2.example.com/callback#error=access_denied

Exemple de réponse du serveur OAuth 2.0

Vous pouvez tester ce flux en cliquant sur l'exemple d'URL suivant, qui demande un accès en lecture seule pour afficher les métadonnées des fichiers dans votre Google Drive:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Une fois le flux OAuth 2.0 terminé, vous serez redirigé vers http://localhost/oauth2callback. Cette URL renverra une erreur 404 NOT FOUND, sauf si votre ordinateur local diffuse un fichier à cette adresse. L'étape suivante fournit plus de détails sur les informations renvoyées dans l'URI lorsque l'utilisateur est redirigé vers votre application.

Appeler des API Google

Points de terminaison OAuth 2.0

Une fois que votre application a obtenu un jeton d'accès, vous pouvez l'utiliser pour appeler une API Google au nom d'un compte utilisateur donné si les champs d'application d'accès requis par l'API ont été accordés. Pour ce faire, incluez le jeton d'accès dans une requête adressée à l'API en incluant un paramètre de requête access_token ou une valeur Bearer d'en-tête HTTP Authorization. Dans la mesure du possible, il est préférable d'utiliser l'en-tête HTTP, car les chaînes de requête ont tendance à être visibles dans les journaux du serveur. Dans la plupart des cas, vous pouvez utiliser une bibliothèque cliente pour configurer vos appels aux API Google (par exemple, lorsque vous appelez l'API YouTube Analytics).

Notez que l'API YouTube Analytics n'est pas compatible avec le flux du compte de service. L'API YouTube Reporting n'est compatible qu'avec les comptes de service pour les propriétaires de contenu YouTube qui possèdent et gèrent plusieurs chaînes YouTube, telles que des maisons de disques et des studios de cinéma.

Vous pouvez tester toutes les API Google et consulter leurs champs d'application sur OAuth 2.0 Playground.

Exemples de requêtes HTTP GET

Un appel au point de terminaison reports.query (l'API YouTube Analytics) à l'aide de l'en-tête HTTP Authorization: Bearer peut se présenter comme suit. Notez que vous devez spécifier votre propre jeton d'accès:

GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Voici un appel à la même API pour l'utilisateur authentifié à l'aide du paramètre de chaîne de requête access_token:

GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

Exemples curl

Vous pouvez tester ces commandes avec l'application de ligne de commande curl. Voici un exemple utilisant l'option d'en-tête HTTP (recommandée):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

Vous pouvez également utiliser l'option du paramètre de chaîne de requête:

curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

Exemple de code JavaScript

L'extrait de code ci-dessous montre comment utiliser CORS (Cross-Origin Resource Sharing) pour envoyer une requête à une API Google. Cet exemple n'utilise pas la bibliothèque cliente des API Google pour JavaScript. Toutefois, même si vous n'utilisez pas la bibliothèque cliente, le guide Compatibilité CORS de la documentation de cette bibliothèque vous aidera probablement à mieux comprendre ces requêtes.

Dans cet extrait de code, la variable access_token représente le jeton que vous avez obtenu pour effectuer des requêtes API au nom de l'utilisateur autorisé. L'exemple complet montre comment stocker ce jeton dans l'espace de stockage local du navigateur et le récupérer lors d'une requête API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Exemple complet

Points de terminaison OAuth 2.0

Cet exemple de code montre comment terminer le flux OAuth 2.0 en JavaScript sans utiliser la bibliothèque cliente des API Google pour JavaScript. Le code correspond à une page HTML qui affiche un bouton permettant d'essayer une requête API. Si vous cliquez sur ce bouton, le code vérifie si la page a stocké un jeton d'accès à l'API dans l'espace de stockage local de votre navigateur. Si tel est le cas, il exécute la requête API. Sinon, il lance le flux OAuth 2.0.

Pour le flux OAuth 2.0, la page est la suivante:

  1. Elle redirige l'utilisateur vers le serveur OAuth 2.0 de Google, qui demande l'accès au champ d'application https://www.googleapis.com/auth/yt-analytics.readonly.
  2. Après avoir accordé (ou refusé) l'accès à un ou plusieurs champs d'application demandés, l'utilisateur est redirigé vers la page d'origine, qui analyse le jeton d'accès à partir de la chaîne d'identifiant de fragment.
  3. La page utilise le jeton d'accès pour effectuer l'exemple de requête API.

    Cette requête API appelle la méthode reports.query de l'API YouTube Analytics pour récupérer le nombre de vues de la chaîne YouTube de l'utilisateur autorisé.

  4. Si la requête s'exécute correctement, la réponse de l'API est enregistrée dans la console de débogage du navigateur.

Vous pouvez révoquer l'accès à l'application sur la page Autorisations de votre compte Google. L'application est répertoriée comme OAuth 2.0 Demo for Google API Docs (Démonstration OAuth 2.0 pour la documentation de l'API Google).

Pour exécuter ce code localement, vous devez définir des valeurs pour les variables YOUR_CLIENT_ID et YOUR_REDIRECT_URI correspondant à vos identifiants d'autorisation. La variable YOUR_REDIRECT_URI doit être définie sur la même URL que celle sur laquelle la page est diffusée. La valeur doit correspondre exactement à l'un des URI de redirection autorisés pour le client OAuth 2.0, que vous avez configuré dans API Console Credentials page. Si cette valeur ne correspond à aucun URI autorisé, une erreur redirect_uri_mismatch est renvoyée. Votre projet doit également avoir activé l'API appropriée pour cette requête.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/yt-analytics.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Règles de validation de l'origine JavaScript

Google applique les règles de validation suivantes aux origines JavaScript afin d'aider les développeurs à sécuriser leurs applications. Vos origines JavaScript doivent respecter ces règles. Reportez-vous à la section 3 du document RFC 3986 pour la définition du domaine, de l'hôte et du schéma mentionnés ci-dessous.

Règles de validation
Schéma

Les origines JavaScript doivent utiliser le schéma HTTPS, et non le protocole HTTP simple. Les URI Localhost (y compris les URI d'adresses IP localhost) ne sont pas concernés par cette règle.

Hôte

Les hôtes ne peuvent pas être des adresses IP brutes. Les adresses IP de l'hôte local sont exemptées de cette règle.

Domaine
  • Les domaines de premier niveau hôtes (domaines de premier niveau) doivent appartenir à la liste des suffixes publics.
  • Les domaines d'hôte ne peuvent pas être “googleusercontent.com”.
  • Les origines JavaScript ne peuvent pas contenir de domaines de raccourcissement d'URL (par exemple, goo.gl), sauf si l'application est propriétaire du domaine.
  • Informations sur l'utilisateur

    Les origines JavaScript ne peuvent pas contenir le sous-composant userinfo.

    Chemin d'accès

    Les origines JavaScript ne peuvent pas contenir le composant de chemin d'accès.

    Requête

    Les origines JavaScript ne peuvent pas contenir le composant de requête.

    Fragment

    Les origines JavaScript ne peuvent pas contenir le composant de fragment.

    Caractères Les origines JavaScript ne peuvent pas contenir certains caractères, y compris :
    • Caractère générique ('*')
    • Caractères ASCII non imprimables
    • Encodages de pourcentage incorrects (tout encodage de pourcentage qui ne suit pas la forme d'encodage URL d'un signe pourcentage suivi de deux chiffres hexadécimaux)
    • Les caractères Null (un caractère NULL encodé, par exemple, %00, %C0%80)

    Autorisation incrémentielle

    Dans le protocole OAuth 2.0, votre application demande l'autorisation d'accéder aux ressources, qui sont identifiées par des champs d'application. Demander l'autorisation des ressources au moment où vous en avez besoin est considéré comme une bonne pratique pour l'expérience utilisateur. Pour mettre en œuvre cette pratique, le serveur d'autorisation de Google accepte l'autorisation incrémentielle. Cette fonctionnalité vous permet de demander les champs d'application selon vos besoins et, si l'utilisateur accorde l'autorisation pour le nouveau champ d'application, renvoie un code d'autorisation pouvant être échangé contre un jeton contenant tous les champs d'application que l'utilisateur a accordés au projet.

    Par exemple, supposons qu'une application récupère des rapports YouTube Analytics, dont certains sont des rapports monétaires nécessitant un accès à un champ d'application supplémentaire qui n'est pas nécessaire pour les autres rapports. Dans ce cas, au moment de la connexion, l'application peut uniquement demander l'accès au champ d'application https://www.googleapis.com/auth/yt-analytics.readonly. Toutefois, si l'utilisateur a essayé de récupérer un rapport monétaire, l'application peut également demander l'accès au champ d'application https://www.googleapis.com/auth/yt-analytics-monetary.readonly.

    Les règles suivantes s'appliquent à un jeton d'accès obtenu à partir d'une autorisation incrémentielle:

    • Le jeton peut être utilisé pour accéder aux ressources correspondant à n'importe quel niveau d'accès déployé dans la nouvelle autorisation combinée.
    • Lorsque vous utilisez le jeton d'actualisation pour l'autorisation combinée afin d'obtenir un jeton d'accès, ce jeton représente l'autorisation combinée et peut être utilisé pour toutes les valeurs scope incluses dans la réponse.
    • L'autorisation combinée inclut tous les niveaux d'accès que l'utilisateur a accordés au projet d'API, même si les autorisations ont été demandées par différents clients. Par exemple, si un utilisateur a accordé l'accès à un champ d'application à l'aide du client de bureau d'une application, puis en accorde un autre à la même application via un client mobile, l'autorisation combinée inclura les deux champs d'application.
    • Si vous révoquez un jeton représentant une autorisation combinée, l'accès à tous les champs d'application de cette autorisation pour le compte de l'utilisateur associé est simultanément révoqué.

    Les exemples de code ci-dessous montrent comment ajouter des niveaux d'accès à un jeton d'accès existant. Cette approche permet à votre application d'éviter d'avoir à gérer plusieurs jetons d'accès.

    Points de terminaison OAuth 2.0

    Dans cet exemple, l'application appelante demande l'accès pour récupérer les données YouTube Analytics de l'utilisateur, en plus de tout autre accès que l'utilisateur a déjà accordé à l'application.

    Pour ajouter des niveaux d'accès à un jeton d'accès existant, incluez le paramètre include_granted_scopes dans votre requête adressée au serveur OAuth 2.0 de Google.

    L'extrait de code suivant montre comment procéder. L'extrait suppose que vous avez stocké les champs d'application pour lesquels votre jeton d'accès est valide dans l'espace de stockage local du navigateur. (L'exemple complet de code stocke une liste des champs d'application pour lesquels le jeton d'accès est valide en définissant la propriété oauth2-test-params.scope dans le stockage local du navigateur.)

    L'extrait compare les champs d'application pour lesquels le jeton d'accès est valide à celui que vous souhaitez utiliser pour une requête particulière. Si le jeton d'accès ne couvre pas ce champ d'application, le flux OAuth 2.0 commence. Ici, la fonction oauth2SignIn est identique à celle fournie à l'étape 2 (et fournie plus loin dans l'exemple complet).

    var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.readonly';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    Révoquer un jeton

    Dans certains cas, un utilisateur peut vouloir révoquer l'accès accordé à une application. Un utilisateur peut révoquer l'accès en accédant aux paramètres du compte. Pour en savoir plus, consultez la section Supprimer l'accès à un site ou une application de la page "Sites et applications tiers ayant accès à votre compte" pour en savoir plus.

    Une application peut également révoquer l'accès qui lui est accordé par programmation. La révocation automatisée est importante lorsqu'un utilisateur se désabonne ou supprime une application, ou lorsque les ressources d'API requises par une application ont changé de manière significative. En d'autres termes, une partie du processus de suppression peut inclure une requête API pour garantir la suppression des autorisations précédemment accordées à l'application.

    Points de terminaison OAuth 2.0

    Pour révoquer un jeton de manière automatisée, votre application envoie une requête à https://oauth2.googleapis.com/revoke et inclut le jeton en tant que paramètre:

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    Le jeton peut être un jeton d'accès ou un jeton d'actualisation. Si le jeton est un jeton d'accès et qu'il possède un jeton d'actualisation correspondant, le jeton d'actualisation sera également révoqué.

    Si la révocation est traitée correctement, le code d'état HTTP de la réponse est 200. Pour les conditions d'erreur, un code d'état HTTP 400 est renvoyé avec un code d'erreur.

    L'extrait de code JavaScript suivant montre comment révoquer un jeton dans JavaScript sans utiliser la bibliothèque cliente des API Google pour JavaScript. Étant donné que le point de terminaison OAuth 2.0 de Google pour la révocation des jetons n'est pas compatible avec le partage des ressources entre origines multiples (CORS), le code crée un formulaire et l'envoie au point de terminaison au lieu d'utiliser la méthode XMLHttpRequest() pour publier la requête.

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }