Configuración de la autenticación en una aplicación de página única de Angular de ejemplo mediante Azure Active Directory B2C

En este artículo se usa un ejemplo de aplicación de página única (SPA) de Angular para ilustrar cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a sus aplicaciones de Angular.

Información general

OpenID Connect (OIDC) es un protocolo de autenticación basado en OAuth 2.0 que se puede usar para que un usuario inicie sesión de forma segura en una aplicación. En este ejemplo de Angular se usan MSAL Angular y MSAL Browser. MSAL es una biblioteca que proporciona Microsoft y que simplifica el proceso para que las instancias SPA de Angular admitan los procesos de autenticación y autorización.

Flujo de inicio de sesión

El flujo de inicio de sesión consta de los pasos siguientes:

1. El usuario abre la aplicación y selecciona Iniciar sesión.
2. La aplicación inicia la solicitud de autenticación y redirige al usuario a Azure AD B2C.
3. El usuario se suscribe o inicia sesión, restablece la contraseña o inicia sesión con una cuenta de red social.
4. Una vez que se inicia correctamente la sesión, Azure AD B2C devuelve un código de autorización a la aplicación. La aplicación realiza las acciones siguientes:
   1. Intercambia el código de autorización por un token de id., un token de acceso y un token de actualización.
   2. Lee las notificaciones del token de identificación.
   3. Almacena el token de acceso y el token de actualización en una caché en memoria para usarlos más adelante. El token de acceso permite al usuario llamar a recursos protegidos, como una API web. El token de actualización se usa para adquirir un nuevo token de acceso.

Registro de aplicación

Para que la aplicación pueda iniciar sesión con Azure AD B2C y llame a una API web, debe registrar dos aplicaciones en el inquilino de Azure AD B2C:

• El registro de aplicación de página única (Angular) permite que la aplicación inicie sesión con Azure AD B2C. Durante el registro de la aplicación, deberá especificar el URI de redirección. El URI de redireccionamiento es el punto de conexión al que se redirige al usuario una vez que este se autentica con Azure AD B2C. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como identificador de cliente, que permite identificar de forma exclusiva la aplicación. En este artículo se usa el ejemplo Id. de aplicación: 1.

• El registro de API web permite que su aplicación llame a una API web protegida. El registro expone los permisos (ámbitos) de la API web. El proceso de registro de la aplicación genera un id. de aplicación que identifica de forma exclusiva la API web. En este artículo se usa el ejemplo id. de aplicación: 2. Conceda a su aplicación (Id. de aplicación: 1) permisos para los ámbitos de la API web (Id. de aplicación: 2).

En el diagrama siguiente se describen los registros de aplicaciones y la arquitectura de la aplicación.

Llamada a una API web

Una vez completada la autenticación, los usuarios interactúan con la aplicación, que invoca una API web protegida. La API web usa la autenticación de token de portador. El token de portador es el token de acceso que la aplicación ha obtenido de Azure Active Directory B2C. La aplicación pasa el token en el encabezado de autorización de la solicitud HTTPS.

Authorization: Bearer <access token>

Si el ámbito del token de acceso no coincide con los ámbitos de la API web, la biblioteca de autenticación obtiene un nuevo token de acceso con los ámbitos correctos.

Flujo de cierre de sesión

El flujo de cierre de sesión consta de los siguientes pasos:

1. En la aplicación, los usuarios cierran sesión.
2. La aplicación borra sus objetos de sesión y la biblioteca de autenticación borra su caché de tokens.
3. La aplicación lleva a los usuarios al punto de conexión de cierre de sesión de Azure AD B2C para finalizar la sesión correspondiente a este.
4. Los usuarios se redirigen de nuevo a la aplicación.

Prerrequisitos

Antes de seguir los procedimientos de este artículo, asegúrese de que el equipo está ejecutando lo siguiente:

• Visual Studio Code o cualquier otro editor de código.
• Runtime de Node.js y npm.
• Angular CLI.

Paso 1: Configuración del flujo de usuario

Cuando los usuarios intentan iniciar sesión en la aplicación, esta inicia una solicitud de autenticación para el punto de conexión de autorización mediante un flujo de usuario. El flujo de usuario define y controla la experiencia del usuario. Al completar los usuarios el flujo de usuario, Azure AD B2C genera un token y, después, redirige a los usuarios de vuelta a la aplicación.

Si aún no lo ha hecho, cree un flujo de usuario o una directiva personalizada. Repita los pasos para crear tres flujos de usuario independientes de la manera siguiente:

• Un flujo de usuario combinado de inicio de sesión y registro, como susi. Este flujo de usuario también admite la experiencia ¿Olvidó su contraseña?.
• Un flujo de usuario de edición de perfiles, como edit_profile.
• Un flujo de usuario de restablecimiento de contraseña, como reset_password.

Azure AD B2C antepone el prefijo B2C_1_ al nombre del flujo de usuario. Por ejemplo, susi se convierte en B2C_1_susi.

Paso 2: Registro de la SPA de Angular y la API

En este paso, debe crear los registros para la instancia SPA de Angular y la aplicación de API web. También debe especificar los ámbitos de la API web.

2.1 Registro de la aplicación de API web

Siga estos pasos para crear el registro de aplicación de API web (Id. de aplicación: 2):

1. Inicie sesión en Azure Portal.

2. Asegúrese de que usa el directorio que contiene el inquilino de Azure AD B2C. Seleccione el icono Directorios y suscripciones en la barra de herramientas del portal.

3. En la página Configuración del portal | Directorios y suscripciones, busque el directorio de Azure AD B2C en la lista Nombre de directorio y seleccione Cambiar.

4. En Azure Portal, busque y seleccione Azure AD B2C.

5. Seleccione Registros de aplicaciones y luego Nuevo registro.

6. En Nombre, escriba un nombre para la aplicación (por ejemplo, my-api1). Deje los valores predeterminados para URI de redireccionamiento y Tipos de cuenta admitidos.

7. Seleccione Registrar.

8. Una vez completado el registro de la aplicación, seleccione Información general.

9. Anote el valor Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

   

2.2 Configuración de ámbitos

1. Seleccione la aplicación my-api1 que creó (id. de aplicación: 2) para abrir la página Información general.

2. En Administrar, seleccione Exponer una API.

3. Junto a URI de id. de aplicación, seleccione el vínculo Establecer. Reemplace el valor predeterminado (GUID) por un nombre único (por ejemplo, tasks-api) y, luego, seleccione Guardar.

   Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.

4. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.

5. Para crear un ámbito que defina el acceso de lectura a la API, siga estos pasos:

   1. Para Nombre de ámbito, escriba tasks.read.
   2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de lectura a la API de tareas.
   3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de lectura a la API de tareas.

6. Seleccione la opción Agregar un ámbito.

7. Seleccione Agregar un ámbito y agregue una opción que defina el acceso de escritura en la API:

   1. Para Nombre de ámbito, escriba tasks.write.
   2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de escritura a la API de tareas.
   3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de escritura a la API de tareas.

8. Seleccione la opción Agregar un ámbito.

2.3 Registro de la aplicación de Angular

Siga estos pasos para crear el registro de la aplicación de Angular:

1. Inicie sesión en Azure Portal.
2. Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar a su inquilino de Azure AD B2C desde el menú Directorios y suscripciones.
3. En Azure Portal, busque y seleccione Azure AD B2C.
4. Seleccione Registros de aplicaciones y luego Nuevo registro.
5. En Nombre, escriba un nombre de la aplicación. Por ejemplo, escriba MyApp.
6. En Tipos de cuenta compatibles, seleccione Cuentas en cualquier proveedor de identidades o directorio de la organización (para autenticar usuarios con flujos de usuario) .
7. En URI de redirección, seleccione Aplicación de página única (SPA) y, a continuación, escriba http://localhost:4200 en el cuadro de texto de la dirección URL.
8. En Permisos, active la casilla Conceder consentimiento de administrador para openid y permisos de acceso sin conexión.
9. Seleccione Registrar.
10. Anote el Id. de aplicación (cliente) , ya que lo usará en un paso posterior al configurar la aplicación web.

2.5 Concesión de permisos

Si desea conceder permisos a la aplicación (identificador de aplicación: 1), siga estos pasos:

1. Seleccione Registros de aplicaciones y, luego, la aplicación que creó (identificador de aplicación: 1).

2. En Administrar, seleccione Permisos de API.

3. En Permisos configurados, seleccione Agregar un permiso.

4. Seleccione la pestaña Mis API.

5. Seleccione la API (identificador de aplicación:2) a la que la aplicación web debe tener acceso. Por ejemplo, escriba my-api1.

6. En Permiso, expanda Tareas y, a continuación, seleccione los ámbitos que definió anteriormente; por ejemplo, tasks.read y tasks.write.

7. Seleccione Agregar permisos.

8. Seleccione Conceder consentimiento de administrador para <el nombre de inquilino>.

9. Seleccione Sí.

10. Seleccione Actualizar y compruebe que aparece Granted for... (Concedido para...) en Estado para ambos ámbitos.

11. En la lista Permisos configurados, seleccione el ámbito y copie el nombre completo del ámbito.

    

Paso 3: Obtención del código de ejemplo de Angular

En este ejemplo se muestra cómo una aplicación de página única de Angular puede usar Azure AD B2C para el registro e inicio de sesión de usuarios. A continuación, la aplicación adquiere un token de acceso y llama a una API web protegida.

Descargue un archivo .zip del ejemplo o clónelo en el repositorio de GitHub con el siguiente comando:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Configuración del ejemplo de Angular

Ahora que ha obtenido el ejemplo de SPA, actualice el código con sus valores de Azure AD B2C y la API web. En la carpeta de ejemplo, en la carpeta src/app, abra el archivo auth-config.ts. Actualice las claves con los valores correspondientes:

Sección	Key	Valor
b2cPolicies	nombres	Flujo de usuario o directiva personalizada que creó en el paso 1.
b2cPolicies	autoridades	Reemplace your-tenant-name por su nombre de inquilino de Azure AD B2C. Por ejemplo, use contoso.onmicrosoft.com. A continuación, reemplace el nombre de la directiva por el flujo de usuario o la directiva personalizada que creó en el paso 1. Por ejemplo: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
b2cPolicies	authorityDomain	Su nombre de inquilino de Azure AD B2C. Por ejemplo: contoso.onmicrosoft.com.
Configuración	clientId	Id. de la aplicación de Angular del paso 2.3.
protectedResources	endpoint	Dirección URL de la API web: http://localhost:5000/api/todolist.
protectedResources	ámbitos	Ámbitos de la API web que creó en el paso 2.2. Por ejemplo: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

El código src/app/auth-config.ts resultante debería tener un aspecto similar al del siguiente ejemplo:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Paso 4: Obtención del código de ejemplo de la API web

Ahora que ha registrado la API web y ha definido sus ámbitos, configure el código de la API web para que funcione con el inquilino de Azure AD B2C.

Descargue un archivo *.zip o clone el proyecto de API web de ejemplo de GitHub. También puede ir directamente al proyecto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi en GitHub mediante el siguiente comando:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 Configuración de la API web

En la carpeta de ejemplo, abra el archivo config.json. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C. La aplicación de la API web usa esta información para validar el token de acceso que la aplicación web pasa como token de portador. Actualice las siguientes propiedades de la configuración de la aplicación:

Sección	Key	Valor
credentials	tenantName	La primera parte del nombre de inquilino de Azure AD B2C. Por ejemplo: contoso.
credentials	clientID	Id. de aplicación de API web del paso 2.1. En el diagrama anterior, es la aplicación con el id. de aplicación: 2.
credentials	issuer	(Opcional) Valor de notificación iss del emisor del token. Azure AD B2C devuelve de manera predeterminada el token en el siguiente formato: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Reemplace <your-tenant-name> por la primera parte del nombre del inquilino de Azure AD B2C. Reemplace <your-tenant-ID> por el id. del inquilino de Azure AD B2C.
directivas	policyName	Flujo de usuario o directiva personalizada que creó en el paso 1. Si la aplicación usa varios flujos de usuario o directivas personalizadas, especifique solo uno. Por ejemplo, use el flujo de usuario de registro o de inicio de sesión.
resource	scope	Ámbitos del registro de la aplicación de API web del paso 2.5.

El archivo de configuración final debería tener un aspecto parecido al del siguiente JSON:

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

Paso 5: Ejecución de la SPA de Angular y la API web

Ya tiene todo listo para probar el acceso con ámbito de Angular a la API. En este paso, ejecute la API web y la aplicación de Angular de ejemplo en su equipo local. A continuación, inicie sesión en la aplicación de Angular y seleccione el botón TodoList (Lista de tareas) para iniciar una solicitud a la API protegida.

Ejecución de la API web

1. Abra una ventana de consola y cambie al directorio que contiene la API web de ejemplo. Por ejemplo:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Ejecute los comandos siguientes:

   npm install && npm update
   node index.js
   

   La ventana de la consola muestra el número de puerto en el que se hospeda la aplicación:

   Listening on port 5000...
   

Ejecución de la aplicación Angular

1. Abra otra ventana de consola y cambie al directorio que contiene la aplicación de Angular. Por ejemplo:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Ejecute los comandos siguientes:

   npm install && npm update
   npm start
   

   La ventana de la consola muestra el número de puerto donde se hospeda la aplicación:

   Listening on port 4200...
   

3. Vaya a http://localhost:4200 en el explorador para ver la aplicación.

4. Seleccione Login (Iniciar sesión).

   

5. Complete el proceso de inicio de sesión o registro.

6. Tras iniciar sesión correctamente, debería aparecer su perfil. En el menú, seleccione ToDoList (Lista de tareas).

   

7. Seleccione Agregar para agregar nuevos elementos a la lista o use los iconos para eliminar o editar elementos.

   

Implementación de aplicación

En una aplicación de producción, el URI de redirección del registro de la aplicación suele ser un punto de conexión accesible públicamente donde se ejecuta la aplicación, como https://contoso.com.

Puede agregar y modificar los URI de redireccionamiento en las aplicaciones registradas en cualquier momento. Las siguientes restricciones se aplican a los URI de redireccionamiento:

• La dirección URL de respuesta debe comenzar con el esquema https.
• La dirección URL de respuesta distingue mayúsculas de minúsculas. Sus mayúsculas o minúsculas deben coincidir con las de la ruta de acceso de la dirección URL de la aplicación en ejecución.

Pasos siguientes

• Obtenga más información sobre el ejemplo de código.
• Habilitación de la autenticación en su propia aplicación de Angular
• Configuración de opciones de autenticación en su aplicación de Angular
• Habilitación de la autenticación en su propia API web