Consignes relatives à la marque Se connecter avec Google

Ce document explique comment afficher un bouton "Se connecter avec Google" sur votre site Web ou dans votre application. Ils doivent suivre ces consignes pour effectuer la procédure de validation.

Nos SDK Google Identity Services affichent un bouton "Se connecter avec Google" qui respecte toujours les consignes Google les plus récentes concernant la marque. Il s'agit de la méthode recommandée pour afficher le bouton "Se connecter avec Google" sur votre site Web ou dans votre application. Si vous ne pouvez pas utiliser l'option du bouton affiché par Google, vous pouvez afficher un élément de bouton HTML, télécharger nos éléments de marque préapprouvés ou créer un bouton "Se connecter avec Google" personnalisé.

Afficher l'élément du bouton HTML

Télécharger les icônes de marque pré-approuvées

Les boutons "Images" fournis sont disponibles en mode standard et en mode icône. Ils incluent les options de style ci-dessous:

• Thème : Clair, Neutre, Sombre
• Forme : Rectangulaire, Pilule

Thème	Boutons	Description
Faible		Bouton "Se connecter avec Google" standard rectangulaire avec thème clair
Sombre		Bouton "Se connecter avec Google" standard en forme de pilule sombre

Modes de boutons compatibles

Créer un bouton "Se connecter avec Google" personnalisé

Nous vous recommandons vivement d'utiliser nos SDK Google Identity Services ou toute autre option décrite dans les sections précédentes, car cela permet aux utilisateurs de Google d'identifier plus facilement la marque Google. Plus les utilisateurs peuvent identifier facilement un bouton d'action, plus ils sont susceptibles d'interagir avec celui-ci.

Toutefois, si vous devez adapter le bouton à la conception de votre application, respectez les consignes suivantes.

Taille

Vous pouvez redimensionner le bouton selon vos besoins pour différents appareils et tailles d'écran, mais vous devez conserver le format pour que le logo Google ne soit pas étiré.

Texte

Pour encourager les utilisateurs à cliquer sur le bouton, nous vous recommandons d'ajouter le texte d'incitation à l'action "Se connecter avec Google", "S'inscrire avec Google" ou "Continuer avec Google". L'utilisateur doit clairement se connecter à votre application ou s'y inscrire avec ses identifiants Google, et non s'inscrire ou créer un compte Google sur votre application.

Couleur

Les états par défaut des boutons sont présentés ci-dessous. Le bouton doit toujours inclure la couleur standard du "G" de Google.

Thème	Exemple
Faible		Remplissage: #FFFFFF Trait: #747775 | 1 px | à l'intérieur Police: #1F1F1F | Roboto Medium | 14/20
Sombre		Remplissage: #131314 Trait: #8E918F | 1 px | à l'intérieur Police: #E3E3E3 | Roboto Medium | 14/20
Neutre		Remplissage: #F2F2F2 Trait: Aucun trait Police: #1F1F1F | Roboto Medium | 14/20

Font

La police du bouton est Roboto Medium, une police TrueType. Pour l'installer, commencez par télécharger la police Roboto et décompressez le package téléchargé. Sous Mac, il vous suffit de double-cliquer sur Roboto-Medium.ttf, puis de cliquer sur "Installer la police". Sous Windows, faites glisser le fichier vers le dossier "Poste de travail" > "Windows" > "Polices".

Marge intérieure

Android
iOS
Web (mobile + ordinateur)
Reference

Logo Google sur le bouton "Se connecter avec Google"

Quel que soit le texte, vous ne pouvez pas modifier la taille ni la couleur du logo "G" de Google. Il doit s'agir de la version en couleur standard et s'afficher sur un fond blanc. Si vous devez créer votre propre logo Google de taille personnalisée, commencez par l'une des tailles de logo incluses dans le package de téléchargement.

La conception du bouton est incorrecte

À faire Suivez les consignes de conception de Google Material 3 pour définir les limites et le jeu de couleurs des boutons.	À ne pas faire Utilisez l'icône ou le logo Google seul, sans les limites du bouton et sans texte pour indiquer l'action de l'utilisateur.
À faire Utilisez la couleur de la marque Google pour l'icône Google dans les modes sombre, clair et neutre.	À ne pas faire Utilisez les versions monochromes du "G" de Google pour le bouton.
À faire Choisissez le bouton dans le mode couleur approprié pour plus d'accessibilité et une meilleure proéminence.	À ne pas faire Placez l'icône Google "G" de couleur standard sur un arrière-plan de couleur autre que clair, sombre ou neutre.
À faire Conservez le "G" de Google avec une marge intérieure et une taille fixes.	À ne pas faire Créez votre propre icône pour le bouton.
À faire Si nécessaire, utilisez le "G" de Google seul pour le bouton d'action.	À ne pas faire Utilisez le terme "Google" seul dans le bouton pour représenter l'action de "Se connecter avec Google".

Bonnes pratiques pour la marque Se connecter avec Google

Se connecter avec Google et d'autres options de connexion tierces

Le bouton "Se connecter avec Google" doit être affiché au moins aussi visible que les autres options de connexion tierces. Par exemple, les boutons doivent avoir approximativement la même taille et avoir un poids visuel similaire.

Autres consignes

Si vous demandez des champs d'application supplémentaires, utilisez une autorisation incrémentielle (Android, iOS, Web). Ne demandez l'autorisation à l'utilisateur que lorsqu'il commence à interagir avec une fonctionnalité nécessitant un accès à l'API.

Si vous demandez des niveaux d'accès YouTube, utilisez un bouton YouTube.

Si vous utilisez les services de jeux Google Play, consultez également les Consignes relatives à la marque des services de jeux Google Play.

L'utilisation des marques Google par des moyens qui ne sont pas expressément couverts par les présentes consignes est interdite sans l'autorisation écrite préalable de Google (pour en savoir plus, consultez les Consignes d'utilisation des marques de Google par les tiers).