Hantera autentisering i Static Web Apps

  • 2 minuter

Webbappen för din inköpslista behöver ett sätt att unikt identifiera sina användare och ge dem ett personligt utrymme för att lagra produkterna.

Autentisering är det sätt som du verifierar identiteten för en användare som försöker komma åt ett informationssystem. Nu ska vi titta på autentisering och hur du kan implementera den i Azure Static Web Apps.

Identitetsprovidrar

Azure Static Web Apps effektiviserar autentiseringsupplevelsen genom att hantera autentisering med följande leverantörer:

  • Microsoft Entra ID
  • GitHub
  • X

Alla autentiseringsprovidrar är aktiverade som standard. Vi ser senare hur du kan begränsa en autentiseringsprovider med en anpassad routningsregel.

Systemmapp

Systemmappen /.auth ger åtkomst till alla autentiseringsrelaterade API:er. Du kan använda dessa slutpunkter för att implementera ett fullständigt autentiseringsarbetsflöde i din app, inklusive att logga in och ut och komma åt användarinformation.

Inloggning

I följande tabell visas den providerspecifika inloggningsväg som du kan använda i din app.

Identitetsprovider Inloggningsväg
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github
X /.auth/login/x

Om du till exempel vill logga in med GitHub kan du inkludera en inloggningslänk i webbappen med följande kodfragment:

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

Om du vill att en användare ska återgå till en specifik sida efter inloggningen kan du även ange en URL i post_login_redirect_uri frågesträngsparametern. Till exempel:

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

Utloggning

Vägen /.auth/logout loggar ut användare från webbappen. Du kan lägga till en länk i webbplatsnavigering så att användaren kan logga ut enligt följande exempel.

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

Precis som med inloggning kan du ange en URL att omdirigera till när du har loggat ut med frågesträngsparametern post_logout_redirect_uri :

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

Komma åt användarinformation

Du kan komma åt autentiseringsrelaterad användarinformation antingen via en direktåtkomstslutpunkt eller ett särskilt huvud i API-funktioner.

Om du skickar en GET begäran till /.auth/me vägen får du ett JSON-objekt med data för den inloggade användaren. Begäranden från oautentiserade användare returnerar null.

Följande exempel är ett exempel på ett svarsobjekt.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

API-funktioner

Alla API-funktioner som är tillgängliga i Azure Static Web Apps har åtkomst till samma användarinformation som klientprogrammet. Användardata skickas till funktioner i x-ms-client-principal HTTP-huvudet. Data serialiseras som ett JSON-objekt och kodas i Base64.

Följande exempelfunktion visar hur du läser och returnerar användarinformation.

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)
    }
  };
};

Nästa steg

Sedan implementerar vi ett fullständigt autentiseringsarbetsflöde i vår app.