Configuration

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

Obtenir votre ID client pour les API Google

Pour activer Se connecter avec Google sur votre site Web, vous devez d'abord configurer votre ID client d'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 Google APIs. 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, puis 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 à 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 également être renvoyés à l'aide d'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, et doivent respecter les règles de validation des URI de redirection. Exemple : https://www.example.com/auth-receiver.

Configurer votre écran de consentement OAuth

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 la page Écran de consentement OAuth de la section "API et services" de la Google Developer 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 One Tap.

   3. Adresse e-mail d'assistance:s'affiche sur l'écran d'autorisation pour l'assistance utilisateur et pour les administrateurs G Suite évaluant l'accès de leurs utilisateurs à votre application. 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:ils permettent à votre application d'accéder aux données privées de l'utilisateur. Pour l'authentification, le niveau d'accès 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 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:pour vous protéger, vous et vos utilisateurs, Google n'autorise que les applications qui s'authentifient à l'aide d'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 vers la page d'accueil de l'application:affiché sur l'écran de consentement Se connecter avec Google et dans la clause de non-responsabilité One-Tap conforme au RGPD 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 Se connecter avec Google et sur la clause de non-responsabilité One-Tap conforme au RGPD 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 Se connecter avec Google et sur la clause de non-responsabilité One-Tap conforme au RGPD 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". Pour en savoir plus, consultez les Exigences de validation OAuth.

Affichage des paramètres OAuth lors de la connexion

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

Content Security Policy

Bien que facultatif, un Règlement sur la 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 stratégie de sécurité du contenu 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.
• directive script-src, ajoutez https://accounts.google.com/gsi/client pour 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 des services d'identité Google.
• Si elle est utilisée, la directive default-src est un paramètre de remplacement si l'une des directives 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 des points de terminaison côté serveur des services d'identité Google.

Évitez de lister des URL SIG individuelles lorsque vous utilisez connect-src. Cela permet de minimiser les échecs lors de la mise à jour du SIG. Par exemple, au lieu d'ajouter https://accounts.google.com/gsi/status, utilisez l'URL parent du 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 de modifier 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:

• vers same-origin et
• inclure 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 entraîne l'ouverture d'une fenêtre pop-up vide ou des bugs similaires.