Compartir vía

Escenario: aplicación nativa que llama a API web

Obtenga información sobre cómo crear una aplicación nativa que inicia la sesión de los usuarios autenticados mediante AD FS 2019 y que adquiere tokens mediante la biblioteca MSAL para llamar a las API web.

Antes de leer este artículo, debe estar familiarizado con los conceptos de AD FS y el flujo de concesión de código de autorización.

Información general

Información general

En este flujo, se agrega autenticación a la aplicación nativa (cliente público) para que pueda iniciar la sesión de los usuarios y llamar a una API web. Para llamar a una API web desde una aplicación nativa que inicia la sesión de los usuarios, puede usar el método de adquisición de tokens AcquireTokenInteractive de MSAL. Para habilitar esta interacción, MSAL aprovecha un explorador web.

Para comprender mejor cómo configurar una aplicación nativa en AD FS para adquirir tokens de acceso de forma interactiva, usaremos un ejemplo que está disponible aquí y seguiremos los pasos de registro de la aplicación y configuración del código.

Requisitos previos

  • Herramientas de cliente de GitHub
  • AD FS 2019 o posterior configurado y en ejecución
  • Visual Studio 2013 o posterior.

Registro de aplicaciones en AD FS

En esta sección, se muestra cómo registrar la aplicación nativa como un cliente público y la API web como usuario de confianza (RP) en AD FS.

  1. En Administración de AD FS, haga clic con el botón derecho en Grupos de aplicaciones y seleccione Agregar grupo de aplicaciones.

  2. En el Asistente para grupos de aplicaciones, en Nombre, escriba NativeAppToWebApi y, en Aplicaciones cliente-servidor, seleccione la plantilla Aplicación nativa accediendo a una API web. Haga clic en Next.

    Captura de pantalla de la página principal del Asistente para agregar un grupo de aplicaciones que muestra la plantilla Aplicación nativa accediendo a una API web resaltada.

  3. Copie el valor de Identificador de cliente. Se usará más adelante como valor de ClientId en el archivo App.config de la aplicación. Escriba lo siguiente para URI de redirección:https://ToDoListClient. Haga clic en Agregar. Haga clic en Next.

    Captura de pantalla de la página Aplicación nativa del Asistente para agregar grupos de aplicaciones en la que se muestra el identificador U R I de redirección.

  4. En la pantalla Configurar la API Web, escriba el Identificador:https://localhost:44321/. Haga clic en Agregar. Haga clic en Next. Este valor se usará más adelante en los archivos App.config y Web.Config de la aplicación.

    Captura de pantalla de la página Configurar API web del Asistente para agregar grupos de aplicaciones que muestra el identificador correcto.

  5. En la pantalla Aplicar la directiva de Control de acceso, seleccione Permitir a todos y haga clic en Siguiente.

    Captura de pantalla de la página Elegir directiva de control de acceso del Asistente para agregar grupos de aplicaciones que muestra la opción Permitir a todos resaltada.

  6. En la pantalla Configurar los permisos de la aplicación, asegúrese de que el elemento openid esté seleccionado y haga clic en Siguiente.

    Captura de pantalla de la página Configurar los permisos de la aplicación del Asistente para agregar grupos de aplicaciones que muestra el elemento open I D seleccionado.

  7. En la pantalla Resumen, haga clic en Siguiente.

  8. En la pantalla Completar, haga clic en Cerrar.

  9. En Administración de AD FS, haga clic en Grupos de aplicaciones y seleccione el grupo de aplicaciones NativeAppToWebApi. Haga clic con el botón secundario y seleccione Propiedades.

    Captura de pantalla del cuadro de diálogo Administración de A D F S que muestra el grupo NativeAppToWebApi resaltado y la opción Propiedades de la lista desplegable.

  10. En la pantalla de propiedades de NativeAppToWebApi, seleccione NativeAppToWebApi: API Web en API Web y haga clic en Editar....

    Captura de pantalla del cuadro de diálogo de propiedades de NativeAppToWebApi que muestra la aplicación NativeAppToWebApi: A P I Web resaltada.

  11. En la pantalla Propiedades de NativeAppToWebApi: API Web, seleccione la pestaña Reglas de transformación de emisión y haga clic en Agregar regla....

    Captura de pantalla del cuadro de diálogo Propiedades de NativeAppToWebApi: API Web en la que se muestra la pestaña Reglas de transformación de emisión.

  12. En el Asistente para agregar regla de notificación de transformación, seleccione Transformar una notificación entrante en el menú desplegable Plantilla de regla de notificación y haga clic en Siguiente.

    Captura de pantalla de la página Seleccionar plantilla de regla del Asistente para agregar regla de notificación de transformación que muestra seleccionada la opción Transformar una notificación entrante.

  13. Escriba NameID en el campo Nombre de regla de notificación. Seleccione Nombre para Tipo de notificación entrante, Id. de nombre para Tipo de notificación saliente y Nombre común para Formato de id. de nombre saliente. Haga clic en Finalizar.

    Captura de pantalla de la página Configurar regla del Asistente para agregar reglas de notificación de transformación que muestra la configuración que se explicó anteriormente.

  14. Haga clic en Aceptar en la pantalla Propiedades de NativeAppToWebApi: API Web y, a continuación, en Propiedades de NativeAppToWebApi.

Configuración del código

En esta sección, se muestra cómo configurar una aplicación nativa para iniciar la sesión del usuario y recuperar un token para llamar a la API Web.

  1. Descargue el ejemplo desde aquí.

  2. Abra el ejemplo con Visual Studio.

  3. Abra el archivo App.config. Modifique lo siguiente:

    • ida:Authority: escriba https://[your AD FS hostname]/adfs.

    • ida:ClientId: escriba el valor de Identificador de cliente del paso 3 de la sección anterior "Registro de aplicaciones en AD FS".

    • ida:RedirectUri: escriba el valor de URI de redirección del paso 3 de la sección anterior "Registro de aplicaciones en AD FS".

    • todo:TodoListResourceId: escriba el valor de Identificador del paso 4 de la sección anterior "Registro de aplicaciones en AD FS".

    • ida: todo:TodoListBaseAddress: escriba el valor de Identificador del paso 4 de la sección anterior "Registro de aplicaciones en AD FS".

      Captura de pantalla del archivo de configuración de la aplicación en la que se muestran los valores modificados.

  4. Abra el archivo Web.config. Modifique lo siguiente:

    • ida:Audience: escriba el valor de Identificador del paso 4 de la sección anterior "Registro de aplicaciones en AD FS".

    • ida:AdfsMetadataEndpoint: escriba https://[your AD FS hostname]/federationmetadata/2007-06/federationmetadata.xml.

      Captura de pantalla del archivo Web.config en la que se muestran los valores modificados.

Prueba del ejemplo

En esta sección, se muestra cómo probar el ejemplo configurado anteriormente.

  1. Una vez que haya realizado los cambios en el código, vuelva a compilar la solución.

  2. En Visual Studio, haga clic con el botón derecho en la solución y seleccione Establecer proyectos de inicio....

    Captura de pantalla de la lista que aparece al hacer clic con el botón derecho en la solución con la opción Establecer proyectos de inicio resaltada.

  3. En las páginas de propiedades, asegúrese de que la opción Acción esté establecida en Iniciar para cada uno de los proyectos.

    Captura de pantalla del cuadro de diálogo de páginas de propiedades de la solución que muestra la opción Varios proyectos de inicio seleccionada y todas las acciones de los proyectos establecidas en Iniciar.

  4. En la parte superior de Visual Studio, haga clic en la flecha verde.

    Captura de pantalla de la interfaz de usuario de Visual Studio con la opción Inicio resaltada.

  5. En la pantalla principal de la aplicación nativa, haga clic en Sign In.

    Captura de pantalla del cuadro de diálogo To Do List Client.

Si no ve la pantalla de la aplicación nativa, busque y quite los archivos *msalcache.bin de la carpeta donde se guarda el repositorio del proyecto en el sistema.

  1. Se le redirigirá a la página de inicio de sesión de AD FS. Continúe e inicie sesión.

    Captura de pantalla de la página Iniciar sesión.

  2. Una vez que haya iniciado sesión, escriba el texto Build Native App to Web Api en el campo Create a To Do item. Haga clic en Add item. Esto llamará al servicio de lista de tareas pendientes (API web) y agregará el elemento en la memoria caché.

    Captura de pantalla del cuadro de diálogo To Do List Client con el nuevo elemento de lista de tareas pendientes rellenando la sección To Do Items.

Pasos siguientes

Flujos de AD FS OpenID Connect/OAuth y escenarios de aplicación