Ajouter un bouton « Se connecter avec Mozaïk »

Aide visuelle pour la connexion

Votre application doit afficher un bouton de connexion qui redirige les utilisateurs vers le point de terminaison de connexion correspondant au protocole que vous utilisez pour l’intégration à la plateforme d’identité Mozaïk. La section suivante fournit des détails sur l’aspect recommandé pour ce bouton.

Pictogramme et « Se connecter avec Mozaïk »

C’est l’association du logo Mozaïk et des termes « Se connecter avec Mozaïk » qui permet de distinguer Mozaïk des autres fournisseurs d’identité que votre application peut prendre en charge.

Taille et espacements

Le schéma suivant illustre les lignes rouges recommandées par la GRICS lorsque vous utilisez les éléments multimédias avec votre application. Les lignes rouges s’appliquent au bouton « Se connecter avec Mozaïk ».

Se connecter avec Mozaïk

• Icône20px × 20px
• PoliceArial 16px 400
• Bordure1px

Icône et texte centrés verticalement

Note

Les coins peuvent être arrondis au besoin afin que le bouton respecte le design des applications qui l’implémentent.

Thèmes

Vous pouvez utiliser un modèle de couleur bleu ou neutre dans un thème clair ou sombre pour les boutons.

Bleu sombre

Se connecter avec Mozaïk

• Arrière-plan#0073cf
• Police#ffffff
• Bordure#0073cf

Bleu clair

Se connecter avec Mozaïk

• Arrière-plan#ffffff
• Police#0073cf
• Bordure#0073cf

Anthracite sombre

Se connecter avec Mozaïk

• Arrière-plan#37424a
• Police#ffffff
• Bordure#37424a

Anthracite clair

Se connecter avec Mozaïk

• Arrière-plan#ffffff
• Police#37424a
• Bordure#37424a

Téléchargement

Des modèles de boutons et une feuille de style peuvent être téléchargés afin de faciliter l’implémentation d’un bouton de connexion avec Mozaïk conforme aux exigences.

Étapes

1. Copier le modèle HTML désiré parmi ceux offerts ci-dessous et l’intégrer dans la page de connexion de votre application.

   <!-- Bleu sombre -->
   <button class="btnConnecterMozaik" data-theme="sombre" data-couleur="bleu"><span>Se connecter avec Mozaïk</span></button>
   
   <!-- Bleu clair -->
   <button class="btnConnecterMozaik" data-theme="clair" data-couleur="bleu"><span>Se connecter avec Mozaïk</span></button>
   
   <!-- Anthracite sombre -->
   <button class="btnConnecterMozaik" data-theme="sombre" data-couleur="anthracite"><span>Se connecter avec Mozaïk</span></button>
   
   <!-- Anthracite clair -->
   <button class="btnConnecterMozaik" data-theme="clair" data-couleur="anthracite"><span>Se connecter avec Mozaïk</span></button>
   

2. Télécharger la feuille de style et l’intégrer à votre application.
3. Pour une version anglaise, remplacer le texte du bouton par « Sign in with Mozaïk ».

À faire et ne pas faire

• NE PAS utiliser les termes tels que Mozaïk-Portail ou GRICS
• NE PAS modifier le logo Mozaïk
• NE PAS exposer les utilisateurs à l’image de marque GRICS.
• FOURNIR aux utilisateurs un moyen de se déconnecter et de passer à un autre compte d’utilisateur.