快速入門：在 Windows 市集應用程式之間共用使用者憑證 (HTML)

發行項
12/11/2015

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

憑證驗證可在驗證使用者時提供高階的信任層級。針對需要比使用者識別碼和密碼組合更安全之驗證方式的應用程式，即可使用憑證驗證。在某些情況下，會有一組服務想驗證多個 Windows 市集應用程式的某位使用者。這個快速入門說明如何使用相同的憑證來驗證多個 Windows 市集應用程式，以及如何提供便利的程式碼，讓使用者匯入用來存取受保護 Web 服務的憑證。

Windows 市集應用程式可使用憑證來向 Web 服務驗證，而且多個 Windows 市集應用程式可使用憑證存放區中的單一憑證來驗證同一個使用者。如果憑證不存在存放區中，您可以新增程式碼到應用程式以匯入來自 PFX 檔案的憑證。

目標: 使用憑證來驗證使用者時，請使用可從多個 Windows 市集應用程式使用，並且可用於多個受保護的 Web 服務的方式。

先決條件

這個快速入門僅為示範的範例，並將使用您本機機器上的 Microsoft Internet Information Services (IIS)。若要執行這個快速入門，您需要下列項目：

Windows 8.1
Microsoft Visual StudioMicrosoft Visual Studio
IISMicrosoft Internet Information Server (IIS)

指示

1. 啟用 IIS 與用戶端憑證對應

預設不會啟用 IIS。您可以使用 Windows 控制台來啟用 IIS。

開啟 [Windows 控制台]，選取 [程式]。
選取 [開啟或關閉 Windows 功能]****。
展開 [Internet Information Services]，然後展開 [World Wide Web 服務]****。展開 [應用程式開發功能]，選取 [ASP.NET 3.5] 與 [ASP.NET 4.5]。選擇這些項目會自動啟用 [Internet Information Services]。
按一下 [確定] 套用變更。

2. 建立與發行受保護的 Web 服務

在此步驟中，您將建立受保護的 Web 服務，並將其發行到您的 IIS 伺服器。

以系統管理員的身分執行 Visual Studio，然後從起始畫面選取 [新增專案]。必須要有系統管理員存取權才能將 Web 服務發行到 IIS 伺服器。在 [新增專案] 對話方塊中，將 Framework 變更為 [.NET Framework 3.5]。選取 [Visual C#] -> [Web] -> [Visual Studio]**** - > [ASP.NET Web Service 應用程式]。將應用程式命名為 "FirstContosoBank"。按一下 [確定]**** 來建立專案。

在 Service1.asmx.cs 檔案中，將預設的 HelloWorld Web 方法取代為下列 "Login" 方法。

        [WebMethod]
        public string Login()
        {
            // Verify certificate with CA
            var cert = new System.Security.Cryptography.X509Certificates.X509Certificate2(
                this.Context.Request.ClientCertificate.Certificate);
            bool test = cert.Verify();
            return test.ToString();
        }

儲存 Service1.asmx.cs 檔案。
在 [方案總管] 中，用滑鼠右鍵按一下 "FirstContosoBank" 應用程式，然後選取 [發行]****。
在 [發行網站] 對話方塊中建立新的設定檔，將它命名為 "ContosoProfile"。按 [下一步]****。
在下一頁中，輸入 IIS 伺服器的伺服器名稱，然後指定網站名稱為 "Default Web Site/FirstContosoBank"。按一下 [發行] 以發行您的 Web 服務。

3. 設定您的 Web 服務以使用用戶端憑證驗證

在此步驟中，您將使用 IIS 管理員來設定剛才發行的 Web 服務以要求用戶端憑證。

執行 [Internet Information Services (IIS) 管理員]****。
展開 IIS 伺服器的網站。在 [預設的網站] 底下選取新的 "FirstContosoBank" Web 服務。在 [動作]**** 區段中，選取 [進階設定]。
將 [應用程式集區]**** 設為 [.NET v2.0]，然後按一下 [確定]****。
在 [Internet Information Services (IIS) 管理員] 中選取您的 IIS 伺服器，然後按兩下 [伺服器憑證]。在 [動作] 區段中，選取 [建立自我簽署憑證]。輸入 "ContosoBank" 做為憑證的好記名稱，然後按一下 [確定]。這樣會建立下列格式的新憑證供 IIS 伺服器使用："<server-name>.<domain-name>"。
在 [Internet Information Services (IIS) 管理員]**** 中選取預設網站。在 [動作] 區段中，選取 [繫結]，然後按一下 [加入]。選取 "https" 做為類型，將連接埠設為 "443"，然後輸入 IIS 伺服器的完整主機名稱 ("<server-name>.<domain-name>")。將 SSL 憑證設為 "ContosoBank"。按一下 [確定]。在 [站台繫結] 視窗中按一下 [關閉]****。
在 [Internet Information Services (IIS) 管理員] 中，選取 "FirstContosoBank" Web 服務。按兩下 [SSL 設定]****。核取 [需要 SSL]。選取 [用戶端憑證] 下方的 [需要]。在 [動作] 區段中，按一下 [套用]。
您可以開啟網頁瀏覽器並輸入下列網址，以確認 Web 服務是否已正確設定："https://<server-name>.<domain-name>/FirstContosoBank/Service1.asmx"。例如，"https://myserver.example.com/FirstContosoBank/Service1.asmx"。如果您的 Web 服務已正確設定，系統會提示您選取用戶端憑證以存取 Web 服務。

您可以重複上述快速入門步驟來建立多個 Web 服務，並使用相同的用戶端憑證存取這些服務。

4. 建立使用憑證驗證的 Windows 市集應用程式

現在您已有一或多個受保護的 Web 服務後，接著可以建立使用憑證向那些 Web 服務驗證的 Windows 市集應用程式。當您使用 HttpClient 物件向驗證的 Web 服務提出要求時，初始要求將不會包含用戶端憑證。已驗證的 Web 服務將以用戶端驗證要求回應。發生此情況時，Windows 用戶端將自動查詢憑證存放區是否有可用的用戶端憑證。您的使用者可從這些憑證選取以向 Web 服務驗證。某些憑證受密碼保護，因此您必須提供使用者輸入密碼的方式以取得憑證。

如果沒有可用的用戶端憑證，則使用者必須新增憑證到憑證存放區。您可以在 Windows 市集應用程式中包含程式碼，讓使用者選取包含用戶端憑證的 PFX 檔案，然後將該憑證匯入用戶端憑證存放區。

秘訣您可以使用 makecert.exe 來建立 PFX 檔案以配合此快速入門使用。如需使用 makecert.exe 的資訊，請參閱 MakeCert。

開啟 Visual Studio，然後從起始畫面選取 [新增專案]。選取 [Visual C#]**** -> [Windows 市集] -> [空白應用程式 (XAML)]****。將新專案命名為 "FirstContosoBankApp"。按一下 [確定] 以建立新的專案。

在 default.html 檔案中，將下列 HTML 新增至預設的 body 元素。這個 HTML 包含一個瀏覽要匯入之 PFX 檔案的按鈕、一個輸入受密碼保護之 PFX 檔案的密碼的文字方塊、一個匯入所選 PFX 檔案的按鈕、一個登入受保護的 Web 服務的按鈕，以及一個顯示目前動作狀態的文字區塊。

<div>
    <button id="Browse" style="width:400px;height:80px;font-size:18px">Browse for PFX file</button><br />
    PFX password <input id="PfxPassword" type="text" style="width:200px" /> (optional)<br />
    <button id="Import" style="width:400px;height:100px;font-size:20px">Import certificate (PFX file)</button><br />
    <button id="Login" style="width:400px;height:100px;font-size:20px">Login</button>
    <div id="Result" style="width:400px;height:400px;color:white" />
</div>

儲存 default.html 檔案。

在 js 資料夾的 default.js 檔案中，以下列變數和函式取代預設的 app.onactivated 函式。它們會指定 "FirstContosoBank" Web 服務的受保護 "Login" 方法的位址，以及存放要匯入憑證存放區之 PFX 憑證的全域變數。將 <server-name> 更新為 IIS 伺服器的完整伺服器名稱。

var pfxPassword;
var pfxCert;
var requestUri = new Windows.Foundation.Uri("https://<server-name>/FirstContosoBank/Service1.asmx?op=Login");
var result;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {

        pfxPassword = document.getElementById("PfxPassword");
        result = document.getElementById("Result");
        document.getElementById("Import").addEventListener("click", import_click, false);
        document.getElementById("Login").addEventListener("click", login_click, false);
        document.getElementById("Browse").addEventListener("click", browse_click, false);

        args.setPromise(WinJS.UI.processAll());
    }
};

在 default.js 檔案中，為登入按鈕新增下列 Click 處理常式並新增存取受保護的 Web 服務的方法。

function login_click() {
    makeHttpsCall();
}

function makeHttpsCall() {
    var returnMessage = "Login ";

    var response;

    try {
        var httpClient = new Windows.Web.Http.HttpClient();
        httpClient.getAsync(requestUri).then(
            function (response) {
                if (response) {
                    if (response.statusCode == Windows.Web.Http.HttpStatusCode.ok) {
                        returnMessage += "successful";
                    }
                    else {
                        returnMessage += "failed with ";
                        returnMessage += response.StatusCode;
                    }

                    result.innerHTML = returnMessage;
                }
            });

    }
    catch (ex) {
        returnMessage += "failed with ";
        returnMessage += ex.Message;
    }

    result.innerHTML = returnMessage;
}

在 default.js 檔案中，為瀏覽 PFX 檔案的按鈕和將所選 PFX 檔案匯入憑證存放區的按鈕新增下列 Click 處理常式。

    function import_click() {
        try {
            result.innerHTML += "Importing selected certificate into user certificate store....<br />";
            var certmgr = Windows.Security.Cryptography.Certificates.CertificateEnrollmentManager.userCertificateEnrollmentManager;
            certmgr.importPfxDataAsync(
                pfxCert,
                pfxPassword.text,
                Windows.Security.Cryptography.Certificates.ExportOption.exportable,
                Windows.Security.Cryptography.Certificates.KeyProtectionLevel.noConsent,
                Windows.Security.Cryptography.Certificates.InstallOptions.deleteExpired,
                "Import Pfx").then(
                    function () {
                        result.innerHTML += "Certificate import succeded<br />";
                    });
        }
        catch (ex) {
            result.innerHTML += "Certificate import failed with " + ex.Message + "<br />";
        }
    }

    function browse_click() {
        var resultMessage = "Pfx file selection ";

        var pfxFilePicker = new Windows.Storage.Pickers.FileOpenPicker();
        pfxFilePicker.fileTypeFilter.append(".pfx");
        pfxFilePicker.commitButtonText = "Open";

        try
        {
            pfxFilePicker.pickSingleFileAsync().then(
                function (pfxFile) {
                    if (pfxFile != null) {
                        Windows.Storage.FileIO.readBufferAsync(pfxFile).then(
                            function (buffer) {
                                var dataReader = Windows.Storage.Streams.DataReader.fromBuffer(buffer);
                                var bytes = new Uint8Array(buffer.length);
                                dataReader.readBytes(bytes);
                                dataReader.close();
                                pfxCert = btoa(bytes) 
                                pfxPassword.text = "";
                                resultMessage += "succeeded";
                            });
                    }
                    else {
                        resultMessage += "failed";
                    }
                });
        }
        catch (ex) {
            resultMessage += "failed with ";
            resultMessage += ex.Message;
        }

        result.innerHTML = resultMessage;
    }

儲存 default.js 檔案。
您現在可以按 F5 來執行您的 Windows 市集應用程式和登入受保護的 Web 服務，還有將 PFX 檔案匯入本機憑證存放區。

您可以使用這些步驟來建立多個 Windows 市集應用程式，它們會使用相同的使用者憑證來存取相同或不同的受保護 Web 服務。

摘要

在這個快速入門中，您已學會如何建立使用用戶端憑證保護的 Web 服務，還有如何建立可存取受保護 Web 服務的 Windows 市集應用程式。

共用方式為