Démarrage rapide : partage de certificats utilisateur entre applications du Windows Store (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

L’authentification par certificat permet d’authentifier un utilisateur avec un niveau de confiance élevé. Les applications qui nécessitent une authentification sécurisée au-delà d’une combinaison identifiant utilisateur et mot de passe peuvent utiliser des certificats à des fins d’authentification. Dans certains cas, un groupe de services peut authentifier un utilisateur pour plusieurs applications du Windows Store. Ce guide de démarrage rapide montre comment authentifier plusieurs applications du Windows Store à l’aide du même certificat. Vous apprendrez également à écrire du code pour permettre à un utilisateur d’importer un certificat fourni pour accéder à des services Web sécurisés.

Les applications du Windows Store peuvent s’authentifier auprès d’un service Web à l’aide d’un certificat, et plusieurs applications Windows Store peuvent utiliser un même certificat du magasin de certificats pour authentifier le même utilisateur. Si un certificat n’existe pas dans le magasin, vous pouvez ajouter du code à votre application pour importer un certificat à partir d’un fichier PFX.

Objectif: authentifier un utilisateur à l’aide d’un certificat et permettre à plusieurs applications du Windows Store d’utiliser ce même certificat pour accéder à des services Web sécurisés.

Prérequis

Ce guide de démarrage rapide est fourni uniquement à titre d’exemple et utilise les services IIS (Microsoft Internet Information Services) de votre ordinateur local. Conditions préalables à l’exécution de ce guide de démarrage rapide :

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

Instructions

1. Activer IIS et le mappage des certificats clients

IIS n’est pas activé par défaut. Vous pouvez activer IIS à l’aide du Panneau de configuration Windows.

Ouvrez le Panneau de configuration Windows et sélectionnez Programmes.
Sélectionnez Activer ou désactiver des fonctionnalités Windows.
Développez Internet Information Services, puis Services World Wide Web. Développez Fonctionnalités de développement d’applications, puis sélectionnez ASP.NET 3.5 et ASP.NET 4.5. Ces sélections permettent d’activer automatiquement Internet Information Services.
Cliquez sur OK pour appliquer les modifications.

2. Créer et publier un service Web sécurisé

Au cours de cette étape, vous allez créer un service Web sécurisé et le publier sur votre serveur IIS.

Exécutez Microsoft Visual Studio en tant qu’administrateur et sélectionnez Nouveau projet dans la page de démarrage. Un accès administrateur est requis pour publier un service Web sur un serveur IIS. Dans la boîte de dialogue Nouveau projet, sélectionnez .NET Framework 3.5. Sélectionnez Visual C# -> Web -> Visual Studio -> Application de service Web ASP.NET. Nommez l’application "FirstContosoBank". Cliquez sur OK pour créer le projet.

Dans le fichier Service1.asmx.cs, remplacez la méthode Web HelloWorld par défaut par la méthode "Login" suivante.

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

Enregistrez le fichier Service1.asmx.cs.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur l’application "FirstContosoBank", puis sélectionnez Publier.
Dans la boîte de dialogue Publier le site Web, créez un profil et nommez-le "ContosoProfile". Cliquez sur Suivant.
Dans la page suivante, entrez le nom de votre serveur IIS, puis spécifiez le nom de site "Default Web Site/FirstContosoBank". Cliquez sur Publier pour publier votre service Web.

3. Configurer votre service Web de manière à utiliser l’authentification par certificat client

Au cours de cette étape, vous allez utiliser le gestionnaire IIS pour configurer le service Web que vous venez de publier de manière à ce qu’il exige un certificat client.

Exécutez le Gestionnaire des services Internet (IIS).
Développez les sites pour votre serveur IIS. Sous Site Web par défaut, sélectionnez le nouveau service Web "FirstContosoBank". Dans la section Actions, sélectionnez Paramètres avancés.
Choisissez .NET v2.0 comme Pool d’applications, puis cliquez sur OK.
Dans le Gestionnaire des services Internet (IIS), sélectionnez votre serveur IIS, puis double-cliquez sur Certificats de serveur. Dans la section Actions, sélectionnez Créer un certificat auto-signé. Entrez "ContosoBank" comme nom convivial pour le certificat, puis cliquez sur OK. Un certificat est alors créé au format "<nom-serveur>.<nom-domaine>" pour le serveur IIS.
Dans le Gestionnaire des services Internet (IIS), sélectionnez le site Web par défaut. Dans la section Actions, sélectionnez Liaison, puis cliquez sur Ajouter. Sélectionnez "https" comme type, affectez au port la valeur "443", puis entrez le nom d’hôte complet de votre serveur IIS ("<nom-serveur>.<nom-domaine>"). Définissez "ContosoBank" comme certificat SSL. Cliquez sur OK. Cliquez sur Fermer dans la fenêtre Liaisons de sites.
Dans le Gestionnaire des services Internet (IIS), sélectionnez le service Web "FirstContosoBank". Double cliquez sur Paramètres SSL. Cochez Exiger SSL. Sous Certificats clients, sélectionnez Demander. Dans la section Actions, sélectionnez Appliquer.
Pour vérifier que le service Web est configuré correctement, ouvrez votre navigateur et entrez l’adresse Web suivante : "https://<nom-serveur>.<nom-domaine>/FirstContosoBank/Service1.asmx". Par exemple, "https://myserver.example.com/FirstContosoBank/Service1.asmx". Si votre service Web est correctement configuré, vous êtes invité à sélectionner un certificat client pour accéder au service Web.

Vous pouvez répéter les étapes précédentes pour créer plusieurs services Web accessibles à l’aide du même certificat client.

4. Créer une application du Windows Store qui utilise l’authentification par certificat

Maintenant que vous avez un ou plusieurs services Web sécurisés, vous pouvez créer des applications du Windows Store qui utilisent des certificats pour s’authentifier auprès de ces services Web. Lorsque vous faites une demande à un service Web authentifié à l’aide de l’objet HttpClient, la demande initiale ne contient pas de certificat client. Le service Web authentifié répond par une demande d’authentification du client. Lorsque cela se produit, le client Windows interroge automatiquement le magasin de certificats au sujet des certificats clients disponibles. Votre utilisateur peut choisir l’un de ces certificats pour s’authentifier auprès du service Web. Certains certificats étant protégés par mot de passe, vous devez fournir à l’utilisateur un moyen d’entrer le mot de passe associé à un certificat.

Si aucun certificat client n’est disponible, l’utilisateur doit ajouter un certificat au magasin de certificats. Vous pouvez inclure du code dans votre application du Windows Store qui permet à un utilisateur de sélectionner un fichier PFX contenant un certificat client, puis importer ce certificat dans le magasin de certificats clients.

Astuce Vous pouvez utiliser makecert.exe pour créer un fichier PFX à utiliser avec ce guide de démarrage rapide. Pour plus d’informations sur l’utilisation de makecert.exe, voir MakeCert.

Ouvrez Visual Studio et sélectionnez Nouveau projet dans la page de démarrage. Sélectionnez Visual C# -> Windows Store -> Application vide (XAML). Nommez le nouveau projet "FirstContosoBankApp". Cliquez sur OK pour créer le projet.

Dans le fichier default.html, ajoutez le code HTML suivant à l’élément body par défaut. Ce code HTML comprend un bouton pour rechercher un fichier PFX à importer, une zone de texte pour entrer un mot de passe pour un fichier PFX protégé par mot de passe, un bouton pour importer un fichier PFX sélectionné, un bouton pour se connecter au service Web sécurisé, ainsi qu’un bloc de texte pour afficher l’état de l’action actuelle.

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

Enregistrez le fichier default.html.

Dans le dossier js, dans le fichier default.js, remplacez la fonction app.onactivated par défaut par la fonction et les variables suivantes. Celles-ci spécifient l’adresse de la méthode "Login" sécurisée de votre service Web "FirstContosoBank". Une variable globale détient aussi un certificat PFX à importer dans le magasin de certificats. Remplacez <nom-serveur> par le nom complet de votre serveur 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());
    }
};

Dans le fichier default.js, ajoutez le gestionnaire de clic suivant pour le bouton et la méthode de connexion afin d’accéder au service Web sécurisé.

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

Dans le fichier default.js, ajoutez les gestionnaires de clic suivants pour le bouton pour rechercher un fichier PFX et le bouton afin d’importer un fichier PFX sélectionné dans le magasin de certificats.

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

Enregistrez le fichier default.js.
Appuyez à présent sur F5 pour exécuter votre application du Windows Store, établir une connexion à votre service Web sécurisé et enfin importer un fichier PFX dans le magasin de certificats local.

Vous pouvez utiliser ces étapes pour créer plusieurs applications du Windows Store qui utilisent le même certificat utilisateur pour accéder à des services Web sécurisés identiques ou différents.

Récapitulatif

Dans ce guide de démarrage rapide, vous avez vu comment créer un service Web sécurisé à l’aide de certificats clients et comment créer une application du Windows Store capable d’accéder à ce service Web sécurisé.

Rubriques associées

Authentification et identité des utilisateurs

Partager via