Editar

Autenticación y autorización de Static Web Apps

  • Instrucciones

Advertencia

Debido a los cambios en la directiva de API de X (anteriormente Twitter), no podemos seguir admitiéndola 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.

Azure Static Web Apps proporciona una experiencia de autenticación simplificada, donde no se requieren otras acciones ni configuraciones 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.

Requisitos previos

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

Valores predeterminados:

  • Todos los usuarios pueden 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 incluir algo similar al vínculo siguiente.

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

Si decide admitir más de un proveedor, exponga un vínculo específico del proveedor para cada uno en 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

Para devolver un usuario a una página concreta después de que este inicie sesión, especifique una dirección URL completa en el parámetro de cadena de consulta post_login_redirect_uri, como en el ejemplo siguiente.

<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 configure this behavior, 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

Es posible que quiera impedir que cualquier aplicación use un proveedor de autenticación, ya que todos ellos están habilitados. 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
}

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