Schnellstart: Verwenden von Benutzerzertifikaten für mehrere Windows Store-Apps (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Die Zertifikatauthentifizierung bietet eine hohe Vertrauenswürdigkeit bei der Benutzerauthentifizierung. Apps, die über eine Kombination aus Benutzer-ID und Kennwort hinaus eine sichere Authentifizierung benötigen, können Zertifikate für die Authentifizierung verwenden. Es kann vorkommen, dass eine Gruppe von Diensten einen Benutzer für mehrere Windows Store-Apps authentifizieren möchte. In dieser Schnellstartanleitung wird veranschaulicht, wie Sie mehrere Windows Store-Apps mit demselben Zertifikat authentifizieren und für einen Benutzer geeigneten Code zum Importieren eines Zertifikats bereitstellen können, das für den Zugriff auf sichere Webdienste bestimmt ist.

Windows Store-Apps können für die Authentifizierung bei einem Webdienst ein Zertifikat verwenden, und mehrere Windows Store-Apps können ein einzelnes Zertifikat aus dem Zertifikatspeicher verwenden, um denselben Benutzer zu authentifizieren. Falls im Speicher kein Zertifikat vorhanden ist, können Sie der App Code für den Import eines Zertifikats aus einer PFX-Datei hinzufügen.

Ziel: Authentifizieren eines Benutzers per Zertifikat mithilfe eines Verfahrens, das von mehreren Windows Store-Apps für mehrere sichere Webdienste verwendet werden kann.

Voraussetzungen

Diese Schnellstartanleitung dient nur als Beispiel, und es wird Microsoft-Internetinformationsdienste (IIS) auf Ihrem lokalen Computer verwendet. Zum Ausführen dieser Schnellstartanleitung benötigen Sie Folgendes:

Windows 8.1
Microsoft Visual Studio
Microsoft-Internetinformationsdienste (IIS)

Anweisungen

1. Aktivieren von IIS und der Zuordnung des Clientzertifikats

IIS ist standardmäßig nicht aktiviert. Sie können IIS über die Systemsteuerung von Windows aktivieren.

Öffnen Sie die Windows-Systemsteuerung, und wählen Sie Programme.
Wählen Sie die Option Windows-Features aktivieren oder deaktivieren.
Erweitern Sie Internetinformationsdienste und dann WWW-Dienste. Erweitern Sie Anwendungsentwicklungsfeatures, und wählen Sie ASP.NET 3.5 und ASP.NET 4.5. Das Auswählen führt dazu, dass Internetinformationsdienste automatisch aktiviert wird.
Klicken Sie auf OK, um die Änderungen zu übernehmen.

2. Erstellen und Veröffentlichen eines sicheren Webdiensts

In diesem Schritt erstellen Sie einen sicheren Webdienst und veröffentlichen ihn auf Ihrem IIS-Server.

Führen Sie Visual Studio als Administrator aus, und wählen Sie auf der Startseite die Option Neues Projekt. Für die Veröffentlichung eines Webdiensts auf einem IIS-Server ist Administratorzugriff erforderlich. Ändern Sie im Dialogfeld "Neues Projekt" das Framework in .NET Framework 3.5. Wählen Sie Visual C# -> Web -> Visual Studio - > ASP.NET-Webdienstanwendung. Geben Sie der Anwendung den Namen "FirstContosoBank". Klicken Sie auf OK, um das Projekt zu erstellen.

Ersetzen Sie in der Datei Service1.asmx.cs die standardmäßige Webmethode HelloWorld durch die folgende "Login"-Methode.

        [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();
        }

Speichern Sie die Datei Service1.asmx.cs.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die App "FirstContosoBank", und wählen Sie Veröffentlichen.
Erstellen Sie im Dialogfeld Web veröffentlichen ein neues Profil, und geben Sie ihm den Namen "ContosoProfile". Klicken Sie auf Weiter.
Geben Sie auf der nächsten Seite den Servernamen für Ihren IIS-Server ein, und geben Sie dann den Websitenamen "Standardwebsite/FirstContosoBank" an. Klicken Sie auf Veröffentlichen, um den Webdienst zu veröffentlichen.

3. Konfigurieren des Webdiensts für die Verwendung der Clientzertifikatauthentifizierung

In diesem Schritt verwenden Sie den IIS-Manager, um den eben veröffentlichten Webdienst so zu konfigurieren, dass er ein Clientzertifikat erfordert.

Führen Sie den Internetinformationsdienste (IIS)-Manager aus.
Erweitern Sie die Websites für Ihren IIS-Server. Wählen Sie unter Standardwebsite den neuen Webdienst "FirstContosoBank". Wählen Sie im Abschnitt Aktionen die Option Erweiterte Einstellungen....
Legen Sie den Anwendungspool auf .NET v2.0 fest, und klicken Sie auf OK.
Wählen Sie im Internetinformationsdienste (IIS)-Manager Ihren IIS-Server aus, und doppelklicken Sie anschließend auf Serverzertifikate. Wählen Sie im Abschnitt Aktionen die Option Selbstsigniertes Zertifikat erstellen.... Geben Sie "ContosoBank" als Anzeigenamen für das Zertifikat ein, und klicken Sie auf OK. Es wird ein neues Zertifikat zur Verwendung durch den IIS-Server im Format "<Servername>.<Domänenname>" erstellt.
Wählen Sie im Internetinformationsdienste (IIS)-Manager die Standardwebsite aus. Wählen Sie im Abschnitt Aktionen die Option Bindung, und klicken Sie anschließend auf Hinzufügen.... Wählen Sie als Typ "https", legen Sie den Port auf "443" fest, und geben Sie den vollständigen Hostnamen für Ihren IIS-Server ein ("<Servername>.<Domänenname>"). Legen Sie das SSL-Zertifikat auf "ContosoBank" fest. Klicken Sie auf OK. Klicken Sie im Fenster Sitebindungen auf Schließen.
Wählen Sie im Internetinformationsdienste (IIS)-Manager den Webdienst "FirstContosoBank" aus. Doppelklicken Sie auf SSL-Einstellungen. Aktivieren Sie SSL erforderlich. Wählen Sie unter Clientzertifikate die Option Erforderlich. Klicken Sie im Abschnitt Aktionen auf Übernehmen.
Sie können überprüfen, ob der Webdienst richtig konfiguriert ist, indem Sie den Webbrowser öffnen und die folgende Webadresse eingeben: "https://<Servername>.<Domänenname>/FirstContosoBank/Service1.asmx". Beispiel: "https://myserver.example.com/FirstContosoBank/Service1.asmx". Wenn der Webdienst richtig konfiguriert ist, werden Sie zum Auswählen eines Clientzertifikats für den Zugriff auf den Webdienst aufgefordert.

Sie können diese Schritte der Schnellstartanleitung wiederholen, um mehrere Webdienste zu erstellen, auf die mit demselben Clientzertifikat zugegriffen werden kann.

4. Erstellen einer Windows Store-App mit Verwendung der Authentifizierung per Zertifikat

Nachdem Sie nun über mindestens einen sicheren Webdienst verfügen, können Sie Windows Store-Apps erstellen, die Zertifikate für die Authentifizierung bei diesen Webdiensten nutzen. Wenn Sie mithilfe des HttpClient-Objekts eine Anforderung an einen authentifizierten Webdienst senden, enthält die erste Anforderung kein Clientzertifikat. Der authentifizierte Webdienst antwortet mit einer Anforderung der Clientauthentifizierung. Daraufhin fragt der Windows-Client den Zertifikatspeicher automatisch nach verfügbaren Clientzertifikaten ab. Der Benutzer kann für die Authentifizierung beim Webdienst eine Auswahl aus diesen Zertifikaten treffen. Da einige Zertifikate kennwortgeschützt sind, müssen Sie es Benutzern ermöglichen, das Kennwort für ein Zertifikat einzugeben.

Falls keine Clientzertifikate verfügbar sind, muss der Benutzer dem Zertifikatspeicher ein Zertifikat hinzufügen. Sie können Code in die Windows Store-App einfügen, der Benutzern die Auswahl einer PFX-Datei mit einem Clientzertifikat und das Importieren dieses Zertifikats in den Clientzertifikatspeicher ermöglicht.

Tipp Verwenden Sie "makecert.exe" zum Erstellen einer PFX-Datei zur Verwendung für diese Schnellstartanleitung. Informationen zur Verwendung von "makecert.exe" finden Sie unter MakeCert.

Öffnen Sie Visual Studio, und wählen Sie auf der Startseite die Option Neues Projekt. Wählen Sie Visual C# -> Windows Store -> Leere App (XAML). Geben Sie dem neuen Projekt den Namen "FirstContosoBankApp". Klicken Sie auf OK, um das neue Projekt zu erstellen.

Fügen Sie in der Datei "default.html" dem standardmäßigen body-Element den folgenden HTML-Code hinzu. Dieser HTML-Code enthält Folgendes: eine Schaltfläche zum Suchen nach einer zu importierenden PFX-Datei, ein Textfeld zum Eingeben eines Kennworts für eine kennwortgeschützte PFX-Datei, eine Schaltfläche zum Importieren einer ausgewählten PFX-Datei, eine Schaltfläche zum Anmelden beim sicheren Webdienst und einen Textblock zum Anzeigen des Zustands der aktuellen Aktion.

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

Speichern Sie die Datei "default.html".

Ersetzen Sie im Ordner "js" in der Datei "default.js" die Standardfunktion app.onactivated durch die folgenden Variablen bzw. die folgende Funktion. Damit wird die Adresse für die sichere "Login"-Methode des Webdiensts "FirstContosoBank" angegeben, sowie eine globale Variable, die ein PFX-Zertifikat zum Importieren in den Zertifikatspeicher enthält. Aktualisieren Sie <Servername> auf den vollqualifizierten Servernamen Ihres IIS-Servers.

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());
    }
};

Fügen Sie in der Datei "default.js" den folgenden Klickhandler für die Anmeldeschaltfläche und -methode zum Zugreifen auf den sicheren Webdienst hinzu.

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;
}

Fügen Sie in der Datei "default.js" die folgenden Klickhandler für die Schaltfläche zum Suchen nach einer PFX-Datei und die Schaltfläche zum Importieren einer ausgewählten PFX-Datei in den Zertifikatspeicher hinzu.

    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;
    }

Speichern Sie die Datei "default.js".
Sie können jetzt F5 drücken, um die Windows Store-App auszuführen, und sich beim sicheren Webdienst anmelden und eine PFX-Datei in den lokalen Zertifikatspeicher importieren.

Mithilfe dieser Schritte können Sie mehrere Windows Store-Apps erstellen, für die dasselbe Benutzerzertifikat verwendet wird, um auf dieselben oder unterschiedliche sichere Webdienste zuzugreifen.

Zusammenfassung

In dieser Schnellstartanleitung haben Sie gelernt, wie Sie einen Webdienst erstellen, der durch Clientzertifikate geschützt ist, und wie Sie eine Windows Store-App erstellen, mit der auf den sicheren Webdienst zugegriffen werden kann.