Utiliser le modèle de code

La bibliothèque Google Identity Services permet aux utilisateurs de demander un code d'autorisation à Google à l'aide d'un flux d'expérience utilisateur de redirection ou pop-up basé sur un navigateur. Un flux OAuth 2.0 sécurisé est alors lancé et un jeton d'accès est utilisé pour appeler les API Google au nom d'un utilisateur.

Récapitulatif du flux avec code d'autorisation OAuth 2.0:

• D'un geste dans un navigateur, tel qu'un clic sur un bouton, le titulaire du compte Google demande un code d'autorisation à Google.
• Google répond en envoyant un code d'autorisation unique soit à un rappel dans votre application Web JavaScript exécutée dans le navigateur de l'utilisateur, soit en appelant directement le point de terminaison de votre code d'autorisation à l'aide d'une redirection de navigateur.
• Votre plate-forme backend héberge un point de terminaison de code d'autorisation et reçoit le code. Après validation, ce code est échangé contre des jetons d'accès et d'actualisation par utilisateur à l'aide d'une requête adressée au point de terminaison du jeton de Google.
• Google valide le code d'autorisation, confirme que la requête provient de votre plate-forme sécurisée, émet des jetons d'accès et d'actualisation, puis les renvoie en appelant le point de terminaison de connexion hébergé par votre plate-forme.
• Votre point de terminaison de connexion reçoit les jetons d'accès et d'actualisation, le stockant de manière sécurisée pour une utilisation ultérieure.

Initialiser un client Code

La méthode google.accounts.oauth2.initCodeClient() initialise un client de code.

Mode pop-up ou redirection

Vous pouvez choisir de partager un code d'autorisation à l'aide du parcours utilisateur en mode Redirection ou Pop-up. Avec le mode redirection, vous hébergez un point de terminaison d'autorisation OAuth2 sur votre serveur, et Google redirige le user-agent vers ce point de terminaison, en partageant le code d'autorisation en tant que paramètre d'URL. En mode pop-up, vous définissez un gestionnaire de rappel JavaScript, qui envoie le code d'autorisation à votre serveur. Le mode pop-up permet d'offrir une expérience utilisateur fluide sans que les visiteurs n'aient à quitter votre site.

Pour initialiser un client pour:

• Redirigez le flux d'expérience utilisateur, définissez ux_mode sur redirect et la valeur de redirect_uri sur le point de terminaison du code d'autorisation de votre plate-forme. Cette valeur doit correspondre exactement à l'un des URI de redirection autorisés pour le client OAuth 2.0 que vous avez configuré dans la console API. Elle doit également être conforme à nos règles de validation de l'URI de redirection.

• Pop-up d'expérience utilisateur, définissez ux_mode sur popup et la valeur callback sur le nom de la fonction que vous utiliserez pour envoyer des codes d'autorisation à votre plate-forme.

Prévention des attaques CSRF

Afin de prévenir les attaques CSRF (Cross-Site-Request-Forgery), des techniques légèrement différentes sont utilisées pour les flux d'expérience utilisateur en mode redirection et pop-up. En mode redirection, le paramètre state d'OAuth 2.0 est utilisé. Pour en savoir plus sur la génération et la validation du paramètre state, consultez la section 10.12 du document RFC 6749 sur la falsification de requêtes intersites. En mode pop-up, vous ajoutez un en-tête HTTP personnalisé à vos requêtes, puis sur votre serveur, vous confirmez qu'il correspond à la valeur et à l'origine attendues.

Sélectionnez un mode d'expérience utilisateur pour afficher un extrait de code montrant le code d'autorisation et la gestion des fichiers CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Déclencher un flux de code OAuth 2.0

Appelez la méthode requestCode() du client de code pour déclencher le flux utilisateur:

<button onclick="client.requestCode();">Authorize with Google</button>

L'utilisateur devra se connecter à un compte Google et accepter de partager des champs d'application individuels avant de renvoyer un code d'autorisation à votre point de terminaison de redirection ou à votre gestionnaire de rappel.

Gestion du code d'autorisation

Google génère un code d'autorisation unique par utilisateur que vous recevez et validez sur votre serveur backend.

En mode pop-up, le gestionnaire spécifié par callback, qui s'exécute dans le navigateur de l'utilisateur, transmet le code d'autorisation à un point de terminaison hébergé par votre plate-forme.

Pour le mode redirection, une requête GET est envoyée au point de terminaison spécifié par redirect_url. Elle partage le code d'autorisation dans le paramètre code de l'URL. Pour recevoir le code d'autorisation:

• Créez un point de terminaison d'autorisation si vous n'avez pas encore d'implémentation.

• Mettez à jour votre point de terminaison existant pour accepter les requêtes GET et les paramètres d'URL. Auparavant, une requête PUT avec la valeur du code d'autorisation dans la charge utile était utilisée.

Point de terminaison d'autorisation

Le point de terminaison de votre code d'autorisation doit gérer les requêtes GET avec les paramètres de chaîne de requête d'URL suivants:

Exemple de requête GET avec des paramètres d'URL vers un point de terminaison nommé auth-code et hébergé par example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Lorsque le flux de code d'autorisation est lancé par des bibliothèques JavaScript antérieures ou par des appels directs aux points de terminaison Google OAuth 2.0, une requête POST est utilisée.

Exemple de requête POST contenant le code d'autorisation en tant que charge utile dans le corps de la requête HTTP:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Valider la demande

Sur votre serveur, procédez comme suit pour éviter les attaques CSRF :

Vérifiez la valeur du paramètre state pour le mode redirection.

Vérifiez que l'en-tête X-Requested-With: XmlHttpRequest est défini pour le mode pop-up.

Vous ne devez ensuite obtenir des jetons d'actualisation et d'accès auprès de Google que si vous avez d'abord validé la requête de code d'autorisation.

Obtenir des jetons d'accès et d'actualisation

Une fois que votre plate-forme backend a reçu un code d'autorisation de Google et validé la requête, utilisez ce code pour obtenir des jetons d'accès et d'actualisation de Google afin d'effectuer des appels d'API.

Suivez les instructions à partir de l'étape 5: Échanger un code d'autorisation pour des jetons d'actualisation et d'accès du guide Utiliser OAuth 2.0 pour les applications de serveur Web.

Gérer les jetons

Votre plate-forme stocke de manière sécurisée les jetons d'actualisation. Supprimer les jetons d'actualisation stockés lorsque les comptes utilisateur sont supprimés ou lorsque le consentement de l'utilisateur est révoqué par google.accounts.oauth2.revoke ou directement depuis https://myaccount.google.com/permissions.

Vous pouvez éventuellement envisager d'utiliser RISC pour protéger les comptes utilisateur à l'aide de la protection multicompte.

Généralement, votre plate-forme backend appelle les API Google à l'aide d'un jeton d'accès. Si votre application Web appelle également directement les API Google à partir du navigateur de l'utilisateur, vous devez mettre en œuvre un moyen de partager le jeton d'accès avec votre application Web. Cette opération n'entre pas dans le cadre de ce guide. Si vous suivez cette approche et que vous utilisez la bibliothèque cliente des API Google pour JavaScript, utilisez gapi.client.SetToken() pour stocker temporairement le jeton d'accès dans la mémoire du navigateur et permettre à la bibliothèque d'appeler les API Google.