Servicios de autenticación externa con ASP.NET Web API (C#)

Visual Studio 2017 y ASP.NET 4.7.2 expanden las opciones de seguridad para aplicaciones de página única (SPA) y servicios de API Web para integrarse con servicios de autenticación externa, que incluyen varios servicios de autenticación de OAuth/OpenID y redes sociales: Cuentas de Microsoft, Twitter, Facebook y Google.

En este tutorial

Requisitos previos

Para seguir los ejemplos de este tutorial, debe tener lo siguiente:

Uso de servicios de autenticación externa

La abundancia de servicios de autenticación externa de los que disponen actualmente los desarrolladores web ayuda a reducir el tiempo de desarrollo a la hora de crear nuevas aplicaciones web. Los usuarios de Internet suelen tener varias cuentas en servicios web y redes sociales populares, por lo que cuando una aplicación web implementa los servicios de autenticación de un servicio web o red social externa, se ahorra el tiempo de desarrollo que se habría invertido en crear una implementación de autenticación. El uso de un servicio de autenticación externa ahorra a los usuarios finales tener que crear otra cuenta para su aplicación web, y también tener que recordar otro nombre de usuario y contraseña.

En el pasado, los desarrolladores tenían dos opciones: crear su propia implementación de autenticación o aprender a integrar un servicio de autenticación externa en sus aplicaciones. En el nivel más básico, el siguiente diagrama ilustra un flujo de solicitud simple para un agente de usuario (navegador web) que está solicitando información de una aplicación web que está configurada para utilizar un servicio de autenticación externa:

Illustration of a simple request flow for a user agent

En el diagrama anterior, el agente de usuario (o navegador web en este ejemplo) realiza una solicitud a una aplicación web, que redirige el navegador web a un servicio de autenticación externa. El agente de usuario envía sus credenciales al servicio de autenticación externa, y si el agente de usuario se ha autenticado correctamente, el servicio de autenticación externa redirigirá al agente de usuario a la aplicación web original con algún tipo de token que el agente de usuario enviará a la aplicación web. La aplicación web utilizará el token para verificar que el agente de usuario ha sido autenticado correctamente por el servicio de autenticación externa, y la aplicación web puede utilizar el token para recopilar más información sobre el agente de usuario. Una vez que la aplicación haya terminado de procesar la información del agente de usuario, la aplicación web devolverá la respuesta adecuada al agente de usuario en función de su configuración de autorización.

En este segundo ejemplo, el agente de usuario negocia con la aplicación web y el servidor de autorización externa, y la aplicación web realiza una comunicación adicional con dicho servidor para recuperar información adicional sobre el agente de usuario:

Illustration of user agent negotiating with the web application

Visual Studio 2017 y ASP.NET 4.7.2 facilitan a los desarrolladores la integración con servicios de autenticación externa al proporcionar integración incorporada para los siguientes servicios de autenticación:

  • Facebook
  • Google
  • Cuentas Microsoft (cuentas de Windows Live ID)
  • Twitter

Los ejemplos de este tutorial mostrarán cómo configurar cada uno de los servicios de autenticación externa compatibles mediante la nueva plantilla de aplicación web ASP.NET que se incluye con Visual Studio 2017.

Nota:

Si es necesario, puede que tenga que añadir su FQDN a la configuración de su servicio de autenticación externa. Este requisito se basa en las restricciones de seguridad de algunos servicios de autenticación externa que requieren que el FQDN de la configuración de su aplicación coincida con el FQDN que utilizan sus clientes. (Los pasos para esto variarán mucho para cada servicio de autenticación externa; tendrá que consultar la documentación de cada servicio de autenticación externa para ver si esto es necesario y cómo configurar estos ajustes). Si necesita configurar IIS Express para usar un FQDN para probar este entorno, consulte la sección Configuración de IIS Express para usar un nombre de dominio completo más adelante en este tutorial.

Creación de una aplicación web de ejemplo

Los siguientes pasos le guiarán a través de la creación de una aplicación de ejemplo utilizando la plantilla de aplicación web ASP.NET, y utilizará esta aplicación de ejemplo para cada uno de los servicios de autenticación externa más adelante en este tutorial.

Inicie Visual Studio 2017 y seleccione Nuevo proyecto en la página Inicio. O bien, en el menú Archivo, seleccione Nuevo y, a continuación, Proyecto.

Cuando se muestre el cuadro de diálogo Nuevo proyecto, seleccione Instalado y expanda Visual C#. En Visual C#, seleccione Web. En la lista de plantillas de proyecto, seleccione Aplicación web ASP.NET (.NET Framework). Escriba el nombre del proyecto y haga clic en Aceptar.

Image of New Project dialog box

Cuando se muestre el nuevo proyecto de ASP.NET, seleccione la plantilla Aplicación de página única y haga clic en Crear proyecto.

Image of template selection

Espere a que Visual Studio 2017 cree el proyecto.

Cuando Visual Studio 2017 haya terminado de crear el proyecto, abra el archivo Startup.Auth.cs que se encuentra en la carpeta App_Start.

Cuando se crea por primera vez el proyecto, ninguno de los servicios de autenticación externa está habilitado en el archivo Startup.Auth.cs. A continuación, se muestra cómo se podría ver el código, con las secciones resaltadas para dónde habilitaría un servicio de autenticación externa y cualquier configuración pertinente para usar cuentas de Microsoft, Twitter, Facebook o autenticación de Google con la aplicación de ASP.NET:

using System;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.DataProtection;
using Microsoft.Owin.Security.Google;
using Microsoft.Owin.Security.OAuth;
using Owin;
using WebApplication1.Models;
using WebApplication1.Providers;

namespace WebApplication1
{
    public partial class Startup
    {
        // Enable the application to use OAuthAuthorization. You can then secure your Web APIs
        static Startup()
        {
            PublicClientId = "web";

            OAuthOptions = new OAuthAuthorizationServerOptions
            {
                TokenEndpointPath = new PathString("/Token"),
                AuthorizeEndpointPath = new PathString("/Account/Authorize"),
                Provider = new ApplicationOAuthProvider(PublicClientId),
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
                AllowInsecureHttp = true
            };
        }

        public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

        public static string PublicClientId { get; private set; }

        // For more information on configuring authentication, please visit https://go.microsoft.com/fwlink/?LinkId=301864
        public void ConfigureAuth(IAppBuilder app)
        {
            // Configure the db context, user manager and signin manager to use a single instance per request
            app.CreatePerOwinContext(ApplicationDbContext.Create);
            app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
            app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create);

            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login"),
                Provider = new CookieAuthenticationProvider
                {
                    // Enables the application to validate the security stamp when the user logs in.
                    // This is a security feature which is used when you change a password or add an external login to your account.  
                    OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                        validateInterval: TimeSpan.FromMinutes(20),
                        regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
                }
            });
            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process.
            app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5));

            // Enables the application to remember the second login verification factor such as phone or email.
            // Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from.
            // This is similar to the RememberMe option when you log in.
            app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);

            // Uncomment the following lines to enable logging in with third party login providers
            //app.UseMicrosoftAccountAuthentication(
            //    clientId: "",
            //    clientSecret: "");

            //app.UseTwitterAuthentication(
            //    consumerKey: "",
            //    consumerSecret: "");

            //app.UseFacebookAuthentication(
            //    appId: "",
            //    appSecret: "");

            //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
            //{
            //    ClientId = "",
            //    ClientSecret = ""
            //});
        }
    }
}

Al presionar F5 para compilar y depurar la aplicación web, se mostrará una pantalla de inicio de sesión donde verá que no se han definido servicios de autenticación externa.

Image of login screen

En las secciones siguientes, aprenderá a habilitar cada uno de los servicios de autenticación externa que se proporcionan con ASP.NET en Visual Studio 2017.

Habilitación de la autenticación de Facebook

El uso de la autenticación de Facebook requiere que cree una cuenta de desarrollador de Facebook y el proyecto requerirá un identificador de aplicación y una clave secreta de Facebook para poder funcionar. Para obtener información sobre cómo crear una cuenta de desarrollador de Facebook y obtener el identificador de aplicación y la clave secreta, consulte https://go.microsoft.com/fwlink/?LinkID=252166.

Una vez que haya obtenido el identificador de aplicación y la clave secreta, siga estos pasos para habilitar la autenticación de Facebook para la aplicación web:

  1. Cuando el proyecto esté abierto en Visual Studio 2017, abra el archivo Startup.Auth.cs.

  2. Busque la sección de autenticación de Facebook del código:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //    consumerKey: "",
    //    consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //    appId: "",
    //    appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  3. Quite los caracteres "//" para quitar la marca de comentario de las líneas de código resaltadas y agregue el identificador de aplicación y la clave secreta. Una vez agregados esos parámetros, puede volver a compilar el proyecto:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //   appId: "426f62526f636b73",
    //   appSecret: "");
    
    //app.UseGoogleAuthentication();
    
  4. Al presionar F5 para abrir la aplicación web en el explorador web, verá que Facebook se ha definido como un servicio de autenticación externa:

    Image of Facebook defined

  5. Al hacer clic en el botón Facebook, el explorador se redirigirá a la página de inicio de sesión de Facebook:

    Image of Facebook login page

  6. Después de escribir sus credenciales de Facebook y hacer clic en Iniciar sesión, el explorador web se redirigirá de nuevo a la aplicación web, que le pedirá el nombre de usuario que desea asociar a su cuenta de Facebook:

    Image of web application

  7. Después de escribir el nombre de usuario y hacer clic en el botón Registrarse, la aplicación web mostrará la página principal predeterminada para su cuenta de Facebook:

    Image displaying default Facebook home page

Habilitación de la autenticación de Google

El uso de la autenticación de Google requiere que cree una cuenta de desarrollador de Google y el proyecto requerirá un identificador de aplicación y una clave secreta de Google para poder funcionar. Para obtener información sobre cómo crear una cuenta de desarrollador de Facebook y obtener el identificador de aplicación y la clave secreta, consulte https://developers.google.com.

Para habilitar la autenticación de Google para la aplicación web, siga estos pasos:

  1. Cuando el proyecto esté abierto en Visual Studio 2017, abra el archivo Startup.Auth.cs.

  2. Busque la sección de autenticación de Google del código:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //    consumerKey: "",
    //    consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //    appId: "",
    //    appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  3. Quite los caracteres "//" para quitar la marca de comentario de las líneas de código resaltadas y agregue el identificador de aplicación y la clave secreta. Una vez agregados esos parámetros, puede volver a compilar el proyecto:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");
    
    app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    {
        ClientId = "477522346600.apps.googleusercontent.com",
        ClientSecret = "gobkdpbocikdfbnfahjladnetpdkvmic"
    });
    
  4. Al presionar F5 para abrir la aplicación web en el explorador web, verá que Google se ha definido como un servicio de autenticación externa:

    Image Google has been defined

  5. Al hacer clic en el botón Google, el navegador se redirigirá a la página de inicio de sesión de Google:

    Image of Google login page

  6. Después de escribir sus credenciales de Google y hacer clic en Iniciar sesión, Google le pedirá que compruebe que la aplicación web tiene permisos para acceder a su cuenta de Google:

    Image of Google permissions

  7. Al hacer clic en Aceptar, el explorador web se redirigirá de nuevo a la aplicación web, que le pedirá el nombre de usuario que desea asociar a su cuenta de Google:

    Image of web application prompt for user name to associate

  8. Después de escribir el nombre de usuario y hacer clic en el botón Registrarse, la aplicación web mostrará la página principal predeterminada para su cuenta de Google:

    Image of Google default home page

Habilitación de la autenticación de Microsoft

La autenticación de Microsoft requiere crear una cuenta de desarrollador y requiere un identificador de cliente y un secreto de cliente para poder funcionar. Para obtener información sobre cómo crear una cuenta de desarrollador de Microsoft y obtener el identificador de cliente y el secreto de cliente, consulte https://go.microsoft.com/fwlink/?LinkID=144070.

Una vez que haya obtenido la clave de consumidor y el secreto de consumidor, siga estos pasos para habilitar la autenticación de Microsoft para la aplicación web:

  1. Cuando el proyecto esté abierto en Visual Studio 2017, abra el archivo Startup.Auth.cs.

  2. Busque la sección de autenticación de Microsoft del código:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  3. Quite los caracteres "//" para quitar la marca de comentario de las líneas de código resaltadas y agregue el identificador de cliente y el secreto de cliente. Una vez agregados esos parámetros, puede volver a compilar el proyecto:

    // Uncomment the following lines to enable logging in with third party login providers
    app.UseMicrosoftAccountAuthentication(
        clientId: "426f62526f636b73",
        clientSecret: "57686f6120447564652c2049495320526f636b73");
    
    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  4. Al presionar F5 para abrir la aplicación web en el explorador web, verá que Microsoft se ha definido como un servicio de autenticación externa:

    Image of Microsoft defined

  5. Al hacer clic en el botón Microsoft, el explorador se redirigirá a la página de inicio de sesión de Microsoft:

    Image of Microsoft login page

  6. Después de escribir las credenciales de Microsoft y hacer clic en Iniciar sesión, se le pedirá que compruebe que la aplicación web tiene permisos para acceder a su cuenta de Microsoft:

    Image of Microsoft permissions

  7. Al hacer clic en , el explorador web se redirigirá de nuevo a la aplicación web, que le pedirá el nombre de usuario que desea asociar a su cuenta de Microsoft:

    Image of Google account to associate

  8. Después de escribir el nombre de usuario y hacer clic en el botón Registrarse, la aplicación web mostrará la página principal predeterminada para su cuenta de Microsoft:

    Image of default Microsoft home page

Habilitación de la autenticación de Twitter

La autenticación de Twitter requiere crear una cuenta de desarrollador y requiere una clave de consumidor y un secreto de consumidor para poder funcionar. Para obtener información sobre cómo crear una cuenta de desarrollador de Twitter y obtener la clave de consumidor y el secreto de consumidor, consulte https://go.microsoft.com/fwlink/?LinkID=252166.

Una vez que haya obtenido la clave de consumidor y el secreto de consumidor, siga estos pasos para habilitar la autenticación de Twitter para la aplicación web:

  1. Cuando el proyecto esté abierto en Visual Studio 2017, abra el archivo Startup.Auth.cs.

  2. Busque la sección de autenticación de Twitter del código:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    //app.UseTwitterAuthentication(
    //   consumerKey: "",
    //   consumerSecret: "");
    
    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  3. Quite los caracteres "//" para quitar la marca de comentario de las líneas de código resaltadas y agregue la clave de consumidor y el secreto de consumidor. Una vez agregados esos parámetros, puede volver a compilar el proyecto:

    // Uncomment the following lines to enable logging in with third party login providers
    //app.UseMicrosoftAccountAuthentication(
    //    clientId: "",
    //    clientSecret: "");
    
    app.UseTwitterAuthentication(
       consumerKey: "426f62526f636b73",
       consumerSecret: "57686f6120447564652c2049495320526f636b73");
    
    //app.UseFacebookAuthentication(
    //   appId: "",
    //   appSecret: "");
    
    //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
    //{
    //    ClientId = "",
    //    ClientSecret = ""
    //});
    
  4. Al presionar F5 para abrir la aplicación web en el explorador web, verá que Twitter se ha definido como un servicio de autenticación externa:

    Image of Twitter defined

  5. Al hacer clic en el botón Twitter, el navegador se redirigirá a la página de inicio de sesión de Twitter:

    Image of Twitter login page

  6. Después de escribir sus credenciales de Twitter y hacer clic en Autorizar aplicación, el explorador web se redirigirá de nuevo a la aplicación web, que le pedirá el nombre de usuario que desea asociar a su cuenta de Twitter:

    Image of Twitter account to associate in web app

  7. Después de escribir el nombre de usuario y hacer clic en el botón Registrarse, la aplicación web mostrará la página principal predeterminada para su cuenta de Twitter:

    Image of default Twitter home page

Información adicional

Para obtener información adicional sobre cómo crear aplicaciones que usan OAuth y OpenID, consulte las direcciones URL siguientes:

Combinación de servicios de autenticación externa

Para mayor flexibilidad, puede definir varios servicios de autenticación externa al mismo tiempo: esto permite a los usuarios de la aplicación web usar una cuenta de cualquiera de los servicios de autenticación externa habilitados:

Image of multiple external authentication services

Configuración de IIS Express para usar un nombre de dominio completo

Algunos proveedores de autenticación externa no admiten la prueba de la aplicación mediante una dirección HTTP como http://localhost:port/. Para solucionar este problema, puede agregar una asignación estática de nombre de dominio completo (FQDN) al archivo HOSTS y configurar las opciones del proyecto en Visual Studio 2017 para usar el FQDN para probar o depurar. Para ello, siga estos pasos:

  • Agregue un FQDN estático asignación del archivo HOSTS:

    1. Abra un símbolo del sistema con privilegios elevados en Windows.

    2. Escriba el siguiente comando:

      notepad %WinDir%\system32\drivers\etc\hosts

    3. Agregue una entrada como la siguiente al archivo HOSTS:

      127.0.0.1 www.wingtiptoys.com

    4. Guarde y cierre el archivo HOSTS.

  • Configure el proyecto de Visual Studio para usar el FQDN:

    1. Cuando el proyecto esté abierto en Visual Studio 2017, haga clic en el menú Proyecto y seleccione las propiedades del proyecto. Por ejemplo, puede seleccionar Propiedades de WebApplication1.
    2. Seleccione la pestaña Web.
    3. Escriba el FQDN para la dirección URL del proyecto. Por ejemplo, escribiría http://www.wingtiptoys.com si fuera la asignación de FQDN que agregó al archivo HOSTS.
  • Configure IIS Express para usar el FQDN para la aplicación:

    1. Abra un símbolo del sistema con privilegios elevados en Windows.

    2. Escriba el siguiente comando para cambiar a la carpeta IIS Express:

      cd /d "%ProgramFiles%\IIS Express"

    3. Escriba el siguiente comando para agregar el FQDN a la aplicación:

      appcmd.exe set config -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings.[protocol='http',bindingInformation='*:80:www.wingtiptoys.com']" /commit:apphost

    Donde WebApplication1 es el nombre del proyecto y bindingInformation contiene el número de puerto y el FQDN que desea usar para las pruebas.

Cómo obtener la configuración de la aplicación para la autenticación de Microsoft

Vincular una aplicación a Windows Live para la autenticación de Microsoft es un proceso sencillo. Si aún no ha vinculado una aplicación a Windows Live, puede seguir estos pasos:

  1. Vaya a https://go.microsoft.com/fwlink/?LinkID=144070 y escriba el nombre y la contraseña de la cuenta de Microsoft cuando se le solicite y haga clic en Iniciar sesión:

  2. Seleccione Agregar una aplicación y escriba el nombre de la aplicación cuando se le solicite y, después, haga clic en Crear:

    Image of add an app

  3. Seleccione la aplicación en Nombre y aparecerá su página de propiedades de la aplicación.

  4. Escriba el dominio de redireccionamiento de la aplicación. Copie el identificador de la aplicación y, en Secretos de aplicación, seleccioneGenerar contraseña . Copie la contraseña que aparece. El identificador y la contraseña de la aplicación son el identificador de cliente y el secreto de cliente. Seleccione Aceptar y, después, Guardar.

    Image of redirect domain information

Opcional: Deshabilitar el registro local

La funcionalidad actual de registro local ASP.NET no impide que los programas automatizados (bots) creen cuentas de miembro; por ejemplo, mediante el uso de una tecnología de validación y prevención de bots como CAPTCHA. Por este motivo, debe quitar el formulario de inicio de sesión local y el vínculo de registro en la página de inicio de sesión. Para ello, abra la página _Login.cshtml del proyecto y, después, comente las líneas del panel de inicio de sesión local y el vínculo de registro. La página resultante debe tener un aspecto similar al ejemplo de código siguiente:

<!-- ko with: login -->
<hgroup class="title">
    <h1>Log in</h1>
</hgroup>
<div class="row-fluid">
    @*<section class="span7">
        <form>
            <fieldset class="form-horizontal">
                <legend>Use a local account to log in.</legend>
                <ul class="text-error" data-bind="foreach: errors">
                    <li data-bind="text: $data"></li>
                </ul>
                <div class="control-group">
                    <label for="UserName" class="control-label">User name</label>
                    <div class="controls">
                        <input type="text" name="UserName" data-bind="value: userName, hasFocus: true" />
                        <span class="text-error" data-bind="visible: userName.hasError, text: userName.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="Password" class="control-label">Password</label>
                    <div class="controls">
                        <input type="password" name="Password" data-bind="value: password" />
                        <span class="text-error" data-bind="visible: password.hasError, text: password.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" name="RememberMe" data-bind="checked: rememberMe" />
                            <label for="RememberMe">Remember me?</label>
                        </label>
                    </div>
                </div>
                <div class="form-actions no-color">
                    <button type="submit" class="btn" data-bind="click: login, disable: loggingIn">Log in</button>
                </div>
                <p><a href="#" data-bind="click: register">Register</a> if you don't have a local account.</p>
            </fieldset>
        </form>
    </section>*@
    <section class="span5">
        <h2>Log in using another service</h2>
        <div data-bind="visible: loadingExternalLogin">Loading...</div>
        <div data-bind="visible: !loadingExternalLogin()">
            <div class="message-info" data-bind="visible: !hasExternalLogin()">
                <p>
                    There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=252166">this article</a>
                    for details on setting up this ASP.NET application to support logging in via external services.
                </p>
            </div>
            <form data-bind="visible: hasExternalLogin">
                <fieldset class="form-horizontal">
                    <legend>Use another service to log in.</legend>
                    <p data-bind="foreach: externalLoginProviders">
                        <button type="submit" class="btn" data-bind="text: name, attr: { title: 'Log in using your ' + name() + ' account' }, click: login"></button>
                    </p>
                </fieldset>
            </form>
        </div>
    </section>
</div>
<!-- /ko -->

Una vez deshabilitado el panel de inicio de sesión local y el vínculo de registro, la página de inicio de sesión solo mostrará los proveedores de autenticación externa que ha habilitado:

Image of external providers only login