Cette page a été traduite par l'API Cloud Translation.

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 basé sur une fenêtre pop-up ou une redirection dans le navigateur. Cela lance un flux OAuth 2.0 sécurisé et génère un jeton d'accès utilisé pour appeler les API Google au nom d'un utilisateur.

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

Dans un navigateur, le propriétaire du compte Google demande un code d'autorisation à Google à l'aide d'un geste tel qu'un clic sur un bouton.
Google répond en envoyant un code d'autorisation unique à un rappel dans votre application Web JavaScript s'exécutant dans le navigateur de l'utilisateur, ou en appelant directement votre point de terminaison de code d'autorisation à l'aide d'une redirection de navigateur.
Votre plate-forme de backend héberge un point de terminaison de code d'autorisation et reçoit le code. Une fois validé, ce code est échangé contre des jetons d'accès et d'actualisation par utilisateur à l'aide d'une requête envoyée au point de terminaison de jeton de Google.
Google valide le code d'autorisation, confirme que la demande provient de votre plate-forme sécurisée, émet des jetons d'accès et d'actualisation, puis renvoie les jetons 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, et stocke le jeton d'actualisation de manière sécurisée pour une utilisation ultérieure.

Prérequis

Suivez les étapes décrites dans Configuration pour configurer votre écran de consentement OAuth, obtenir un ID client et charger la bibliothèque cliente.

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'authentification à l'aide du flux utilisateur en mode Redirection ou Pop-up. En 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'authentification 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 peut être utilisé pour offrir une expérience utilisateur fluide sans que les visiteurs aient à quitter votre site.

Pour initialiser un client pour :

Redirigez le flux UX, 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. La 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 Google Cloud. Il doit également respecter les règles de validation des URI de redirection.
Pour le flux UX de la fenêtre pop-up, définissez ux_mode sur popup et la valeur de callback sur le nom de la fonction que vous utiliserez pour envoyer les codes d'autorisation à votre plate-forme. La valeur de redirect_uri est définie par défaut sur l'origine de la page qui appelle initCodeClient. Cette valeur est utilisée ultérieurement dans le flux lorsque le code d'authentification est échangé contre un jeton d'accès ou d'actualisation. Par exemple, https://www.example.com/index.html appelle initCodeClient et l'origine https://www.example.com correspond à la valeur de redirect_url.

Se protéger contre les attaques CSRF

Pour éviter les attaques de falsification de requêtes intersites (CSRF), des techniques légèrement différentes sont utilisées pour les flux UX en mode redirection et pop-up. Pour le mode "Redirection", le paramètre state 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 Cross-Site Request Forgery de la RFC6749. En mode pop-up, vous ajoutez un en-tête HTTP personnalisé à vos requêtes, puis vous vérifiez sur votre serveur qu'il correspond à la valeur et à l'origine attendues.

Choisissez un mode UX pour afficher un extrait de code montrant la gestion du code d'authentification et du CSRF :

Mode de redirection

Initialisez un client vers lequel Google redirige le navigateur de l'utilisateur vers votre point de terminaison d'authentification, en partageant le code d'authentification en tant que paramètre d'URL.

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: 'https://oauth2.example.com/code',
  state: 'YOUR_BINDING_VALUE'
});

Initialisez un client où l'utilisateur commence le flux d'autorisation dans une boîte de dialogue pop-up. Une fois le consentement obtenu, le code d'autorisation est renvoyé par Google au navigateur de l'utilisateur à l'aide d'une fonction de rappel. Une requête POST du gestionnaire de rappel JS envoie le code d'autorisation à un point de terminaison sur le serveur backend, où il est d'abord validé, puis le reste du flux OAuth est effectué.

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', "https://oauth2.example.com/code", 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 le 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 niveaux d'accès individuels avant de renvoyer un code d'autorisation à votre point de terminaison de redirection ou à votre gestionnaire de rappel.

Gestion du code d'authentification

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.

En mode Redirection, une requête GET est envoyée au point de terminaison spécifié par redirect_uri, en partageant 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 qu'il accepte 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

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

Nom	Valeur
authuser	Demande d'authentification de connexion de l'utilisateur
code	Code d'autorisation OAuth2 généré par Google
HD	Domaine hébergé du compte utilisateur
prompt	Boîte de dialogue de consentement de l'utilisateur
champ d'application	Liste d'un ou de plusieurs champs d'application OAuth2 à autoriser, séparés par un espace
state	Variable d'état CRSF

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

Lorsqu'un flux avec code d'autorisation est initié par d'anciennes bibliothèques JavaScript 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.

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

Vous devez ensuite obtenir des jetons d'actualisation et d'accès auprès de Google uniquement si vous avez d'abord vérifié la demande de code d'authentification.

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

Une fois que votre plate-forme de backend a reçu un code d'autorisation de Google et vérifié la demande, utilisez le code d'autorisation 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 : Échangez le code d'autorisation contre 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 les jetons d'actualisation de manière sécurisée. Supprimez les jetons d'actualisation stockés lorsque des 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 avec la protection multi-comptes.

En règle générale, votre plate-forme de backend appelle les API Google à l'aide d'un jeton d'accès. Si votre application Web appelle également directement les API Google depuis le navigateur de l'utilisateur, vous devez implémenter un moyen de partager le jeton d'accès avec votre application Web. Cette opération ne fait pas partie de ce guide. Lorsque 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.