線上提供者的 Web 驗證代理人考量 (HTML)

  • 發行項

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

身為驗證提供者，設定您的驗證服務給 Windows 市集應用程式使用時有一些細節需要考量。此外，您可以使用您偏好的標記來自訂向 Windows 市集應用程式使用者顯示的網頁。

線上驗證提供者的考量

Web 驗證代理人的建置基礎與 Windows 中 Internet Explorer 所使用的技術相同。不過，由於這個元件的用途非常特殊，因此 Internet Explorer 的部分功能已被停用或鎖定成特定的設定。 另外，Web 驗證代理人也提供專用的事件記錄通道，協助對所處理的頁面問題進行疑難排解。

Internet Explorer 標準文件模式

Web 驗證代理人會針對特定版本的 Windows，以 IE 標準模式顯示所有頁面。例如，Windows 8 的 Web 驗證代理人會以 "IE10 標準模式"顯示頁面。 您可以使用 Internet Explorer 中的開發人員工具，查看您的頁面在不同的文件模式下會如何運作。 如需 Internet Explorer 相容性的詳細資訊，請參閱 Internet Explorer 的 MSDN 主題。

停用和鎖定的功能

Internet Explorer 的數個功能不是被完全停用，就是被鎖定成特定的值，而無法在作業系統的 [網際網路選項] 中變更。

功能 狀態
應用程式快取 API ("AppCache") 已停用
連結歷程記錄 已停用
暫存檔案 已啟用
Cookie 已啟用工作階段 Cookie。允許永續性 Cookie，但是除非 Web 驗證代理人處於 SSO 模式，否則會自動清除永續性 Cookie。如需詳細資訊，請參閱＜單一登入＞一節。
索引資料庫 已停用
DOM 儲存 已停用
ActiveX 已停用
檔案下載 已停用

 

HTTPS 需求

應用程式將用來與線上提供者通訊的第一個 URL 必須是 HTTPS。

不同檢視狀態的尺寸

Windows 8 應用程式可能會在數個不同大小的應用程式 (直向或橫向) 或在常用鍵 (例如分享常用鍵) 內出現。視 Web 驗證代理人出現在哪一種檢視中而定，網頁必須搭配使用的大小也可能不同。 如需詳細資訊，請參閱視窗大小與縮放畫面的指導方針主題和分享內容的指導方針主題。

網頁應該使用 CSS 媒體查詢來檢查它所需搭配使用的大小，然後根據該大小進行配置。不過，頁面不應該完全根據這裡記載的像素來做設計，而是應該要能夠縮放成不同的大小。本文件中指定的大小受限於未來的作業系統版本而有所變更。

如果頁面無法將所有資訊納入配置的空間 (例如應用程式要求的一長串權限清單)，Web 驗證代理人將會提供捲軸以允許使用者視需要捲動頁面。在觸控式裝置上，可以使用捏合縮放來進行縮放，在桌上型和膝上型電腦上，可以使用 Ctrl 加上滑鼠滾輪來進行縮放。

若要測試不同的縮放係數，請使用 Microsoft Visual Studio Professional 2012 中載入的 Web 驗證代理人 SDK 範例應用程式，這個應用程式允許模擬不同的檢視大小。

範例檢視

下列範例顯示 Web 驗證代理人 UI，其中的網頁維度為：

  • 寬度：260 像素
  • 高度：螢幕高度 (視螢幕解析度而定)

請注意，Web 驗證代理人 UI 只會出現在螢幕擷取的右側。

精簡檢視中的 Web 驗證代理人 UI 範例

常用鍵檢視

對常用鍵檢視而言，網頁尺寸為：

  • 寬度：566 像素
  • 高度：螢幕高度 (視螢幕解析度而定)

下列範例顯示常用鍵檢視中的 Web 驗證代理人 UI。

常用鍵檢視中的 Web 驗證代理人 UI 範例

檔案選擇器檢視

對檔案選擇器檢視而言，網頁尺寸為：

  • 寬度：566 像素
  • 高度：螢幕高度 (視螢幕解析度而定)

下列範例顯示檔案選擇器檢視中的 Web 驗證代理人 UI。

檔案選擇器檢視中的 Web 驗證代理人 UI 範例

預設不允許開啟新視窗

根據預設，任何 URL 皆不會導致開啟新視窗，而是會在 Web 驗證代理人視窗內顯示。這包括 window.open JavaScript 方法、超連結的 "target" 屬性，或是使用者使用 Ctrl 加上按一下滑鼠左鍵的機制來強制開啟新視窗的情況。當網頁宣告連結是可以在瀏覽器中瀏覽的安全連結 (如＜自訂超連結的目標＞中所述) 時，則不適用這項規則。

自訂 Web 驗證頁面

網頁可透過使用網頁上定義的中繼資料標記，以標題、圖示及標頭色彩自訂使用者介面 (UI)。Web 開發人員可以使用 HTML <meta> 標記，在 Web 驗證代理人 UI 中顯示提供者的特質和品牌。此外，開發人員還可以管理更多複雜的使用者動作，例如註冊和復原密碼。這個概念非常類似於 Windows Internet Explorer 9 和 Windows 7 的「釘選的網站」功能。

除了自訂圍繞網頁區域的使用者介面之外，網頁也應該利用 Windows 8 控制項的樣式、啟用觸控功能，以及在適當的位置讓連結能在瀏覽器中開啟。

以下是一個利用了 Web 驗證代理人自訂模型的網頁範例。Web 驗證代理人使用者介面元素

自訂圖示

網頁可以使用 mswebdialog-logo 中繼標記來提供圖示。

<meta name="mswebdialog-title" content="Contoso Social"/>

內容是一個 URL，可以是頁面的相對路徑或絕對路徑。URL 的配置可以是 HTTP 或 HTTPS。檔案的格式應該是 PNG 或 JPG。 影像的大小應該是 30x30 像素。如果影像不是這個大小，作業系統將會縮放影像來符合 30x30 的空間。影像在設計上應該要能夠在放大到 140% 和 180% (針對較高解析度螢幕) 時仍然能良好呈現。 若要測試不同的縮放係數，請使用 Visual Studio 11 中載入的 Web 驗證代理人 SDK 範例應用程式，這個應用程式允許使用 [設計] 模式的 [裝置] 視窗來模擬不同的解析度和縮放係數。

自訂標題文字

網頁可以使用 mswebdialog-title 中繼標記來提供標題。

<meta name="mswebdialog-title" content="Contoso Social"/>

標題應該要簡短並且應該反映提供者的品牌 (例如 Contoso)。

自訂標頭色彩

網頁可以使用 mswebdialog-header-color 中繼標記，提供代表其品牌身分識別並且要用於對話方塊標頭的色彩。

<meta name="mswebdialog-header-color" content="#1267DF"/>

色彩可以是這裡指定的任何值。不過，Web 驗證代理人將會忽略任何 Alpha 色板值。 特別針對這個色彩以及普遍針對頁面上使用的色彩，如果提供者有 Windows 8 應用程式，則建議按照該應用程式中使用的相同色彩。

注意  一旦剖析 META 標記，系統就會將每一個伺服器的圖示和色彩快取到用戶端上。 請先清除用戶端快取再啟動 UI，才能讓變更生效。若要這麼做，請修改以下登錄設定。

 

// 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)

一旦下載圖示，在 24 小時內就不會再對它進行擷取。 為了使用標誌影像進行測試，請將上面的登錄機碼設成較低的值。

自訂網頁

除了自訂圍繞網頁的 UI 之外，開發人員也應該建立與整體 Windows 8 體驗順暢銜接且緊密整合的網頁。這包括使用建議的樣式、確定網頁在啟用觸控功能的裝置上運作順暢，以及確定特定網頁可以在網頁瀏覽器中開啟。

  • 設定樣式

    強烈建議您使用這裡建議的樣式，以在整體 Web 驗證代理人網頁及其他 Windows 8 UI 元件建立較一致的使用者經驗。網頁應該使用白色背景並且沒有框線。[登入] 或 [取消] 之類的按鈕應該放在右下角，並且使用與標頭相同的色彩。最後，由於 Web 驗證代理人提供 [上一步] 按鈕，因此請考慮將 [取消] 按鈕從網頁中完全去除。

  • 啟用觸控功能

    設計網頁時，請將觸控式使用者互動牢記在心。如需有關針對 Windows 8 中的觸控進行設計的詳細資訊，請參閱觸控互動設計主題。

  • 自訂超連結的目標

    對於傳遞需要單一使用者動作 (例如登入) 的網頁或 OAuth 授權頁面來說，Web 驗證代理人相當好用。不過，對於需要使用者花些時間了解並完成的較複雜使用者流程 (例如帳戶建立、從遺失或忘記的密碼復原、顯示隱私權聲明等等)，建議讓這些頁面在使用者慣用的瀏覽器中啟動，以支援完整的導覽及深入瀏覽。 Web 驗證代理人預設並不允許從網頁開啟新的瀏覽器視窗 (如需詳細資訊，請參閱＜預設不允許開啟新視窗＞一節)。不過，透過使用 mswebdialog-newwindowurl 中繼標記，網頁便可以宣告哪些 URL 應該在瀏覽器中開啟。

    mswebdialog-newwindowurl 可以讓網頁指定 URL 或 URL 部分，每當透過使用 target 屬性或 window.open() 方法要求 Web 驗證代理人在新視窗中開啟 URL 時，Web 驗證代理人就會使用這個指定的 URL 或 URL 部分來進行比對 (左邊字串比對)。如果相符，該 URL 就會在使用者的預設瀏覽器中開啟。如果不相符，Web 驗證代理人就會瀏覽到 URL 本身 (預設行為)。例如：<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

    以這個中繼標記為例，Web 驗證代理人將會在瀏覽器中開啟 https://www.contoso.com/privacy/policy.html，但是會直接瀏覽到 https://www.contoso.com/termsofuse.html。請注意，不會嘗試在新視窗中開啟的連結 (例如未使用 target 屬性或 window.open() 方法的連結) 並不受這個中繼標記影響。 內容是一個 URL，可以是頁面的相對路徑或絕對路徑。URL 的配置可以是 HTTP 或 HTTPS。 您應該定義 mswebdialog-newwindowurl 中繼標記來涵蓋任何不屬於核心使用者流程 (例如隱私權聲明、註冊表單等等) 的連結。如果您支援使用第三方驗證提供者 (例如 OpenID 提供者) 進行登入，請務必讓那些互動都在 Web 驗證代理人內進行。 若要讓頁面上所有連結都能被視為可在瀏覽器中開啟的安全連結，請使用星號語法，例如 <meta name="mswebdialog-newwindowurl" content="*"/> 請注意，“*” 只能單獨使用，不能與其他 URL 合併使用，例如 "https://www.contoso.com/*" 就不是有效的語法。

適用於所有中繼標記的規則

當 Web 驗證代理人處理中繼標記時，適用下列規則：

  • 中繼標記的效果所及範圍包含相同第二層網域 (例如 contoso.com) 下的所有網頁，除非遇到另一個名稱相同但內容不同的中繼標記。
  • 如果在同一頁面上遇到多個名稱相同的中繼標記，Web 驗證代理人將只會選擇其中一個，其他的則予以忽略。會選擇哪一個特定的中繼標記並未定義。注意  這個規則不適用於在同一頁面上允許多個執行個體的 mswebdialog-newwindowurl 中繼標記。  

相關主題

Web 驗證代理人

Web 驗證代理人範例

Windows.Security.Authentication.Web