Autenticación y autorización para Azure Static Web Apps

Azure Static Web Apps proporciona una experiencia de autenticación simplificada. De forma predeterminada, tiene acceso a una serie de proveedores preconfigurados o a la opción de registrar un proveedor personalizado.

  • Cualquier usuario puede autenticarse con un proveedor habilitado.
  • Una vez iniciada la sesión, los usuarios pertenecen a los roles anonymous y authenticated de forma predeterminada.
  • Los usuarios autorizados obtienen acceso a rutas restringidas mediante reglas definidas en el archivo staticwebapp.config.json.
  • A los usuarios se les asignan roles personalizados mediante el sistema de invitaciones integrado.
  • Una función de API puede asignar roles personalizados a los usuarios mediante programación durante el inicio de sesión.
  • Todos los proveedores de autenticación están habilitados de forma predeterminada.
    • Para restringir un proveedor de autenticación, bloquee el acceso con una regla de ruta personalizada. La configuración de un proveedor personalizado también deshabilita los proveedores preconfigurados.
  • Estos son los proveedores preconfigurados:
    • Azure Active Directory1
    • GitHub
    • Twitter

1 El proveedor de Azure Active Directory preconfigurado permite que cualquier cuenta Microsoft inicie sesión. Para restringir el inicio de sesión a un inquilino de Active Directory específico, configure un proveedor de Azure Active Directory personalizado.

Los temas de autenticación y autorización se superponen significativamente con los conceptos de enrutamiento, que se detallan en la guía de configuración de la aplicación.

Carpeta del sistema

Azure Static Web Apps usa la carpeta del sistema /.auth para proporcionar acceso a las API relacionadas con la autorización. En lugar de exponer las rutas de la carpeta /.auth directamente a los usuarios finales, piense en la posibilidad de crear reglas de enrutamiento para crear direcciones URL descriptivas.

Inicio de sesión

Use la siguiente tabla para buscar la ruta específica de los proveedores.

Proveedor de autorización Ruta de inicio de sesión
Azure Active Directory /.auth/login/aad
GitHub /.auth/login/github
Twitter /.auth/login/twitter

Por ejemplo, para iniciar sesión con GitHub, podría incluir un vínculo como el siguiente fragmento de código:

<a href="/.auth/login/github">Login</a>

Si decide admitir más de un proveedor, debe exponer un vínculo específico del proveedor para cada uno en su sitio web.

Puede usar una regla de ruta para asignar un proveedor predeterminado a una ruta descriptiva, como /login.

{
  "route": "/login",
  "redirect": "/.auth/login/github"
}

Redireccionamiento posterior al inicio de sesión

Si quiere que un usuario vuelva a una página específica después de iniciar sesión, proporcione una dirección URL completa en el parámetro de cadena de consulta post_login_redirect_uri.

Por ejemplo:

<a href="/.auth/login/github?post_login_redirect_uri=https://zealous-water.azurestaticapps.net/success">Login</a>

Además, puede redirigir a los usuarios no autenticados de vuelta a la página de referencia después de iniciar sesión. Para configurar este comportamiento, cree una regla de invalidación de respuesta que establezca post_login_redirect_uri en .referrer.

Por ejemplo:

{
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github?post_login_redirect_uri=.referrer",
      "statusCode": 302
    }
  }
}

Logout

La ruta /.auth/logout cierra la sesión de los usuarios en el sitio web. Puede agregar un vínculo a la navegación del sitio para permitir que el usuario cierre la sesión, tal y como se muestra en el ejemplo siguiente.

<a href="/.auth/logout">Log out</a>

Puede usar una regla de ruta para asignar una ruta descriptiva, como /logout.

{
  "route": "/logout",
  "redirect": "/.auth/logout"
}

Redireccionamiento posterior al cierre de sesión

Si quiere que un usuario vuelva a una página específica después de cerrar sesión, proporcione una dirección URL en el parámetro de cadena de consulta post_logout_redirect_uri.

Bloqueo de un proveedor de autenticación

Puede que desee evitar que la aplicación use un proveedor de autenticación. Por ejemplo, es posible que quiera estandarizar la aplicación para únicamente en los proveedores que exponen las direcciones de correo electrónico.

Para bloquear un proveedor, puede crear reglas de ruta para devolver un código de estado 404 para las solicitudes a la ruta específica del proveedor bloqueado. Por ejemplo, para restringir Twitter como proveedor, agregue la regla de ruta siguiente.

{
  "route": "/.auth/login/twitter",
  "statusCode": 404
}

Roles

Cada usuario que tiene acceso a una aplicación web estática pertenece a uno o varios roles. Existen dos roles integrados a los que los usuarios pueden pertenecer:

  • anónimo: Todos los usuarios pertenecen automáticamente al rol anónimo.
  • autenticado: Todos los usuarios que inician sesión pertenecen al rol autenticado.

Además de los roles integrados, puede crear asignar roles personalizados a los usuarios y hacer referencia a ellos en el archivo staticwebapp.config.json.

Administración de roles

Adición de un usuario a un rol

Para agregar un usuario a un rol, genere invitaciones que le permitan asociar usuarios a roles concretos. Los roles se definen y mantienen en el archivo staticwebapp.config.json.

Creación de una invitación

Las invitaciones son específicas de los proveedores de autorización individuales; por lo tanto, tenga en cuenta las necesidades de la aplicación al seleccionar los proveedores que se van a admitir. Algunos proveedores exponen la dirección de correo electrónico de los usuarios, mientras que otros solo proporcionan el nombre de usuario del sitio.

Proveedor de autorización Con respecto al usuario, expone
Azure Active Directory Dirección de correo electrónico
GitHub username
Twitter username
  1. Vaya a un recurso de Static Web Apps en Azure Portal.
  2. En Configuración, haga clic en Administración de roles.
  3. Haga clic en el botón Invitar.
  4. Seleccione un Proveedor de autorización de la lista de opciones.
  5. Agregue el nombre de usuario o la dirección de correo electrónico del destinatario en el cuadro Invitee details (Detalles del invitado).
    • En GitHub y Twitter, escriba el nombre de usuario. Para todos los demás, escriba la dirección de correo electrónico del destinatario.
  6. Seleccione el dominio del sitio estático de la lista desplegable Dominio.
    • El dominio que seleccione será el dominio que aparezca en la invitación. Si tiene un dominio personalizado asociado a su sitio, es probable que desee elegir el dominio personalizado.
  7. Agregue una lista separada por comas de nombres de rol en el cuadro Rol.
  8. Especifique el número máximo de horas que desea que la invitación siga siendo válida.
    • El límite máximo posible es de 168 horas, es decir, 7 días.
  9. Haga clic en el botón Generate (Generar).
  10. Copie el vínculo del cuadro Vínculo de invitación.
  11. Envíe el vínculo de la invitación por correo electrónico a la persona a la que va a conceder acceso a su aplicación.

Cuando el usuario haga clic en el vínculo de la invitación, se le pedirá que inicie sesión con su cuenta correspondiente. Una vez que inicie sesión correctamente, se asocian al usuario los roles seleccionados.

Precaución

Asegúrese de que las reglas de ruta no entren en conflicto con los proveedores de autenticación seleccionados. Bloquear un proveedor con una regla de ruta impedirá que los usuarios acepten invitaciones.

Actualización de las asignaciones de roles

  1. Vaya a un recurso de Static Web Apps en Azure Portal.
  2. En Configuración, haga clic en Administración de roles.
  3. Haga clic en el usuario en la lista.
  4. Edite la lista de roles en el cuadro Rol.
  5. Haga clic en el botón Actualizar.

Quitar usuario

  1. Vaya a un recurso de Static Web Apps en Azure Portal.
  2. En Configuración, haga clic en Administración de roles.
  3. Busque el usuario en la lista.
  4. Active la casilla en la fila del usuario.
  5. Haga clic en el botón Eliminar .

Al quitar un usuario, tenga en cuenta los elementos siguientes:

  1. Al quitar un usuario, se invalidan sus permisos.
  2. La propagación mundial puede tardar unos minutos.
  3. Si se vuelve a agregar el usuario a la aplicación, userId cambia.

Eliminación de la información de identificación personal

Al conceder consentimiento a una aplicación como usuario final, la aplicación tiene acceso a su dirección de correo electrónico o a su nombre de usuario, según el proveedor de identidades. Una vez que se proporcione esta información, el propietario de la aplicación decidirá cómo administrar la información de identificación personal.

Los usuarios finales deben ponerse en contacto con los administradores de las aplicaciones web individuales para revocar esta información de sus sistemas.

Para quitar información de identificación personal de la plataforma de Azure Static Web Apps e impedir que la plataforma proporcione esta información en futuras solicitudes, envíe una solicitud mediante la dirección URL:

https://identity.azurestaticapps.net/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

Para evitar que la plataforma proporcione esta información en futuras solicitudes a aplicaciones individuales, envíe una solicitud a la siguiente dirección URL:

https://<WEB_APP_DOMAIN_NAME>/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

Tenga en cuenta que si usa Azure Active Directory, use aad como valor para el marcador de posición <AUTHENTICATION_PROVIDER_NAME>.

Restricciones

Vea el artículo sobre cuotas para conocer las restricciones y limitaciones generales.

Pasos siguientes