Ejercicio: Configuración de los proveedores de autenticación y el acceso

Completado

La aplicación web de lista de la compra debe proteger el acceso a algunas rutas y deshabilitar proveedores de autenticación específicos. En este ejercicio, actualizará la configuración de enrutamiento de la aplicación web para lograr ese resultado.

En este ejercicio, realizará los pasos siguientes:

1. Agregar reglas a la configuración de enrutamiento para deshabilitar algunos proveedores de autenticación.
2. Proteger la lista de productos de forma que solo los usuarios autenticados puedan acceder a ella.
3. Implementar la aplicación actualizada
4. Probar que las restricciones sean eficaces

Deshabilitación de proveedores de autenticación

Vamos a actualizar la configuración de enrutamiento de nuestra aplicación para deshabilitar el proveedor de autenticación de Microsoft Entra.

1. Abra el proyecto en Visual Studio Code.

2. Abra el siguiente archivo.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Agregue esta configuración de enrutamiento en la raíz del objeto JSON.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Al agregar esta regla de enrutamiento, impedimos que los usuarios accedan al proveedor de autenticación de Microsoft Entra.

Protección del acceso a la lista de productos

A continuación, queremos proteger la lista de productos para que solo los usuarios autenticados puedan acceder a la API. Para ello, agregaremos otra regla de enrutamiento en el archivo de configuración staticwebapp.config.json.

1. Agregue la siguiente regla en la parte superior de la matriz routes.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. Este es el aspecto que debería tener el archivo completado staticwebapp.config.json:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

Implementación de los cambios

Antes de probar el resultado de esta configuración, se volverá a implementar la aplicación.

1. En Visual Studio Code, presione F1 para abrir la paleta de comandos.

2. Escriba y seleccione Git: Confirmar todo.

3. Escriba Secure access como mensaje de confirmación y presione Entrar.

4. Presione F1 para abrir la paleta de comandos.

5. Escriba y seleccione Git: Insertar y luego presione Entrar.

Después de enviar los cambios (“push”), espere a que se ejecute el proceso de compilación e implementación. Los cambios deben estar visibles en la aplicación implementada después de realizar la acción.

Comprobación de las nuevas restricciones

Después de volver a implementar la aplicación, puede probar si las nuevas restricciones son eficaces.

1. En la ventana del Explorador de Visual Studio Code, vuelva a la sección Static Web Apps y haga clic con el botón derecho en my-static-web-app-and-authn y seleccione Examinar sitio para ver la aplicación en el explorador.

2. Si no ha iniciado sesión, debería aparecer el mensaje No autorizado en lugar de la lista de productos.

3. Seleccione Microsoft Entra ID en la lista de proveedores de autenticación para iniciar sesión.

   Debería ver una página de error 404 similar a esta:

   

4. Presione el botón Atrás del explorador para volver a la aplicación.

5. Seleccione GitHub en la lista de proveedores de autenticación para iniciar sesión.

6. Escriba sus credenciales de GitHub si se le pide y, a continuación, seleccione Otorgar consentimiento en la página de consentimiento de Azure.

Acaba de iniciar sesión y debería ver la lista de productos.

Pasos siguientes

¡Enhorabuena! Ha implementado un flujo de trabajo de autenticación completo en la instancia de Static Web App.