Configuration

Avant d'ajouter la fonctionnalité Se connecter avec Google, One Tap ou la connexion automatique à votre configurer votre site Web avec OAuth et, si vous le souhaitez, configurer votre site Content Security Policy.

.

Obtenir votre ID client pour les API Google

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

  1. Accédez à la page Identifiants de la console Google APIs.
  2. Créez ou sélectionnez un projet d'API Google. Si vous avez déjà 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 et pour Type d'application sélectionnez Application Web pour créer un ID client. Pour utiliser un ID client existant, sélectionnez un ID de type Application Web.

  4. Ajoutez l'URI de votre site Web aux origines JavaScript autorisées. L'URI inclut uniquement 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 auquel au lieu d'un rappel JavaScript. Dans ce cas, ajoutez vos URI de redirection vers des 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 doit respecter Règles de validation de l'URI de redirection. Exemple : https://www.example.com/auth-receiver.

L'authentification Se connecter avec Google et l'authentification en un seul geste incluent un écran de consentement qui indique aux utilisateurs l'application qui demande l'accès à leurs données, le type de données demandées et les conditions applicables.

  1. Ouvrez l'écran de consentement OAuth de API et Section "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, puis cliquez sur le bouton "Enregistrer".

    1. Nom de l'application : nom de l'application qui demande le consentement. 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 s'affiche sur l'écran de consentement "Se connecter avec Google" et dans les paramètres du compte, mais pas dans la boîte de dialogue "Un geste".

    3. Adresse e-mail de l'assistance:affichée sur l'écran d'autorisation de l'assistance utilisateur et de l'équipe G. Les administrateurs de suite évaluent l'accès de leurs utilisateurs à votre application. Cette adresse e-mail est visible par les utilisateurs sur la page de consentement Se connecter avec Google lorsque l'utilisateur clique 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 votre 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 des niveaux d'accès sensibles. Il est généralement recommandé de demander des champs d'application de manière incrémentielle, au moment où l'accès est requis, plutôt que d'emblée. En savoir plus

    5. Domaines autorisés:afin de vous protéger, vous et vos utilisateurs, nous limitons uniquement permet aux applications qui s'authentifient via OAuth d'utiliser des autorisations Domains (Domaines). Les liens de vos applications doivent être hébergés sur des domaines autorisés. En savoir plus

    6. Lien vers la page d'accueil de l'application : affiché sur l'écran de consentement "Se connecter avec Google" et les informations de clause de non-responsabilité conformes au RGPD en un clic sous le bouton "Continuer en tant que". Doit être hébergé sur un domaine autorisé.

    7. Lien vers les règles de confidentialité de l'application : affiché sur l'écran de consentement de la fonctionnalité Se connecter avec Google et les informations de clause de non-responsabilité conformes au RGPD en un clic sous le bouton "Continuer en tant que". Il doit être hébergé sur un domaine autorisé.

    8. Lien vers les conditions d'utilisation de l'application (facultatif) : affiché sur l'écran de consentement de la fonctionnalité Se connecter avec Google et les informations de clause de non-responsabilité conformes au RGPD pour le mode "Un appui" sous le bouton "Continuer en tant que". Doit être hébergé sur un domaine autorisé.

  4. Vérifiez l'état de validation. Si votre application doit être validée, cliquez sur le bouton "Envoyer pour validation". Consultez Conditions requises pour la validation OAuth pour en savoir plus.

Affichage des paramètres OAuth lors de la connexion

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 a donné son consentement dans Chrome.

One Tap sans FedCM

Paramètres de consentement OAuth tels qu'ils sont affichés par One Tap

Le nom de l'application s'affiche lors du consentement de l'utilisateur.

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

Content Security Policy

Bien que facultatif, un Règlement de sécurité du contenu est recommandé pour sécuriser votre application et éviter les attaques par script intersites (XSS). Pour en savoir plus, consultez la présentation des CSP et CSP et XSS.

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

Si votre CSP inclut les éléments suivants :

  • directive connect-src, ajoutez https://accounts.google.com/gsi/ pour autoriser une page à charger l'URL parente des points de terminaison côté serveur des services d'identité Google.
  • directive frame-src, ajoutez https://accounts.google.com/gsi/ pour autoriser l'URL parente des iFrames des boutons One Tap et Se connecter avec Google.
  • la directive script-src, ajoutez https://accounts.google.com/gsi/client à autoriser l'URL de la bibliothèque JavaScript Google Identity Services.
  • directive 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 une création de remplacement si l'une des les instructions qui précèdent (connect-src, frame-src, script-src ou style-src) n'est pas spécifié, ajoutez https://accounts.google.com/gsi/ à autoriser une page à charger l'URL parente pour Google Identity Services côté serveur les points de terminaison.

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

Cet exemple d'en-tête de réponse permet aux services d'identité Google 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

Le bouton "Se connecter avec Google" et Google One Tap peuvent nécessiter des modifications de votre Cross-Origin-Opener-Policy (COOP) pour créer des pop-ups.

Lorsque le 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 l'en-tête est incorrect, la communication entre les fenêtres est interrompue, dans une fenêtre pop-up vide. ou des bugs similaires.