Inicio rápido: compartir certificados de usuario entre aplicaciones de la Tienda Windows (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

La autenticación de certificado ofrece un alto grado de confianza al autenticar a un usuario. Las aplicaciones que requieren una autenticación segura que vaya más allá de una combinación de identificador de usuario y contraseña pueden usar certificados para la autenticación. En algunos casos, un grupo de servicios querrá autenticar un usuario en varias aplicaciones de la Tienda Windows. En este inicio rápido se muestra cómo puedes autenticar varias aplicaciones de la Tienda Windows usando el mismo certificado, y cómo facilitar un práctico código para que un usuario importe un certificado proporcionado para acceder a servicios web seguros.

Las aplicaciones de la Tienda Windows se pueden autenticar en un servicio web usando un certificado, y varias aplicaciones de la Tienda Windows pueden usar un único certificado del almacén de certificados para autenticar el mismo usuario. Si un certificado no existe en el almacén, puedes agregar código a tu aplicación para importar un certificado desde un archivo PFX.

Objetivo: Autentica un usuario con un certificado de manera que se pueda usar desde varias aplicaciones de la Tienda Windows para varios servicios web seguros.

Requisitos previos

El único fin de este inicio rápido es servir como ejemplo y usará Microsoft Internet Information Services (IIS) en tu equipo local. Para ejecutar este inicio rápido, necesitarás lo siguiente:

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

Instrucciones

1. Habilitar IIS y la asignación de certificados de cliente

IIS no está habilitado de forma predeterminada. Puedes habilitar IIS usando el Panel de control de Windows.

Abre el Panel de control de Windows y selecciona Programas.
Selecciona Activar o desactivar características de Windows.
Expande Internet Information Services y, después, expande Servicios World Wide Web. Expande Características de desarrollo de aplicaciones y selecciona ASP.NET 3.5 y ASP.NET 4.5. Al seleccionar estas opciones automáticamente se habilita Internet Information Services.
Haz clic en Aceptar para aplicar los cambios.

2. Crear y publicar un servicio web protegido

En este paso, crearás un servicio web protegido y lo publicarás en tu servidor IIS.

Inicia Visual Studio como administrador y selecciona Nuevo proyecto en la página de inicio. Se necesita acceso de administrador para publicar un servicio web en un servidor IIS. En el cuadro de diálogo Nuevo proyecto, cambia el marco de trabajo a .NET Framework 3.5. Selecciona Visual C# -> Web -> Visual Studio - > Aplicación de servicio web de ASP.NET. Asigna a la aplicación el nombre "FirstContosoBank". Haz clic en Aceptar para crear el proyecto.

En el archivo Service1.asmx.cs, cambia el método web predeterminado HelloWorld por el siguiente método "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();
        }

Guarda el archivo Service1.asmx.cs.
En el Explorador de soluciones, haz clic con el botón derecho en la aplicación "FirstContosoBank" y selecciona Publicar.
En el cuadro de diálogo Publicación web, crea un nuevo perfil y asígnale el nombre "ContosoProfile". Haz clic en Siguiente.
En la página siguiente, escribe el nombre de tu servidor IIS y especifica el nombre del "Sitio web predeterminado/FirstContosoBank". Haz clic en Publicar para publicar tu servicio web.

3. Configurar el servicio web para que use la autenticación de certificados de cliente

En este paso, usarás el administrador de IIS para configurar el servicio web que acabas de publicar para solicitar un certificado de cliente.

Ejecuta el Administrador de Internet Information Services (IIS).
Expande los sitios de tu servidor IIS. En Sitio web predeterminado, selecciona el nuevo servicio web "FirstContosoBank". En la sección Acciones, selecciona Configuración avanzada....
Establece Grupo de aplicaciones en .NET v2.0 y haz clic en Aceptar.
En el Administrador de Internet Information Services (IIS), selecciona tu servidor IIS y haz doble clic en Certificados de servidor. En la sección Acciones, selecciona Crear certificado autofirmado.... Escribe "ContosoBank" como nombre descriptivo para el certificado y haz clic en Aceptar. Esto creará un nuevo certificado para que lo use el servidor IIS, con el formato "<nombre_de_servidor>.<nombre_de_dominio>".
En el Administrador de Internet Information Services (IIS), selecciona el sitio web predeterminado. En la sección Acciones, selecciona Enlace y haz clic en Agregar.... Selecciona "https" como tipo, establece el puerto en "443" y especifica el nombre de host completo del servidor IIS ("<nombre_de_servidor>.<nombre_de_dominio>"). Establece el certificado SSL en "ContosoBank". Haz clic en Aceptar. Haz clic en Cerrar en la ventana Enlaces de sitios.
En el Administrador de Internet Information Services (IIS), selecciona el servicio web "FirstContosoBank". Haz doble clic en Configuración de SSL. Activa Requerir SSL. En Certificados de cliente, selecciona Requerir. En la sección Acciones, haz clic en Aplicar.
Para comprobar que el servicio web está correctamente configurado, abre tu explorador web y escribe la siguiente dirección web: "https://<nombre_de_servidor>.<nombre_de_dominio>/FirstContosoBank/Service1.asmx". Por ejemplo, "https://myserver.example.com/FirstContosoBank/Service1.asmx". Si tu servicio web está correctamente configurado, se te pedirá que selecciones un certificado de cliente para poder acceder al servicio web.

Puedes repetir los pasos anteriores para crear varios servicios web a los que se pueda acceder con el mismo certificado de cliente.

4. Crear una aplicación de la Tienda Windows que use autenticación de certificado

Ahora que tienes uno o varios servicios web seguros, puedes crear aplicaciones de la Tienda Windows que usen certificados para autenticar en esos servicios web. Cuando se realiza una solicitud a un servicio web autenticado usando el objeto HttpClient, la solicitud inicial no contendrá un certificado de cliente. El servicio web autenticado responderá con una solicitud para autenticar el cliente. Cuando esto ocurre, el cliente de Windows consultará automáticamente los certificados de cliente disponibles en el almacén de certificados. El usuario puede seleccionar uno de estos certificados para autenticarse en el servicio web. Algunos certificados están protegidos por contraseña, por lo que necesitarás proporcionar al usuario una manera de especificar la contraseña del certificado.

Si no hay certificados de cliente disponibles, el usuario tendrá que agregar un certificado al almacén de certificados. En tu aplicación de la Tienda Windows puedes incluir código que permita al usuario seleccionar un archivo PFX que contenga un certificado de cliente y, después, importar ese certificado al almacén de certificados de cliente.

Sugerencia Puedes usar makecert.exe para crear un archivo PFX para usar con este inicio rápido. Para obtener información sobre cómo usar makecert.exe, consulta MakeCert.

Abre Visual Studio y selecciona Nuevo proyecto en la página de inicio. Selecciona Visual C# -> Tienda Windows -> Aplicación vacía (XAML). Asigna el nombre "FirstContosoBankApp" al nuevo proyecto. Haz clic en Aceptar para crear el nuevo proyecto.

En el archivo default.html, agrega el siguiente código HTML en el elemento body predeterminado. Este HTML incluye un botón para buscar el archivo PFX que se va a importar, un cuadro de texto para especificar una contraseña para un archivo PFX protegido por contraseña, un botón para importar un archivo PFX seleccionado, un botón para iniciar sesión en el servicio web protegido, y un bloque de texto para mostrar el estado de la acción actual.

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

Guarda el archivo default.html.

En la carpeta js, en el archivo default.js, cambia la función app.onactivated predeterminada por la siguiente función y variables. Especifican la dirección del método "Login" protegido de tu servicio web "FirstContosoBank", y una variable global que guarda un certificado PFX para importar al almacén de certificados. Actualiza el <nombre_de_servidor> al nombre completo de tu servidor 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());
    }
};

En el archivo default.js, agrega el siguiente controlador de clic para el botón de inicio de sesión y el método para acceder al servicio web protegido.

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

En el archivo default.js, agrega los siguientes controladores de clic para el botón para examinar un archivo PFX y el botón para importar un archivo PFX seleccionado al almacén de certificados.

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

Guarda el archivo default.js.
Ahora puedes presionar F5 para ejecutar tu aplicación de la Tienda Windows e iniciar sesión en tu servicio web protegido, así como importar un archivo PFX al almacén de certificados local.

Puedes usar estos pasos para crear varias aplicaciones de la Tienda Windows que usan el mismo certificado de usuario para acceder a servicios web protegidos iguales o diferentes.

Resumen

En este inicio rápido, has aprendido cómo crear un servicio web que se protege mediante certificados de cliente, y cómo crear una aplicación de la Tienda Windows que pueda acceder a ese servicio web protegido.

Temas relacionados

Autenticación e identidad de usuario

Compartir a través de