Utiliser le modèle de code

La bibliothèque Google Identity Services permet aux utilisateurs de demander une autorisation à l'aide d'un pop-up dans un navigateur ou d'un flux UX de redirection. Ce démarre un flux OAuth 2.0 sécurisé et génère un jeton d'accès utilisé pour appeler aux API Google pour le compte d'un utilisateur.

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

• Dans un navigateur, d'un geste (un clic sur un bouton, par exemple), le compte Google propriétaire demande un code d'autorisation à Google.
• Google répond en envoyant un code d'autorisation unique à un rappel dans votre application Web JavaScript exécutée dans le navigateur de l'utilisateur ou appelle 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 du code source. Après validation, ce code est échangé contre chaque accès utilisateur et actualiser les jetons à l'aide d'une requête au point de terminaison des jetons de Google.
• Google valide le code d'autorisation et confirme l'origine de la requête depuis votre plate-forme sécurisée, émet des jetons d'accès et d'actualisation, puis renvoie le 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 pour une utilisation ultérieure.

Initialiser un client de 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 de la propriété Redirect ou en mode Pop-up. Avec le mode Redirection, vous hébergez une autorisation OAuth2 sur votre serveur et que Google redirige le user-agent vers ce point de terminaison, en partageant le code d'autorisation en tant que paramètre d'URL. Pour le mode pop-up, vous définissez un qui envoie le code d'autorisation à votre serveur. Mode pop-up peuvent être utilisés pour 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 au 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 protocole que vous avez configuré dans la console APIs. Il doit également être conforme à nos Règles de validation de l'URI de redirection.

• Flux d'expérience utilisateur pop-up, définissez ux_mode sur popup et la valeur de callback sur nom de la fonction que vous utiliserez pour envoyer les codes d'autorisation Google Cloud.

Prévention des attaques CSRF

Pour empêcher les attaques de falsification de requête intersites (CSRF) sont utilisées pour les flux UX en mode Redirection et Pop-up. Redirection le paramètre OAuth 2.0 state est utilisé. Consultez la section 10.12 du document RFC6749. Falsification de requête intersites pour en savoir plus sur la génération et la validation du paramètre state. Avec le mode pop-up, vous ajoutez un en-tête HTTP personnalisé à vos requêtes, puis confirmez sur votre serveur elle correspond à la valeur et à l'origine attendues.

Choisissez un mode UX pour afficher un extrait de code montrant le code d'autorisation et la gestion de 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 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 champs d'application individuels avant de renvoyer un code d'autorisation un point de terminaison de redirection ou votre gestionnaire de rappel.

Gestion des codes d'autorisation

Google génère un code d'autorisation unique pour chaque utilisateur. vérifier sur votre serveur backend.

Pour le mode pop-up, le gestionnaire spécifié par callback, s'exécutant dans le 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_url, en partageant le code d'autorisation dans le paramètre code de l'URL. À recevez le code d'autorisation:

• Créez un point de terminaison d'autorisation si vous ne disposez d'aucun la mise en œuvre ou

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

Point de terminaison d'autorisation

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

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 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 devez ensuite obtenir des jetons d'actualisation et d'accès auprès de Google uniquement si vous avez d’abord vérifié avec succès la demande 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 la part de Google et vérifie la demande, utilisez le code d'autorisation pour obtenir des jetons d'accès et d'actualisation à partir de à Google d'effectuer des appels d'API.

Suivez les instructions à partir de l'Étape 5: Échangez le code d'autorisation pour jetons d'actualisation et d'accès du cours Using OAuth 2.0 for Web Server (Utiliser OAuth 2.0 pour un serveur Web) Applications.

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 le consentement de l'utilisateur est révoqué google.accounts.oauth2.revoke ou directement à partir de https://myaccount.google.com/permissions.

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

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