Utiliser le modèle de jeton

La bibliothèque JavaScript google.accounts.oauth2 vous aide à inviter l'utilisateur et d'obtenir un jeton d'accès pour utiliser les données utilisateur. Il est basé sur les Flux d'attribution implicite OAuth 2.0 et conçu pour vous permettre d'appeler Google API directement via REST et CORS, ou la bibliothèque cliente des API Google pour JavaScript (également appelé gapi.client) pour bénéficier d'un accès simple et flexible à nos des API plus complexes.

Avant d'accéder à des données utilisateur protégées depuis un navigateur, les utilisateurs de votre site se déclenchent le sélecteur de compte, les processus de connexion et de consentement de Google, et enfin Les serveurs OAuth de Google émettent et renvoient un jeton d'accès à votre application Web.

Dans le modèle d'autorisation basé sur les jetons, il n'est pas nécessaire de stocker par utilisateur d'actualiser les jetons sur votre serveur backend.

Nous vous recommandons de suivre la méthode décrite ici plutôt que techniques couvertes par l'ancien OAuth 2.0 pour les applications Web côté client .

Remarque :Pour des raisons de sécurité, seule l'expérience utilisateur pop-up est prise en charge.

Configuration

Recherchez ou créez un ID client en suivant la procédure décrite dans l'article Obtenir Guide sur l'ID client pour les API Google. Ensuite, ajoutez la bibliothèque cliente aux pages. de votre site qui appelleront les API Google. Enfin, initialisez le jeton client. En règle générale, cette opération s'effectue dans le gestionnaire onload de la bibliothèque cliente.

Initialiser un client de jeton

Appelez initTokenClient() pour initialiser un nouveau client de jeton avec le ID client, vous pouvez éventuellement inclure une liste d'un ou plusieurs champs d'application auxquels l'utilisateur doit accéder à:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

Déclencher le flux de jetons OAuth 2.0

Utilisez la méthode requestAccessToken() pour déclencher le flux d'expérience utilisateur du jeton et obtenir une un jeton d'accès. Google invite l'utilisateur à:

• choisir son compte,
• connectez-vous au compte Google si ce n'est pas déjà fait,
• autoriser votre application Web à accéder à chaque champ d'application demandé.

Un geste de l'utilisateur déclenche le flux de jetons: <button onclick="client.requestAccessToken();">Authorize me</button>

Google renvoie ensuite un TokenResponse contenant un jeton d'accès et une liste de champs d'application auxquels l'utilisateur a accordé l'accès à votre gestionnaire de rappel, ou ayant généré une erreur.

Les utilisateurs peuvent fermer le sélecteur de compte ou les fenêtres de connexion. Dans ce cas, de rappel ne sera pas appelée.

Gérer le consentement

La conception et l'expérience utilisateur de votre application ne doivent être mises en œuvre qu'après d'examiner attentivement les règles OAuth 2.0 de Google. Ces règles couvrent travailler avec plusieurs champs d'application, savoir quand et comment gérer le consentement des utilisateurs, etc.

L'autorisation incrémentielle est une règle et une méthodologie de conception d'applications permettant de demander l'accès aux ressources à l'aide de champs d'application, uniquement en fonction des besoins plutôt qu'en amont en même temps. Les utilisateurs peuvent approuver ou refuser le partage des ressources individuelles demandées par votre application, il s'agit d'autorisations précises.

Au cours de ce processus, Google demande le consentement de l'utilisateur, en répertoriant individuellement chaque le champ d'application demandé, les utilisateurs sélectionnent les ressources à partager avec votre application et Enfin, Google appelle votre fonction de rappel pour renvoyer un jeton d'accès et un identifiant aux niveaux d'accès approuvés. Votre application gère ensuite de manière sécurisée les différents résultats possible avec des autorisations précises.

Important :Pour donner le consentement, les utilisateurs doivent d'abord se connecter. Pour un retour Si l'utilisateur est déjà connecté à votre site, il ne pourra pas de sélectionner un compte chaque fois que votre application demande des champs d'application supplémentaires.

Autorisation incrémentielle

Pour les applications Web, les deux scénarios de haut niveau suivants illustrent la hausse l'autorisation à l'aide de:

• Une application Ajax d'une seule page, souvent utilisant XMLHttpRequest avec un accès dynamique à ressources.
• Plusieurs pages Web, les ressources sont séparées et gérées page par page.

Ces deux scénarios sont présentés pour illustrer les considérations de conception et méthodologies, mais ne constituent pas des recommandations exhaustives pour intégrer le consentement dans votre application. Les applications du monde réel peuvent utiliser une variante ou combinaison de ces techniques.

Ajax

Ajouter la prise en charge des autorisations incrémentielles dans votre application en effectuant plusieurs appels à requestAccessToken() et à l'aide de l'objet OverridableTokenClientConfig scope pour demander des niveaux d'accès individuels au moment où ils sont nécessaires. uniquement en cas de nécessité. Dans cet exemple, les ressources seront demandées et visibles qu'après un geste de l'utilisateur développé une section de contenu réduite.

Application Ajax

Initialisez le client de jeton au chargement de la page: const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); Demander le consentement et obtenir des jetons d'accès à l'aide de gestes de l'utilisateur cliquez sur "+" pour l'ouvrir: Documents à lire Afficher les documents récents client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); Événements à venir Afficher les informations de l'agenda client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); Carrousel de photos Afficher des photos client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) );

Chaque appel à requestAccessToken déclenche un moment de consentement de l'utilisateur. Votre application n'ont accès qu'aux ressources requises par la section choisie par l'utilisateur ce qui limite le partage des ressources par le biais du choix de l'utilisateur.

Plusieurs pages Web

Lors de la conception d'une autorisation incrémentielle, plusieurs pages sont utilisées pour demander uniquement les champs d'application requis pour charger une page, ce qui réduit la complexité et la nécessité effectuer plusieurs appels pour obtenir le consentement de l'utilisateur et récupérer un jeton d'accès.

Application multipage

Page Web Code Page 1. Documents à lire const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", scope: 'https://www.googleapis.com/auth/documents.readonly', }); client.requestAccessToken(); Page 2. Événements à venir const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", scope: 'https://www.googleapis.com/auth/calendar.readonly', }); client.requestAccessToken(); Page 3. Carrousel de photos const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", scope: 'https://www.googleapis.com/auth/photoslibrary.readonly', }); client.requestAccessToken();

Chaque page demande le champ d'application nécessaire et obtient un jeton d'accès en appelant initTokenClient() et requestAccessToken() au moment du chargement. Dans ce scénario, des pages Web individuelles sont utilisées pour séparer clairement les fonctionnalités et par champ d'application. En situation réelle, des pages individuelles peuvent demander plusieurs champs d'application associés.

Autorisations précises

Les autorisations précises sont traitées de la même manière dans tous les scénarios. après requestAccessToken() appelle votre fonction de rappel et un jeton d'accès renvoyé, vérifiez que l'utilisateur a approuvé les champs d'application demandés en utilisant hasGrantedAllScopes() ou hasGrantedAnyScope(). Exemple :

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

Toutes les autorisations précédemment acceptées lors de sessions ou de demandes précédentes seront également incluses dans la réponse. Le consentement de l'utilisateur est conservé pour chaque utilisateur. l'ID client, et persiste lors de plusieurs appels à initTokenClient() ou requestAccessToken() Par défaut, le consentement de l'utilisateur n'est nécessaire que pour chaque fois qu'un utilisateur visite votre site Web et demande un nouveau champ d'application, mais peut être demandé sur chaque chargement de page à l'aide de prompt=consent dans les objets de configuration du client de jetons.

Remarque :Tous les champs d'application précédemment approuvés sont renvoyés par TokenResponse et visibles aux utilisateurs sur myaccount.google.com/permissions, pour supprimer les habilitations de votre application, et mettez à jour ces sources, appelez google.accounts.oauth2.revoke() et initialisez-la à l'aide de prompt=consent.

Utiliser des jetons

Dans le modèle de jeton, un jeton d'accès n'est pas stocké par le système d'exploitation ou le navigateur, un nouveau jeton est d'abord obtenu au moment du chargement de la page, ou en déclenchant par la suite appeler requestAccessToken() via un geste de l'utilisateur (appuyer sur un bouton, par exemple).

Utiliser REST et CORS avec les API Google

Un jeton d'accès peut être utilisé pour envoyer des requêtes authentifiées aux API Google à l'aide de REST et CORS. Cela permet aux utilisateurs de se connecter, d'accorder leur consentement, et à Google d'émettre un et votre site pour qu'ils fonctionnent avec les données de l'utilisateur.

Dans cet exemple, vous allez afficher les événements d'agenda à venir des utilisateurs connectés à l'aide de la méthode jeton d'accès renvoyé par tokenRequest():

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

Pour en savoir plus, consultez Utiliser CORS pour accéder aux API Google.

La section suivante explique comment intégrer facilement des API plus complexes.

Utilisation de la bibliothèque JavaScript des API Google

Le client de jetons fonctionne avec la bibliothèque cliente des API Google pour JavaScript. Consultez l'extrait de code ci-dessous.

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

Expiration des jetons

Les jetons d'accès ont une durée de vie courte. Si le jeton d'accès expire avant la fin de la session de l'utilisateur, obtenez un nouveau jeton en appelant requestAccessToken() à partir d'un événement déclenché par l'utilisateur, comme une pression sur un bouton.

Utiliser un jeton d'accès pour révoquer le consentement

Appelez la méthode google.accounts.oauth2.revoke pour supprimer le consentement de l'utilisateur. un accès aux ressources pour tous les niveaux d'accès accordés à votre application. Un accès valide Vous devez disposer d'un jeton pour révoquer cette autorisation:

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });