Komma åt användarinformation i Azure Static Web Apps

Azure Static Web Apps tillhandahåller autentiseringsrelaterad användarinformation via en direktåtkomstslutpunkt och till API-funktioner.

Många användargränssnitt är starkt beroende av användarautentiseringsdata. Direktåtkomstslutpunkten är ett verktygs-API som exponerar användarinformation utan att behöva implementera en anpassad funktion. Förutom bekvämligheten är slutpunkten för direktåtkomst inte föremål för fördröjningar av kallstart som är associerade med serverlös arkitektur.

Klienthuvudnamnsdata

Klientens huvuddataobjekt exponerar användaridentifierbar information för din app. Följande egenskaper finns i klientens huvudobjekt:

Property	beskrivning
identityProvider	Namnet på identitetsprovidern.
userId	En Azure Static Web Apps-specifik unik identifierare för användaren. Värdet är unikt per app. Till exempel returnerar samma användare ett annat userId värde på en annan Static Web Apps-resurs. Värdet bevaras under en användares livslängd. Om du tar bort och lägger till samma användare i appen genereras en ny userId .
userDetails	Användarens användarnamn eller e-postadress. Vissa leverantörer returnerar användarens e-postadress, medan andra skickar användarhandtaget.
userRoles	En matris med användarens tilldelade roller.
claims	En matris med anspråk som returneras av din anpassade autentiseringsprovider. Endast tillgänglig i slutpunkten för direktåtkomst.

Följande exempel är ett huvudobjekt för exempelklienten:

{
  "identityProvider": "github",
  "userId": "abcd12345abcd012345abcdef0123450",
  "userDetails": "username",
  "userRoles": ["anonymous", "authenticated"],
  "claims": [{
    "typ": "name",
    "val": "Azure Static Web Apps"
  }]
}

Slutpunkt för direktåtkomst

Du kan skicka en GET begäran till /.auth/me vägen och få direkt åtkomst till klientens huvudnamnsdata. När vyns tillstånd förlitar sig på auktoriseringsdata använder du den här metoden för bästa prestanda.

För inloggade användare innehåller svaret ett JSON-objekt för klientens huvudnamn. Begäranden från oautentiserade användare returnerar null.

Med api:et fetch¹ kan du komma åt klientens huvuddata med hjälp av följande syntax.

async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

(async () => {
console.log(await getUserInfo());
})();

API-funktioner

API-funktionerna som är tillgängliga i Static Web Apps via Azure Functions-serverdelen har åtkomst till samma användarinformation som ett klientprogram, med undantag för matrisen claims . Även om API:et tar emot användar identifierbar information utför det inte egna kontroller om användaren autentiseras eller om de matchar en obligatorisk roll. Åtkomstkontrollregler definieras i staticwebapp.config.json filen.

JavaScript

Klientens huvuddata skickas till API-funktioner i begärandehuvudet x-ms-client-principal . Klientens huvuddata skickas som en Base64-kodad sträng som innehåller ett serialiserat JSON-objekt.

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

module.exports = async function (context, req) {
  const header = req.headers.get('x-ms-client-principal');
  const encoded = Buffer.from(header, 'base64');
  const decoded = encoded.toString('ascii');

  context.res = {
    body: {
      clientPrincipal: JSON.parse(decoded),
    },
  };
};

Förutsatt att funktionen ovan heter userkan du använda webbläsar-API:et fetch¹ för att komma åt API:ets svar med hjälp av följande syntax.

async function getUser() {
  const response = await fetch('/api/user');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

console.log(await getUser());

C#

I en C#-funktion är användarinformationen tillgänglig från rubriken x-ms-client-principal som appen kan deserialisera till ett ClaimsPrincipal objekt eller din egen anpassade typ. Följande kod visar hur du packar upp huvudet till en mellanhandstyp, , ClientPrincipalsom sedan omvandlas till en ClaimsPrincipal instans.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Text;
using System.Text.Json;
using Microsoft.AspNetCore.Http;

public static class StaticWebAppsAuth
{
  private class ClientPrincipal
  {
      public string IdentityProvider { get; set; }
      public string UserId { get; set; }
      public string UserDetails { get; set; }
      public IEnumerable<string> UserRoles { get; set; }
  }

  public static ClaimsPrincipal Parse(HttpRequest req)
  {
      var principal = new ClientPrincipal();

      if (req.Headers.TryGetValue("x-ms-client-principal", out var header))
      {
          var data = header[0];
          var decoded = Convert.FromBase64String(data);
          var json = Encoding.UTF8.GetString(decoded);
          principal = JsonSerializer.Deserialize<ClientPrincipal>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
      }

      principal.UserRoles = principal.UserRoles?.Except(new string[] { "anonymous" }, StringComparer.CurrentCultureIgnoreCase);

      if (!principal.UserRoles?.Any() ?? true)
      {
          return new ClaimsPrincipal();
      }

      var identity = new ClaimsIdentity(principal.IdentityProvider);
      identity.AddClaim(new Claim(ClaimTypes.NameIdentifier, principal.UserId));
      identity.AddClaim(new Claim(ClaimTypes.Name, principal.UserDetails));
      identity.AddClaims(principal.UserRoles.Select(r => new Claim(ClaimTypes.Role, r)));

      return new ClaimsPrincipal(identity);
  }
}

När en användare är inloggad läggs huvudet till i x-ms-client-principal begäranden om användarinformation via gränsnoderna för Static Web Apps.

Kommentar

Huvudet x-ms-client-principal som är tillgängligt i API-funktionen innehåller inte matrisen claims .

¹ Hämtnings-API:et och inväntningsoperatorn stöds inte i Internet Explorer.

Nästa steg

Konfigurera appinställningar