本主题介绍设计使用 Web 身份验证代理登录的网页的最佳做法。
元标记的使用
使用元标记，提供程序“Contoso Social”可以指定标题、图标和标题的颜色。 在示例 HTML 文件 (WebAuthLogin.html) 中，使用以下代码完成此操作。
<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" />
这允许 Windows 在 UI 标头中以突出的方式集成提供程序的状态，如以下屏幕截图中的红色框突出显示。
使用Windows 8 CSS 样式
提供的 ui-light.css 样式表是 Windows 应用商店应用使用的Windows 8样式表。 它定义了适用于版式和标准控件（如按钮、文本框、超链接和检查框）的 Windows 应用商店应用样式，以确保它们易于触摸。 在为Windows 8设计和定制 Web 授权页面时，我们鼓励你按原样使用此样式表，并根据需要更新它，前提是网页仍以自己的方式遵循最佳做法。
例如，如果你有一个特殊的样式表，用于显示超链接在网页上的外观和感觉，最好是深思熟虑，确保提供的样式与标准Windows 8超链接相同，触摸友好。 这对于在触摸设备上使用Windows 8的使用者群体至关重要。
使用颜色和主题
此示例演示了以几种不同方式深思熟虑地使用颜色。
- 网页的白色背景。 如上一屏幕截图所示，网页托管在跨越屏幕宽度的白色图面中。 若要确保网页与图面集成，建议网页的背景应为白色。
- 根据品牌颜色着色控件。 CSS 文件 theme-colors.css 提供样式以替代 ui-light 样式表中控件的标准颜色，以将控件的主题与标头的颜色相匹配。 例如，在以下屏幕截图中，按钮和超链接采用从标题颜色派生的颜色。
- 标题颜色。 在标头中使用 Contoso 的品牌颜色可在系统 UI 中为提供商的品牌创建统一个性。
对齐方式
网页本身在左侧或右侧没有填充，允许与左侧标题中的标题和右侧标题中的图标进行排版对齐。
你还将注意到，按钮在网页 (始终右下对齐，与标题) 中的图标右对齐。 这是最佳做法，因为Windows 8用户将习惯于类似的对话流，在右下角有按钮。
针对贴靠设计
在下图中，可以看到处于对齐状态的登录页和权限页。
。
在示例文件 ui-webauth.css 中，可以看到媒体查询的用法，这些查询根据网页的可用宽度优化页面的贴靠状态布局。 以下范围中包含的代码片段实现为对齐状态定制的 CSS。
@media screen and (max-width: 500px)
{
…
}
在Windows 8中，贴靠状态的宽度为 320 像素。 Web 身份验证页面在上述 UI 中占据 260 像素。 我们使用具有足够余距的最大宽度值，因此提供程序的媒体查询代码不会绑定到对齐状态的确切宽度。
在为贴靠视图定制应用时，用户不会丢失他们在 Web 身份验证体验的其他视图中拥有的任何上下文， (完整视图、填充视图或超级视图) ，但重新构建页面中元素的布局和层次结构，以便保留上下文所需的信息可见且具有交互性是有价值的。 我们列举了一些示例，说明示例如何针对贴靠状态定制网页。
- 例如，对于处于对齐状态的登录页，已重写 ui-light.css () 中指定的输入文本字段的 width 属性，并将其设置为较小的数值，因此不会水平剪裁文本字段。
- 再举一例，在对齐状态下，h1 和 h2 标题的字号分别从 42 pt 和 20 pt 减少到 20 pt 和 11 pt。 这是根据Windows 8类型渐变完成的，并将文本优化为在更改后的视区中更加紧凑。
- 另举一个例子，请注意权限页中的图标大小较小， (与上面) 的完整视图页相比。 同样，这样做是为了保留上下文，同时交换设计资产以更适合更改的视区。
设计快速流畅的登录体验
在设计此网页的早期，我们决定，此页面最擅长的一件事是快速流畅的登录体验。 因此，在流中最为突出的 UI 是登录页中的用户名和密码字段，用于快速凭据输入体验。 虽然我们发现还有其他常见方案，例如密码检索和引用隐私声明，但丰富的 Web 体验对于这些体验来说更好。 对于与安全 Web 身份验证体验无关的所有流，建议将用户导航到浏览器。 这在示例 HTML 文件 (WebAuthLogin.html) 中如下所示： <meta name="mswebdialog-newwindowurl" content="*" /> 这将打开用户默认浏览器中的登录名或权限页链接到的所有网页，用户可以在其中完成这些流，然后返回到应用进行登录。
安全注意事项
以下文章提供了编写安全 C++ 代码的指导。
相关主题