Autenticación y autorización de Static Web Apps

  • Instrucciones

Azure Static Web Apps proporciona una experiencia de autenticación simplificada, donde no se requiere ninguna configuración adicional para usar GitHub y Microsoft Entra ID para la autenticación.

En este artículo, obtendrá información sobre el comportamiento predeterminado, cómo configurar tanto el inicio como el cierre de sesión, cómo bloquear un proveedor de autenticación, etc.

Puede registrar un proveedor personalizado que deshabilite todos los proveedores preconfigurados.

Advertencia

Debido a los cambios en la directiva de API de X (anteriormente Twitter), el soporte técnico no está disponible como parte de los proveedores preconfigurados para la aplicación. Si quiere seguir usando X (anteriormente Twitter) para la autenticación o autorización con la aplicación, actualice la configuración de la aplicación para registrar un proveedor personalizado.

Requisitos previos

Debe conocer los siguientes valores predeterminados y recursos para la autenticación y autorización con Azure Static Web Apps.

Valores predeterminados:

  • Cualquier usuario puede autenticarse con un proveedor preconfigurado
    • GitHub
    • Microsoft Entra ID
    • Para restringir un proveedor de autenticación, bloquee el acceso con una regla de ruta personalizada.
  • Tras el inicio de sesión, los usuarios pertenecen a los roles anonymous y authenticated. Para más información sobre los roles, consulte Administración de roles

Recursos:

Configuración del inicio de sesión

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, cree reglas de enrutamiento para direcciones URL descriptivas.

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

Proveedor de autorización Ruta de inicio de sesión
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Por ejemplo, para iniciar sesión con GitHub, podría usar una dirección URL similar al ejemplo siguiente.

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

Si decide admitir más de un proveedor, use un vínculo específico del proveedor para cada proveedor de su sitio web. Use una regla de ruta para asignar un proveedor predeterminado a una ruta descriptiva, como /login.

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

Configuración del redireccionamiento posterior al inicio de sesión

Puede devolver un usuario a una página específica después de iniciar sesión proporcionando una dirección URL completa en el parámetro de cadena de consulta post_login_redirect_uri.

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

You can also redirect unauthenticated users back to the referring page after they sign in. To add this redirect, create a response override rule that sets post_login_redirect_uri to .referrer, like in the following example.

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

Configuración del cierre de sesión

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, como se muestra en el ejemplo siguiente.

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

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

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

Configuración del redireccionamiento posterior al cierre de sesión

Para devolver a cualquier usuario a una página concreta después de que haya cerrado sesión, especifique una dirección URL en el parámetro de la cadena de consulta post_logout_redirect_uri.

Bloqueo de un proveedor de autenticación

De forma predeterminada, todos los proveedores de autenticación están habilitados, pero es posible que quiera restringir que la aplicación use un proveedor. Por ejemplo, es posible que la aplicación quiera usar solo proveedores de que expongan direcciones de correo electrónico.

Para bloquear un proveedor, cree una regla de ruta para devolver un código de estado de 404 para las solicitudes a la ruta específica del proveedor bloqueado. Por ejemplo, para restringir X (anteriormente Twitter) como proveedor, agregue la siguiente regla de ruta.

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

Eliminación de datos personales

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

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 datos personales 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 siguiente dirección URL:

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

To prevent the platform from providing this information on future requests to individual apps, submit a request using the following URL:

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

If you're using Microsoft Entra ID, use aad as the value for the <AUTHENTICATION_PROVIDER_NAME> placeholder.

Tip

For information about general restrictions and limitations, see Quotas.

Paso siguiente

Uso de rutas para establecer roles permitidos para controlar el acceso a páginas