Édition

Partage via

Authentification et autorisation de Static Web Apps

  • Procédures

Azure Static Web Apps fournit une expérience d’authentification simplifiée, dans laquelle aucune autre action ou configuration n’est nécessaire pour utiliser GitHub et Microsoft Entra ID à des fins d’authentification.

Découvrez dans cet article le comportement par défaut, comment configurer la connexion et la déconnexion, comment bloquer un fournisseur d’authentification, etc.

Vous pouvez inscrire un fournisseur personnalisé, ce qui a pour effet de désactiver tous les fournisseurs préconfigurés.

Avertissement

En raison des changements apportés à la stratégie d’API de X (anciennement Twitter), la prise en charge n’est plus disponible dans le cadre des fournisseurs préconfigurés pour votre application. Si vous souhaitez continuer à utiliser X (anciennement Twitter) à des fins d’authentification/autorisation pour votre application, mettez à jour la configuration de votre application afin d’inscrire un fournisseur personnalisé.

Prérequis

Tenez compte des configurations par défaut et des ressources suivantes pour l’authentification et l’autorisation avec Azure Static Web Apps.

Configurations par défaut :

  • Tout utilisateur peut s’authentifier auprès d’un fournisseur préconfiguré
    • GitHub
    • Microsoft Entra ID
    • Pour restreindre un fournisseur d’authentification, bloquez l’accès avec une règle d’acheminement personnalisée.
  • Après la connexion, les utilisateurs sont dotés des rôles anonymous et authenticated. Pour plus d’informations sur les rôles, consultez Gestion des rôles.

Ressources :

Configurer la connexion

Azure Static Web Apps utilise le dossier système /.auth pour fournir l’accès aux API associées aux autorisations. Au lieu d’exposer directement les itinéraires situés dans le dossier /.auth aux utilisateurs finaux, créez des règles d’acheminement donnant des URL conviviales.

Appuyez-vous sur le tableau suivant pour rechercher l’itinéraire de connexion propre au fournisseur.

Fournisseur d’autorisation Itinéraire de connexion
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Par exemple, pour vous connecter avec GitHub, vous pouvez utiliser une URL similaire à l’exemple suivant.

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

Si vous choisissez de prendre en charge plusieurs fournisseurs, utilisez un lien spécifique au fournisseur pour chaque fournisseur sur votre site web. Utilisez une règle d’acheminement pour mettre en correspondance un fournisseur par défaut avec un itinéraire convivial comme /login.

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

Configuration de la redirection après la connexion

Vous pouvez renvoyez un utilisateur sur une page spécifique après connexion en indiquant une URL complète dans le paramètre de chaîne de requête 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
    }
  }
}

Configurer la déconnexion

L’itinéraire /.auth/logout déconnecte les utilisateurs du site web. Vous pouvez ajouter un lien vers la navigation de votre site pour permettre à l’utilisateur de se déconnecter (cf. exemple suivant).

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

Utilisez une règle d’acheminement pour faire correspondre un itinéraire convivial comme /logout.

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

Configuration de la redirection après la déconnexion

Pour renvoyer un utilisateur sur une page spécifique après déconnexion, indiquez une URL dans le paramètre de chaîne de requête post_logout_redirect_uri.

Bloquer un fournisseur d’authentification

Par défaut, tous les fournisseurs d’authentification sont activés, mais vous souhaiterez peut-être restreindre votre application à l’aide d’un fournisseur. Par exemple, votre application peut choisir de n’utiliser que les fournisseurs qui exposent des adresses e-mail.

Pour bloquer un fournisseur, vous pouvez créer une règle d’acheminement pour retourner un code d’état 404 pour les demandes d’itinéraire bloqué spécifique au fournisseur. Par exemple, pour restreindre X (anciennement Twitter) en tant que fournisseur, ajoutez la règle d’acheminement suivante.

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

Supprimer des données personnelles

Lorsque vous accordez votre consentement à une application en tant qu’utilisateur final, l’application a accès à votre adresse e-mail ou à votre nom d’utilisateur, selon le fournisseur d’identité utilisé. Une fois ces informations fournies, c’est le propriétaire de l’application qui décide comment traiter les données personnelles.

Les utilisateurs finaux doivent contacter l’administrateur de chaque application web pour révoquer ces informations dans leurs systèmes.

Pour supprimer les données personnelles de la plateforme Azure Static Web Apps et l’empêcher de fournir ces informations lors de demandes ultérieures, envoyez une demande à l’aide de l’URL suivante :

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.

Étape suivante

Définition de rôles autorisés pour contrôler l’accès aux pages à l’aide d’itinéraires