Configuration

Pour autoriser l'accès aux API Google dans votre application Web à l'aide de la bibliothèque JavaScript Google Identity Services (google.accounts.oauth2), vous devez d'abord :

  1. Obtenez un ID client OAuth 2.0.
  2. Configurez votre écran de consentement OAuth et vos champs d'application.
  3. Chargez la bibliothèque cliente.
  4. Vous pouvez éventuellement configurer une Content Security Policy (CSP) et une Cross-Origin Opener Policy (COOP).

Obtenir votre ID client pour les API Google

Pour activer l'autorisation de compte Google sur votre site Web, vous devez d'abord configurer un ID client pour les API Google. Procédez comme suit :

  1. Ouvrez la page Clients de la console Google Cloud.
  2. Créez ou sélectionnez un projet dans la console Cloud. Lors de la création d'applications de production, plusieurs projets peuvent être nécessaires. Répétez les étapes restantes de cette section pour chaque projet que vous gérez.
  3. Cliquez sur Créer un client, puis sélectionnez Application Web dans le champ Type d'application pour créer un ID client. Pour utiliser un ID client existant, sélectionnez-en un de type Application Web.

  4. Ajoutez l'URI de votre site Web à Origines JavaScript autorisées. L'URI n'inclut que le schéma et le nom d'hôte complet. Exemple : https://www.example.com.

  5. Si vous utilisez le modèle de code d'autorisation avec ux_mode: 'redirect' (ou si vous échangez des codes d'autorisation au niveau d'un point de terminaison de backend), ajoutez vos URI de redirection à URI de redirection autorisés. Les URI de redirection incluent le schéma, le nom d'hôte complet et le chemin d'accès, et doivent respecter les règles de validation des URI de redirection. Par exemple, https://www.example.com/oauth2callback.

Une fois la configuration terminée, notez l'ID client qui a été créé. Vous transmettrez cette valeur dans la propriété client_id lors de l'initialisation de initCodeClient() ou initTokenClient(). (Un code secret du client est également créé. Vous devez le garder confidentiel et l'utiliser uniquement pour les opérations d'échange de jetons côté serveur.)

Lorsque votre application Web demande l'accès aux données utilisateur à l'aide de champs d'application OAuth 2.0, Google affiche un écran de consentement qui indique aux utilisateurs quelle application demande l'accès, quels champs d'application sont demandés et les conditions qui s'appliquent.

  1. Ouvrez la page Branding de la section Google Auth Platform de la console Cloud.
  2. Si vous y êtes invité, sélectionnez le projet que vous avez configuré.
  3. Remplissez le formulaire de branding (nom de l'application, logo de l'application, adresse e-mail d'assistance, domaines autorisés, lien vers la page d'accueil de l'application et lien vers les règles de confidentialité), puis cliquez sur Enregistrer.
  4. Accédez à la page Accès aux données pour configurer les champs d'application de l'API Google dont votre application a besoin. Il est recommandé de demander des champs d'application de manière incrémentielle, au moment où l'accès est requis, plutôt qu'à l'avance.
  5. Vérifiez l'état de votre validation. Si votre application demande des niveaux d'accès sensibles ou restreints, envoyez-la pour validation. Pour en savoir plus, consultez les exigences de validation OAuth.

Content Security Policy et COOP

Si votre application Web applique une Content Security Policy (CSP), autorisez les origines Google Identity Services suivantes :

  • script-src : https://accounts.google.com/gsi/client
  • frame-src : https://accounts.google.com/gsi/
  • connect-src : https://accounts.google.com/gsi/

Pour les flux d'autorisation pop-up (initTokenClient ou initCodeClient avec ux_mode: 'popup'), configurez l'en-tête de réponse HTTP Cross-Origin-Opener-Policy (COOP) sur same-origin-allow-popups afin que la boîte de dialogue puisse communiquer la réponse d'autorisation à votre page.

Étapes suivantes

Ensuite, chargez la bibliothèque cliente sur votre page Web pour commencer à initialiser votre client d'autorisation.