Desarrollo de aplicaciones ASP.NET con Azure Active Directory

  • Artículo

por Rick Anderson

Las herramientas de Microsoft ASP.NET para Azure Active Directory simplifican la habilitación de la autenticación para las aplicaciones web hospedadas en Azure. Puede usar la autenticación de Azure para autenticar usuarios de Office 365 de su organización, cuentas corporativas sincronizadas desde Active Directory local o usuarios creados en su propio dominio personalizado de Azure Active Directory. La habilitación de la autenticación de Windows Azure configura la aplicación para autenticar a los usuarios mediante un único inquilino de Azure Active Directory.

En este tutorial se muestra cómo crear una aplicación de ASP.NET configurada para el inicio de sesión con Azure Active Directory (Azure AD). También aprenderá a llamar a Graph API para obtener información sobre el usuario que ha iniciado sesión actualmente y cómo implementar la aplicación en Azure.

Requisitos previos

  1. Visual Studio Express 2013 para Web o Visual Studio 2013.
  2. Visual Studio 2013 Update 4: se requiere la actualización 3 o posterior.
  3. Una cuenta de Azure. Haga clic aquí para obtener una evaluación gratuita si aún no tiene una cuenta.

Agregar un administrador global a Active Directory

  1. Inicie sesión en el Portal de administración de Azure.

  2. Todas las cuentas de Azure contienen un Directorio predeterminado: haga clic en él y, a continuación, haga clic en la pestaña Usuarios de la parte superior de la página (vea la imagen siguiente).

  3. Haga clic en Agregar usuario. Screenshot of Azure Management Portal, with Default Directory outlined and selected at left, USERS outlined at right, and ADD USER outlined in footer.

  4. Cree un nuevo usuario con el rol Administrador global. Haga clic en Usuarios en el menú superior y, a continuación, haga clic en el botón Agregar usuario de la barra de comandos.

  5. En el cuadro de diálogo Agregar usuario, escriba un nombre para el nuevo usuario y, a continuación, haga clic en la flecha derecha.

    Screenshot of Add User dialog, with instruction

  6. Escriba el nombre de usuario y establezca el rol en Administrador global. Los administradores globales requieren una dirección de correo electrónico alternativa con fines de recuperación de contraseñas. Cuando haya terminado, haga clic en la flecha derecha.

    Screenshot of user profile in ADD USER dialog, with Global Administrator selected for ROLE. ALTERNATE E MAIL ADDRESS field is highlighted.

  7. En la página siguiente del cuadro de diálogo, haga clic en Crear. Se creará una contraseña temporal para el nuevo usuario y se mostrará en el cuadro de diálogo.

    Screenshot of user profile in ADD USER dialog, with Get temporary password instruction displayed and Create button appearing below.

    Guarde la contraseña; se le pedirá que cambie la contraseña después del primer inicio de sesión. En la imagen siguiente se muestra la nueva cuenta de administrador. Debe usar Azure Active Directory para iniciar sesión en la aplicación, no la cuenta de Microsoft que también se muestra en esta página.

    Screenshot of new admin account, with DISPLAY NAME, USER NAME, and SOURCED FROM columns appearing in table.

Creación de una aplicación de ASP.NET

En los pasos siguientes se usa Visual Studio Express 2013 para Web y se requiere Visual Studio 2013 Update 3.

  1. En Visual Studio, haga clic en Archivo y luego haga clic en Nuevo proyecto. En el cuadro de diálogo Nuevo proyecto, seleccione el proyecto web de Visual C# en el menú izquierdo y haga clic en Aceptar. También puede desactivar la casilla Agregar Application Insights al proyecto si no quiere la funcionalidad de la aplicación.

  2. En el cuadro de diálogo Nuevo proyecto de ASP.NET, seleccione MVC y, a continuación, haga clic en Cambiar autenticación.

    Screenshot of New A S P dot NET Project dialog, with M V C template selected, Change Authentication button outlined and Host in the cloud selected.

  3. En el cuadro de diálogo Cambiar autenticación, seleccione Cuentas organizativas. Estas opciones se pueden usar para registrar automáticamente la aplicación con Azure AD, así como configurar automáticamente la aplicación para que se integre con Azure AD. No tiene que usar el cuadro de diálogo Cambiar autenticación para registrar y configurar la aplicación, pero facilita mucho. Si usa Visual Studio 2012 por ejemplo, todavía puede registrar manualmente la aplicación en el Portal de administración de Azure y actualizar su configuración para integrarse con Azure AD. En los menús desplegables, seleccione Nube: Organización única e Inicio de sesión único, Leer datos de directorio. Escriba el dominio del directorio de Azure AD, por ejemplo (en las imágenes siguientes) aricka0yahoo.onmicrosoft.com y, a continuación, haga clic en Aceptar. Puede obtener el nombre de dominio en la pestaña Dominios del directorio predeterminado en Azure Portal (consulte la imagen siguiente).

    Screenshot of Change Authentication dialog; Organizational Accounts, Cloud dash Single Organization, and Single Sign On, Read directory data outlined.

    En la imagen siguiente se muestra el nombre de dominio de Azure Portal.

    Screenshot of Azure portal, with Default Directory selected at left, DOMAINS highlighted in menu at right and directory domain name displayed below.

    Nota:

    Opcionalmente, puede configurar el URI de identificador de aplicación que se registrará en Azure AD haciendo clic en Más opciones. El URI de identificador de aplicación es el identificador único de una aplicación, que se registra en Azure AD y lo usa la aplicación para identificarse al comunicarse con Azure AD. Para obtener más información sobre el URI del identificador de aplicación y otras propiedades de las aplicaciones registradas, consulte este tema. Al hacer clic en la casilla situada debajo del campo URI de identificador de aplicación, también puede optar por sobrescribir un registro existente en Azure AD que use el mismo URI de identificador de aplicación.

  4. Después de hacer clic en Aceptar, aparecerá un cuadro de diálogo de inicio de sesión y deberá iniciar sesión con una cuenta de administrador global (no la cuenta Microsoft asociada a la suscripción). Si creó una nueva cuenta de administrador anteriormente, se le pedirá que cambie la contraseña e inicie sesión de nuevo con la nueva contraseña.

    Screenshot of Sign in to Azure Active Directory dialog, with fields for Global Administrator account name and password displayed.

  5. Después de autenticarse correctamente, el cuadro de diálogo Nuevo proyecto ASP.NET mostrará la opción de autenticación (Organización ) y el directorio donde se registrará la nueva aplicación (aricka0yahoo.onmicrosoft.com en la imagen siguiente). Debajo de esta información, active la casilla etiquetada Host en la nube. Si esta casilla está activada, el proyecto se aprovisionará como una aplicación web de Azure y se habilitará para facilitar la publicación más adelante. Haga clic en OK.

    Screenshot of New A S P dot NET Project dialog, with M V C template, authentication choice, and directory displayed. Host in the cloud is outlined.

  6. Aparecerá el cuadro de diálogo Configurar sitio web de Azure mediante un nombre de sitio y una región generados automáticamente. Tenga en cuenta también la cuenta en la que ha iniciado sesión actualmente en el cuadro de diálogo. Quiere asegurarse de que esta cuenta sea la misma a la que está asociada la suscripción de Azure, normalmente una cuenta Microsoft.

    Nota:

    Este proyecto requiere una base de datos. Debe seleccionar una de las bases de datos existentes o crear una nueva. Se requiere una base de datos porque el proyecto ya usa un archivo de base de datos local para almacenar una pequeña cantidad de datos de configuración de autenticación. Al implementar la aplicación en un sitio web de Azure, esta base de datos no se empaqueta con la implementación, por lo que debe elegir una accesible en la nube. Haga clic en OK.

    Screenshot of Configure Azure Website dialog, displaying auto-generated Site Name, Region, Database server, Database user name, and Database password.

  7. El proyecto se creará y las opciones de autenticación y las opciones de aplicación web se configurarán automáticamente con el proyecto. Una vez completado este proceso, ejecute el proyecto localmente presionando ^F5. Se le pedirá que inicie sesión con su cuenta de organización. Proporcione el nombre de usuario y la contraseña de la cuenta que creó anteriormente y haga clic en Iniciar sesión.

    Screenshot of Sign in dialog, with fields for organizational account user name and password displayed.

  8. Después de iniciar sesión correctamente, el sitio ASP.NET mostrará que se ha autenticado mostrando el nombre de usuario en la esquina superior derecha de la página.

    Screenshot of A S P dot NET site with u r l highlighted in address bar and username highlighted at top right.

    Si recibe el error: Value no puede ser null ni estar vacío. Nombre del parámetro: linkText Screenshot of server error. Error message is highlighted, reading, Value cannot be null or empty. Parameter name colon link Text.

    consulte la sección depuración al final del tutorial.

Conceptos básicos de Graph API

Graph API es la interfaz programática que se usa para realizar CRUD y otras operaciones en objetos del directorio de Azure AD. Si selecciona una opción de cuenta organizativa para la autenticación al crear un nuevo proyecto en Visual Studio 2013, la aplicación ya estará configurada para llamar a Graph API. En esta sección se muestra brevemente cómo funciona Graph API.

  1. En la aplicación en ejecución, haga clic en el nombre del usuario que inició sesión en la parte superior derecha de la página. Esto le llevará a la página Perfil de usuario, que es una acción en el Controlador de inicio. Observará que la tabla contiene información de usuario sobre la cuenta de administrador que creó anteriormente. Esta información se almacena en el directorio y se llama a Graph API para recuperarla cuando se carga la página.

    Screenshot of User Profile page, with a table including Display Name, First Name, and Last Name for administrator account.

  2. Vuelva a Visual Studio y expanda la carpeta Controladores y abra el archivo HomeController.cs. Verá una acción UserProfile() que contiene código para recuperar un token y, a continuación, llamar a Graph API. Este código se duplica a continuación:

    [Authorize]
public async Task UserProfile()
{
    string tenantId = ClaimsPrincipal.Current.FindFirst(TenantIdClaimType).Value;

    // Get a token for calling the Azure Active Directory Graph
    AuthenticationContext authContext = new AuthenticationContext(String.Format(CultureInfo.InvariantCulture, LoginUrl, tenantId));
    ClientCredential credential = new ClientCredential(AppPrincipalId, AppKey);
    AuthenticationResult assertionCredential = authContext.AcquireToken(GraphUrl, credential);
    string authHeader = assertionCredential.CreateAuthorizationHeader();
    string requestUrl = String.Format(
        CultureInfo.InvariantCulture,
        GraphUserUrl,
        HttpUtility.UrlEncode(tenantId),
        HttpUtility.UrlEncode(User.Identity.Name));

    HttpClient client = new HttpClient();
    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
    request.Headers.TryAddWithoutValidation("Authorization", authHeader);
    HttpResponseMessage response = await client.SendAsync(request);
    string responseString = await response.Content.ReadAsStringAsync();
    UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);

    return View(profile);
}

    Para llamar a Graph API, primero debe recuperar un token. Cuando se recupera el token, su valor de cadena debe anexarse en el encabezado de autorización para todas las solicitudes posteriores a Graph API. La mayoría del código anterior controla los detalles de la autenticación en Azure AD para obtener un token, mediante el token para realizar una llamada a Graph API y, a continuación, transformar la respuesta para que se pueda presentar en la vista.

    La parte más relevante para la discusión es la siguiente línea resaltada: UserProfile profile = JsonConvert.DeserializeObject<UserProfile>(responseString);. Esta línea representa el nombre del usuario, que se ha deserializado de la respuesta JSON y se presenta en la vista.

    Puede llamar a Graph API mediante HttpClient y controlar los datos sin procesar usted mismo, pero una manera más fácil es usar la Biblioteca cliente de Graph que está disponible a través de NuGet. La biblioteca cliente controla las solicitudes HTTP sin procesar y la transformación de los datos devueltos por usted y facilita mucho el trabajo con Graph API en un entorno de .NET. Consulte los ejemplos de código de Graph API relacionados en GitHub.

Implementación de la aplicación en Azure

Los pasos siguientes le mostrarán cómo implementar la aplicación en Azure. En los pasos anteriores, ha conectado el nuevo proyecto con una aplicación web en Azure, por lo que está listo para publicarse en unos pocos pasos.

  1. En Visual Studio, haga clic con el botón derecho en el proyecto y seleccione Publicar. El cuadro de diálogo Publicar web aparecerá con cada opción ya configurada. Haga clic en el botón Siguiente para ir a la página Configuración. Es posible que se le pida que se autentique. Asegúrese de autenticarse con la cuenta de suscripción de Azure (normalmente una cuenta Microsoft) y no la cuenta de organización que creó anteriormente.

    Screenshot of Publish Web dialog with Connection highlighted and each setting already configured at right.

  2. Active la opción Habilitar autenticación organizativa. En el campo Dominio, escriba el dominio del directorio. En la lista desplegable Nivel de acceso, seleccione Inicio de sesión único, Leer datos del directorio. Observará que la base de datos anterior que usó ya se ha rellenado en la sección Bases de datos. Haga clic en Publicar.

    Screenshot of Publish Web dialog. File Publish Options are outlined, including Enable Organizational Authentication, Domain field, and Access Level.

  3. Visual Studio comenzará a implementar el sitio web y aparecerá una nueva ventana del explorador. Es posible que se le pida que se autentique en el directorio una vez más. Una vez autenticado, se le redirigirá al sitio web recién publicado en Azure.

    Screenshot of A S P dot NET site, with u r l of newly published website on Azure displayed in address bar.

Depuración de la aplicación

Si recibe el siguiente error: El valor no puede ser null ni estar vacío. Nombre del parámetro: linkText

Screenshot of erver error that may result. Error message is highlighted, reading, Value cannot be null or empty. Parameter name colon link Text.

Reemplace el código del archivo Views\Shared\_LoginPartial.cshtml por lo siguiente:

@{
   var user = "Null User";
   if (!String.IsNullOrEmpty(User.Identity.Name))
   {
      user = User.Identity.Name;
   }

}

@if (Request.IsAuthenticated)
{
    <text>
         <ul class="nav navbar-nav navbar-right">
            <li>
                @*@Html.ActionLink(User.Identity.Name, "UserProfile", "Home", routeValues: null, htmlAttributes: null)*@
               @Html.ActionLink(user, "UserProfile", "Home", routeValues: null, htmlAttributes: null)
            </li>
            <li>
                @Html.ActionLink("Sign out", "SignOut", "Account")
            </li>
        </ul>
    </text>
}
else
{
     <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "Index", "Home", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Después de ejecutar la aplicación, si el usuario que ha iniciado sesión muestra "Usuario nulo", cierre sesión e inicie sesión con la cuenta de Active Directory que creó anteriormente.

Un excelente tutorial que debe seguir es Profundización de Azure Websites y la autenticación organizativa mediante Azure AD de Rick Rainey.

Más información