Configuration

Avant d'ajouter la fonctionnalité Se connecter avec Google, One Tap ou la connexion automatique à votre site Web, configurez votre configuration OAuth et éventuellement la Content Security Policy de votre site.

Obtenir l'ID client de l'API Google

Pour activer la fonctionnalité Se connecter avec Google sur votre site Web, vous devez d'abord configurer l'ID client de l'API Google. Pour ce faire, procédez comme suit :

  1. Ouvrez la page Identifiants de la console des API Google.
  2. Créez ou sélectionnez un projet d'API Google. Si vous disposez déjà d'un projet pour le bouton "Se connecter avec Google" ou Google One Tap, utilisez le projet existant et l'ID client Web. Lorsque vous créez des 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 des identifiants > ID client OAuth, puis dans le champ Type d'application, sélectionnez Application Web pour créer un ID client. Pour utiliser un ID client existant, sélectionnez Application Web.
  4. Ajoutez l'URI de votre site Web au champ 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. Les identifiants peuvent éventuellement être renvoyés via une redirection vers un point de terminaison que vous hébergez plutôt que via un rappel JavaScript. Dans ce cas, ajoutez vos URI de redirection aux 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. Ils doivent respecter les règles de validation de l'URI de redirection. Exemple : https://www.example.com/auth-receiver.

La fonctionnalité Se connecter avec Google et l'authentification One Tap incluent toutes deux un écran de consentement qui indique aux utilisateurs l'application qui demande à accéder à leurs données, le type de données demandé et les conditions applicables.

  1. Ouvrez la page Écran de consentement OAuth dans la section "API et services" de la Google Developers Console.
  2. Si vous y êtes invité, sélectionnez le projet que vous venez de créer.
  3. Sur la page "Écran de consentement OAuth", remplissez le formulaire et cliquez sur le bouton "Enregistrer".

    1. Nom de l'application:nom de l'application demandant le consentement des utilisateurs. Le nom doit refléter précisément votre application et être cohérent avec celui que les utilisateurs voient ailleurs.

    2. Logo de l'application:cette image s'affiche sur l'écran de consentement pour aider les utilisateurs à reconnaître votre application. Le logo est affiché sur l'écran de consentement Se connecter avec Google et dans les paramètres du compte, mais pas dans la boîte de dialogue One Tap.

    3. E-mail d'assistance:s'affiche sur l'écran de consentement pour l'assistance utilisateur et pour les administrateurs G Suite qui évaluent l'accès à votre application pour leurs utilisateurs. Cette adresse e-mail est présentée aux utilisateurs sur l'écran de consentement Se connecter avec Google lorsqu'ils cliquent sur le nom de l'application.

    4. Champs d'application pour les API Google:les champs d'application permettent à votre application d'accéder aux données privées de l'utilisateur. Pour l'authentification, le champ d'application par défaut (adresse e-mail, profil, openid) est suffisant. Vous n'avez pas besoin d'ajouter de champs d'application sensibles. Il est généralement recommandé de demander des niveaux d'accès de manière incrémentale, au moment où l'accès est requis, plutôt qu'à l'avance. En savoir plus

    5. Domaines autorisés:pour vous protéger, vous et vos utilisateurs, Google n'autorise que les applications qui s'authentifient via OAuth à utiliser des domaines autorisés. Les liens de vos applications doivent être hébergés sur des domaines autorisés. En savoir plus

    6. Lien de la page d'accueil de l'application:s'affiche sur l'écran de consentement Se connecter avec Google et sur la clause de non-responsabilité en One Tap conformément au RGPD, sous le bouton "Continuer en tant que". Elle doit être hébergée sur un domaine autorisé.

    7. Lien vers les règles de confidentialité de l'application:il apparaît sur l'écran de consentement Se connecter avec Google et sur la clause de non-responsabilité One-Tap conforme au RGPD, sous le bouton "Continuer en tant que". Elle doit être hébergée sur un domaine autorisé.

    8. Lien vers les conditions d'utilisation de l'application (facultatif) : s'affiche sur l'écran de consentement Se connecter avec Google et sur la clause de non-responsabilité One-Tap conforme au RGPD, sous le bouton "Continuer en tant que". Elle doit être hébergée sur un domaine autorisé.

  4. Vérifiez l'état de validation. Si votre demande doit être validée, cliquez sur le bouton"Envoyer pour validation " pour l'envoyer. Pour en savoir plus, consultez les exigences concernant la validation OAuth.

Affichage des paramètres OAuth lors de la connexion

One Tap

Paramètres de consentement OAuth affichés par One Tap

Le nom de l'application s'affiche lorsque l'utilisateur donne son consentement.

One Tap avec FedCM

Paramètres de consentement OAuth affichés par Chrome One Tap à l'aide de FedCM

Le domaine autorisé de premier niveau s'affiche lorsque l'utilisateur donne son consentement dans Chrome.

Figure 1. Paramètres de consentement OAuth affichés par One Tap dans Chrome.

Content Security Policy

Bien que facultative, une Content Security Policy est recommandée pour sécuriser votre application et empêcher les attaques de type script intersites (XSS). Pour en savoir plus, consultez Présentation de CSP et CSP et XSS.

Votre Content Security Policy peut inclure une ou plusieurs instructions, telles que connect-src, frame-src, script-src, style-src ou default-src.

Si votre CSP inclut:

  • connect-src, ajoutez https://accounts.google.com/gsi/ pour permettre à une page de charger l'URL parente pour les points de terminaison côté serveur de Google Identity Services.
  • frame-src, ajoutez https://accounts.google.com/gsi/ pour autoriser l'URL parente des iFrame des boutons One Tap et Se connecter avec Google.
  • script-src, ajoutez https://accounts.google.com/gsi/client pour autoriser l'URL de la bibliothèque JavaScript Google Identity Services.
  • style-src, ajoutez https://accounts.google.com/gsi/style pour autoriser l'URL des feuilles de style Google Identity Services.
  • La directive default-src, si elle est utilisée, constitue un remplacement si l'une des instructions précédentes (connect-src, frame-src, script-src ou style-src) n'est pas spécifiée. Ajoutez https://accounts.google.com/gsi/ pour permettre à une page de charger l'URL parente pour les points de terminaison côté serveur de Google Identity Services.

Évitez de lister des URL SIG individuelles lorsque vous utilisez connect-src. Cela permet de minimiser les défaillances lors de la mise à jour des SIG. Par exemple, au lieu d'ajouter https://accounts.google.com/gsi/status, utilisez l'URL SIG parente https://accounts.google.com/gsi/.

Cet exemple d'en-tête de réponse permet à Google Identity Services de se charger et de s'exécuter correctement:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Règle d'ouverture multi-origine

Vous devrez peut-être modifier votre Cross-Origin-Opener-Policy (COOP) pour créer des pop-ups si vous utilisez le bouton "Se connecter avec Google" et Google One Tap.

Lorsque FedCM est activé, le navigateur affiche directement les pop-ups, et aucune modification n'est nécessaire.

Toutefois, lorsque FedCM est désactivé, définissez l'en-tête COOP:

  • à same-origin et
  • incluent same-origin-allow-popups.

Si vous ne définissez pas l'en-tête approprié, la communication entre les fenêtres est interrompue, ce qui génère une fenêtre pop-up vide ou des bugs similaires.