本主題描述設計使用 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 驗證頁面會在上述使用者介面中佔用260像素。 我們使用具有足夠邊界的寬度上限值，因此提供者的媒體查詢程式代碼不會繫結到貼齊狀態的確切寬度。
在為快照檢視量身打造應用程式時，重要的是確保使用者不會失去在其他檢視中擁有的上下文（完整檢視、填滿檢視或魅力檢視），重組頁面上元素的佈局和層次非常重要，以確保需要用來保留上下文的資訊是可見且可以互動。 我們已經列出了一些示例，說明如何針對貼靠狀態調整網頁。
- 例如，針對處於緊貼狀態的登入頁面，已覆寫輸入文本欄位的 width 屬性（如 ui-light.css 中所指定），並將其設置為較小的數值，因此文本欄位不會被水準裁剪。
- 另一個範例是，在快照狀態下，h1 和 h2 標題的字型大小會從 42 pt 和 20 pt 分別減少至 20 pt 和 11 pt。 根據 Windows 8 字體階梯進行此操作，並將文字優化，使其在變更的檢視區中更加緊湊。
- 另一個範例中，請注意許可權頁面中圖示的大小較小（與上方的完整檢視頁面比較）。 同樣地，這樣做是為了保留內容，同時交換設計資產，讓變更的檢視區更理想。
設計快速流暢的登入體驗
在設計這個網頁的初期，我們確立了這個頁面最擅長的是提供快速流暢的登入體驗。 因此，流程中最突出的UI是登入頁面中的使用者名稱和密碼欄位，以取得快速認證輸入體驗。 雖然我們發現還有其他常見的案例，例如密碼擷取和參考隱私聲明，但Web的豐富體驗是這些體驗的更好位置。 對於所有非安全 Web 驗證體驗相關的流程，我們建議將使用者導向瀏覽器。 這會顯示在範例 HTML 檔案中WebAuthLogin.html，如下所示：<meta name="mswebdialog-newwindowurl" content="*" /> 會在使用者預設的瀏覽器中開啟所有從登入或權限頁面連結的網頁，讓使用者能完成這些流程，然後返回應用程式以登入。
安全性考慮
下列文章提供撰寫安全C++程式代碼的指引。
相關主題
-
Web 驗證代理人 的 常見問題