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 .

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.

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.

        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
      

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );
        

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );
        

          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.

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
          

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

  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.

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