Partager via

Bonnes pratiques pour concevoir des pages web d’authentification

Cette rubrique décrit les meilleures pratiques pour la conception de pages web qui utilisent Web Authentication Broker pour la connexion.

Utilisation de métatags

À l’aide de métatags, le fournisseur « Contoso Social » peut spécifier le titre, l’icône et la couleur de l’en-tête. Dans l’exemple de fichier HTML (WebAuthLogin.html), cette opération est effectuée à l’aide du code suivant.

<meta name="mswebdialog-title" content="Contoso Social" />
<meta name="mswebdialog-header-color" content="#326464" /> <!-- Your brand color -->
<meta name="mswebdialog-logo" content="contoso_social_glyph.png" />

Cela permet à Windows d’intégrer la présence du fournisseur de manière visible dans l’en-tête de l’interface utilisateur, comme indiqué dans la zone rouge de la capture d’écran suivante. page de connexion montrant l’en-tête contoso dans l’interface utilisateur

Utilisation du style CSS Windows 8

La feuille de style ui-light.css fournie est la feuille de style Windows 8 utilisée par les applications du Windows Store. Il définit le style d’application du Windows Store pour la typographie et les contrôles standard, tels que les boutons, les zones de texte, les liens hypertexte et les zones de case activée pour s’assurer qu’ils sont compatibles avec l’interaction tactile. Lors de la conception et de l’adaptation des pages d’autorisation web pour Windows 8, nous vous encourageons à utiliser cette feuille de style telle quelle et à la mettre à jour si nécessaire tant que votre page web suit toujours les meilleures pratiques à sa manière.

Par exemple, si vous disposez d’une feuille de style spéciale pour l’apparence et l’apparence des liens hypertexte sur votre page web, il est judicieux d’être réfléchi pour vous assurer que le style que vous fournissez est tactile de la même façon que les liens hypertexte Windows 8 standard. Cela est essentiel pour la base de consommateurs utilisant Windows 8 sur leurs appareils tactiles.

Utilisation des couleurs et des thèmes

Cet exemple illustre une utilisation réfléchie de la couleur de différentes manières.

  • Arrière-plan blanc pour la page web. Comme vous pouvez le voir dans la capture d’écran précédente, la page web est hébergée dans une surface blanche qui s’étend sur la largeur de l’écran. Pour vous assurer que la page web s’intègre à la surface, il est recommandé que la page web ait un arrière-plan blanc.
  • Colorisation des contrôles en fonction de la couleur de votre marque. Le fichier CSS theme-colors.css fournit un style pour remplacer les couleurs standard des contrôles dans la feuille de style ui-light pour faire correspondre le thème des contrôles à la couleur de l’en-tête. Par exemple, dans la capture d’écran suivante, les boutons et les liens hypertexte prennent des couleurs dérivées de la couleur d’en-tête. capture d’écran des boutons et du texte avec la même couleur que l’en-tête
  • Couleur de l’en-tête. L’utilisation de la couleur de marque de Contoso dans l’en-tête crée une personnalité unifiée pour la marque du fournisseur au sein de l’interface utilisateur du système.

Alignment

La page web elle-même n’a aucun remplissage à gauche ou à droite pour permettre l’alignement typographique avec le titre dans l’en-tête à gauche et l’icône dans l’en-tête à droite.

Vous remarquerez également que les boutons sont toujours alignés en bas à droite dans la page web (et alignés à droite avec l’icône dans l’en-tête). Il s’agit d’une bonne pratique, car Windows 8 utilisateurs seront habitués à des flux de dialogue similaires ayant des boutons en bas à droite.

Conception pour l’alignement

Dans l’image suivante, vous pouvez voir les pages de connexion et d’autorisations dans un état d’alignement.

Vue d’alignement de l’écran de connexion . Vue d’alignement de la page d’autorisations

Dans l’exemple de fichier ui-webauth.css, vous pouvez voir l’utilisation de requêtes multimédias qui optimisent la disposition de la page pour l’état d’alignement en fonction de la largeur disponible pour la page web. L’extrait de code inclus dans l’étendue suivante implémente css adapté à l’état d’alignement.

@media screen and (max-width: 500px) 
{
…
}

Dans Windows 8, la largeur de l’état d’alignement est de 320 pixels. La page d’authentification web occupe 260 pixels dans l’interface utilisateur ci-dessus. Nous utilisons une valeur de largeur maximale avec suffisamment de marge, de sorte que le code de requête multimédia du fournisseur n’est pas lié à la largeur exacte de l’état d’alignement.

Lors de l’adaptation de votre application à l’affichage instantané, il est important que l’utilisateur ne perde pas le contexte dont il dispose dans les autres affichages de l’expérience d’authentification web (affichages complets, de remplissage ou de charme), mais il est utile de structurer la disposition et la hiérarchie des éléments de la page afin que les informations nécessaires à la conservation du contexte soient visibles et interactives. Nous avons présenté quelques exemples de la façon dont l’exemple adapte la page web à l’état d’alignement.

  • Par exemple, pour la page de connexion à l’état d’alignement, la propriété width du champ de texte d’entrée (comme spécifié dans ui-light.css) a été remplacée et définie comme valeur numérique plus petite, de sorte que le champ de texte n’est pas coupé horizontalement.
  • Autre exemple, dans l’état d’alignement, la taille de police des en-têtes h1 et h2 est réduite à 20 pt et 11 pt à partir de 42 pt et 20 pt respectivement. Cette opération est effectuée conformément à la Windows 8 la rampe de type et optimise le texte pour qu’il soit plus compact dans la fenêtre d’affichage modifiée.
  • Autre exemple , notez que les tailles des icônes dans la page d’autorisations sont plus petites (par rapport à la page d’affichage complet ci-dessus). Là encore, cette opération est effectuée pour conserver le contexte, tout en échangeant les ressources de conception pour celles qui sont plus optimales pour la fenêtre d’affichage modifiée.

Conception pour une expérience de connexion rapide et fluide

Au début de la conception de cette page web, nous avons fait un enjeu dans le terrain qu’une chose que cette page est le mieux à est une expérience de connexion rapide et fluide. Ainsi, l’interface utilisateur la plus visible dans le flux est le champ nom d’utilisateur et mot de passe dans la page de connexion pour une expérience de saisie rapide des informations d’identification. Bien que nous ayons identifié qu’il existe d’autres scénarios courants tels que la récupération de mot de passe et le référencement des déclarations de confidentialité, la riche expérience du web est un meilleur endroit pour ces expériences. Pour tous les flux non liés à l’expérience d’authentification web sécurisée, nous vous recommandons de naviguer vers le navigateur. Ceci est illustré dans l’exemple de fichier HTML (WebAuthLogin.html) comme suit : <meta name="mswebdialog-newwindowurl" content="*" /> cela ouvre toutes les pages web liées à à partir de la page de connexion ou d’autorisations dans le navigateur par défaut de l’utilisateur, où l’utilisateur peut effectuer ces flux, puis revenir à l’application pour se connecter.

Considérations relatives à la sécurité

Les articles suivants fournissent des conseils pour l’écriture de code C++ sécurisé.

Considérations sur le développement de pages web

FAQ sur le service Broker d’authentification web

Exemple d’application du Kit de développement logiciel (SDK) Du service Broker d’authentification web

Windows.Security.Authentication.Web