Gérer l’authentification dans Static Web Apps
Votre application web de liste de courses a besoin d’un moyen d’identifier ses utilisateurs de manière unique et de leur fournir un espace personnel pour stocker les produits.
L’authentification est la façon dont vous allez vérifier l’identité d’un utilisateur qui tente d’accéder à un système d’information. Nous allons maintenant examiner l’authentification et la façon dont vous pouvez l’implémenter dans Azure Static Web Apps.
Fournisseurs d’identité
Azure Static Web Apps simplifie l’expérience d’authentification en gérant l’authentification auprès des fournisseurs suivants :
- Microsoft Entra ID
- GitHub
- X
Tous les fournisseurs d’authentification sont activés par défaut. Nous verrons plus tard comment vous pouvez restreindre un fournisseur d’authentification à l’aide d’une règle d’itinéraire personnalisée.
Dossier système
Le dossier système /.auth permet d’accéder à toutes les API liées à l’authentification. Vous pouvez utiliser ces points de terminaison pour implémenter un workflow d’authentification complet dans votre application, y compris pour la connexion et l’extraction et l’accès aux informations de l’utilisateur.
Connexion
Le tableau suivant répertorie l’itinéraire de connexion spécifique au fournisseur que vous pouvez utiliser dans votre application.
| Fournisseur d’identité | Itinéraire de connexion |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
Par exemple, pour vous connecter avec GitHub, vous pouvez inclure un lien de connexion dans votre application web avec l’extrait de code suivant :
<a href="/.auth/login/github">Login</a>
Si vous voulez qu’un utilisateur retourne à une page spécifique après la connexion, vous pouvez aussi fournir une URL dans le paramètre de chaîne de requête post_login_redirect_uri. Par exemple :
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Logout
La route /.auth/logout déconnecte les utilisateurs de l’application web. Vous pouvez ajouter un lien vers votre navigation de site pour permettre à l’utilisateur de se déconnecter comme illustré dans l’exemple suivant.
<a href="/.auth/logout">Log out</a>
Comme avec la connexion, vous pouvez fournir une URL vers laquelle rediriger après la déconnexion à l’aide du paramètre de chaîne de requête post_logout_redirect_uri :
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Accéder aux informations utilisateur
Vous pouvez accéder aux informations utilisateur relatives à l’authentification via un point de terminaison d’accès direct ou un en-tête spécial dans les fonctions API.
Si vous envoyez une requête GET à l'itinéraire /.auth/me, vous recevrez un objet JSON avec les données de l’utilisateur actuellement connecté. Les demandes provenant d’utilisateurs non authentifiés renvoient null.
Voici un exemple d’objet de réponse.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
Fonctions de l’API
Les fonctions d’API disponibles dans Azure Static Web Apps ont accès aux mêmes informations utilisateur que votre application cliente. Les données utilisateur sont passées aux fonctions dans l'en-tête x-ms-client-principal. Les données sont sérialisées en tant qu’objet JSON et encodées en Base64.
L’exemple de fonction suivant montre comment lire et retourner des informations utilisateur.
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
Étapes suivantes
Ensuite, nous allons implémenter un workflow d’authentification complet dans notre application.