Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Une page web personnalise l’interface utilisateur avec le titre, l’icône et la couleur d’en-tête à l’aide de balises de métadonnées définies sur la page web. Les développeurs web peuvent utiliser des balises meta> HTML <pour afficher la personnalité et la marque du fournisseur dans l’interface utilisateur du Broker d’authentification web. En outre, les développeurs peuvent diriger des actions utilisateur plus complexes, par exemple l’inscription et la récupération de mots de passe. Le concept est très similaire à la fonctionnalité Sites épinglés de Windows Internet Explorer 9 et Windows 7.
En plus de personnaliser l’interface utilisateur autour de la zone de page web, la page web doit également tirer parti des styles des contrôles Windows 8, être activée pour l’interaction tactile et permettre l’ouverture des liens dans le navigateur le cas échéant.
Voici un exemple de page web qui a tiré parti du modèle de personnalisation Du broker d’authentification web.
Instructions
Étape 1 : Personnaliser l’icône
La page web peut fournir une icône à l’aide d’une balise meta mswebdialog-logo.
<meta name="mswebdialog-logo" content="https://www.contoso.com/logo.png"/>
Le contenu est une URL qui peut être une page relative ou absolue. Le schéma de l’URL peut être HTTP ou HTTPS. Le format du fichier doit être PNG ou JPG. La taille de l’image doit être de 30 x 30 pixels. Si l’image est de taille différente, elle sera mise à l’échelle vers le bas ou vers le haut par le système d’exploitation pour s’adapter à l’espace de 30 x 30. L’image doit être conçue pour être correctement affichée lorsqu’elle est mise à l’échelle jusqu’à 140 % et 180 % pour tenir compte des écrans de résolution plus élevée. Pour tester différents facteurs de mise à l’échelle, utilisez l’exemple d’application sdk Web Authentication Broker chargée dans Visual Studio 11 qui permet de simuler différentes résolutions et facteurs de mise à l’échelle à l’aide des fenêtres Appareil du mode Création.
Étape 2 : Personnaliser le texte du titre
La page web peut fournir le titre à l’aide de la balise meta mswebdialog-title.
<meta name="mswebdialog-title" content="Contoso Social"/>
Le titre doit être court et doit refléter la marque du fournisseur (par exemple, Contoso).
Étape 3 : Personnaliser la couleur de l’en-tête
La page web peut fournir la couleur qui représente son identité de marque à utiliser pour l’en-tête de la boîte de dialogue à l’aide de la balise meta mswebdialog-header-color.
<meta name="mswebdialog-header-color" content="#1267DF"/>
La couleur peut être n’importe quelle valeur spécifiée ici. Toutefois, le répartiteur d’authentification web ignore toute valeur de canal alpha. Avec cette couleur spécifiquement et avec les couleurs utilisées sur la page en général, il est recommandé de suivre les mêmes couleurs que celles utilisées dans l’application Windows 8 du fournisseur si une telle application existe.
Notes
Les icônes et les couleurs sont mises en cache par serveur sur le client une fois les balises META analysées. Effacez le cache client avant de lancer l’interface utilisateur pour que les modifications prennent effet. Pour ce faire, modifiez les paramètres de Registre suivants.
// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT \
(24 * 60 * 60)
Une fois qu’une icône est téléchargée, elle n’est plus récupérée pendant 24 heures. Pour tester avec des images de logo, définissez la clé reg ci-dessus avec une valeur inférieure.
Étape 4 : Personnaliser la page web
En plus de personnaliser l’interface utilisateur autour de la page web, les développeurs doivent également créer des pages web transparentes et intégrées à l’expérience Windows 8 globale. Cela inclut l’utilisation des styles recommandés, le bon fonctionnement des pages web avec les appareils tactiles et l’ouverture de certaines pages web dans le navigateur web.
Style
Nous vous recommandons vivement d’utiliser le style recommandé ici pour créer une expérience utilisateur plus cohérente sur les pages web du Broker d’authentification web et d’autres composants d’interface utilisateur de Windows 8. La page web doit utiliser un arrière-plan blanc et aucune bordure. Les boutons tels que Connexion ou Annuler doivent être positionnés dans le coin inférieur droit et utiliser la même couleur que l’en-tête. Enfin, étant donné que Web Authentication Broker fournit un bouton Précédent, envisagez d’éliminer complètement un bouton Annuler de la page web.
Activation de l’interaction tactile
La page web doit être conçue avec une interaction utilisateur tactile à l’esprit. Pour plus d’informations sur la conception de l’interaction tactile dans Windows 8, consultez la rubrique Conception d’interaction tactile.
Personnalisation de la cible des liens hypertexte
Le service Broker d’authentification web est idéal pour fournir des pages web qui nécessitent une seule action utilisateur, telle que des pages d’autorisation D’ouverture de session ou OAuth. Toutefois, pour les flux d’utilisateurs plus complexes tels que la création de compte, la récupération d’un mot de passe perdu ou oublié, l’affichage des déclarations de confidentialité, etc., où l’utilisateur est censé investir un certain temps dans la compréhension et l’exécution du flux, il est recommandé que ces pages soient lancées dans le navigateur préféré de l’utilisateur pour prendre en charge la navigation complète et atteindre la navigation. Web Authentication Broker par défaut n’autorise pas l’ouverture de nouvelles fenêtres de navigateur à partir d’une page web (pour plus d’informations, consultez la section Aucune nouvelle fenêtre par défaut). Toutefois, à l’aide de la balise
mswebdialog-newwindowurlmeta, la page web peut déclarer quelles URL doivent être ouvertes dans le navigateur.Permet
mswebdialog-newwindowurlà la page web de spécifier une URL ou une partie de l’URL que le Broker d’authentification web utilisera pour faire correspondre (correspondance de chaîne de gauche) à chaque fois qu’il est invité à ouvrir une URL dans une nouvelle fenêtre à l’aide de l’attribut cible ou de la méthode window.open(). S’il existe une correspondance, l’URL est ouverte dans le navigateur par défaut de l’utilisateur. S’il n’y a aucune correspondance, le Répartiteur d’authentification web accède à l’URL elle-même (comportement par défaut). Par exemple :<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>Dans le cas de cette balise meta, web Authentication Broker ouvre le
https://www.contoso.com/privacy/policy.htmldans le navigateur, mais accède directement àhttps://www.contoso.com/termsofuse.html. Notez que les liens qui ne tentent pas de s’ouvrir dans une nouvelle fenêtre (par exemple, les liens qui n’utilisent pas l’attribut cible ou la méthode window.open()) ne sont pas affectés par cette balise meta. Le contenu est une URL qui peut être une page relative ou absolue. Le schéma de l’URL peut être HTTP ou HTTPS. Vous devez définirmswebdialog-newwindowurldes balises méta pour couvrir tous les liens qui ne font pas partie du flux utilisateur principal, tels que les déclarations de confidentialité, les formulaires d’inscription, etc. Si vous prenez en charge la connexion avec un fournisseur d’authentification tiers (par exemple, des fournisseurs OpenID), veillez à conserver ces interactions au sein du répartiteur d’authentification web. Pour autoriser l’ouverture de tous les liens de votre page comme sécurisés dans le navigateur, utilisez la syntaxe star, par exemple,<meta name="mswebdialog-newwindowurl" content="*"/>Notez que le « * » ne peut être utilisé que exclusivement et ne peut pas être combiné avec une autre URL, par exemple, «https://www.contoso.com/ * » n’est pas une syntaxe valide.
Étape 5 : Règles appliquées à toutes les balises meta
Lorsque Web Authentication Broker traite les métadonnées, les règles suivantes s’appliquent :
L’effet de la balise meta persistera sur toutes les pages sous le même domaine de deuxième niveau (par exemple, contoso.com), sauf si une autre balise meta du même nom mais un contenu différent est rencontré.
Si plusieurs balises meta du même nom sont rencontrées sur la même page, le Broker d’authentification web n’en choisit qu’une seule et ignore le reste. La balise meta spécifique choisie n’est pas définie.
Notes
Cette règle ne s’applique pas à la
mswebdialog-newwindowurlbalise meta qui autorise plusieurs instances sur la même page.
Rubriques connexes