Felhasználói adatok elérése az Azure Static Web Appsben

Az Azure Static Web Apps egy közvetlen hozzáférésű végponton és API-függvényen keresztül nyújt hitelesítéssel kapcsolatos felhasználói adatokat.

Sok felhasználói felület nagymértékben támaszkodik a felhasználói hitelesítési adatokra. A közvetlen hozzáférésű végpont egy olyan segédprogram API, amely felhasználói adatokat tesz elérhetővé anélkül, hogy egyéni függvényt kellene implementálnia. A közvetlen hozzáférésű végpontot a kényelemen túl nem érintik a kiszolgáló nélküli architektúrához társított hidegindítási késések.

Ügyfélnév adatai

Az egyszerű ügyféladat-objektum felhasználóazonosításra alkalmas adatokat tesz elérhetővé az alkalmazás számára. Az ügyfél egyszerű objektumában a következő tulajdonságok jelennek meg:

Property	Leírás
identityProvider	Az identitásszolgáltató neve.
userId	A felhasználó Azure Static Web Apps-specifikus egyedi azonosítója. Az érték alkalmazásonként egyedi. Például ugyanaz a felhasználó egy másik userId értéket ad vissza egy másik Static Web Apps-erőforráson. Az érték egy felhasználó teljes élettartama alatt megmarad. Ha törli és hozzáadja ugyanazt a felhasználót az alkalmazáshoz, létrejön egy új userId .
userDetails	A felhasználó felhasználóneve vagy e-mail-címe. Egyes szolgáltatók a felhasználó e-mail-címét, míg mások a felhasználói leírót küldik.
userRoles	A felhasználó hozzárendelt szerepköreinek tömbje.
claims	Az egyéni hitelesítésszolgáltató által visszaadott jogcímek tömbje. Csak a közvetlen hozzáférésű végponton érhető el.

A következő példa egy egyszerű ügyfél-mintaobjektum:

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

Közvetlen hozzáférésű végpont

Elküldhet egy kérést GET az /.auth/me útvonalra, és közvetlen hozzáférést kaphat az ügyfélnév adataihoz. Ha a nézet állapota engedélyezési adatokra támaszkodik, használja ezt a módszert a legjobb teljesítmény érdekében.

A bejelentkezett felhasználók esetében a válasz egy egyszerű JSON-objektumot tartalmaz. A nem hitelesített felhasználóktól érkező kérések adnak nullvissza.

Az 1^{. beolvasási} API használatával az ügyfélnév adatait az alábbi szintaxissal érheti el.

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-függvények

A Static Web Appsben az Azure Functions háttérrendszerén keresztül elérhető API-függvények a tömb kivételével claims ugyanazokhoz a felhasználói adatokhoz férhetnek hozzá, mint az ügyfélalkalmazások. Bár az API felhasználóazonosításra alkalmas adatokat kap, nem végzi el a saját ellenőrzését, ha a felhasználó hitelesítése megtörtént, vagy megfelel-e a szükséges szerepkörnek. A hozzáférés-vezérlési szabályok a staticwebapp.config.json fájlban vannak definiálva.

JavaScript

Az ügyfélnév adatai a kérelem fejlécében található x-ms-client-principal API-függvények számára lesznek átadva. Az ügyfélnév adatai base64 kódolású sztringként lesznek elküldve, amely szerializált JSON-objektumot tartalmaz.

Az alábbi példafüggvény bemutatja, hogyan olvashatja el és adja vissza a felhasználói adatokat.

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

Feltételezve, hogy a fenti függvény neve el van nevezveuser, az 1^{. lekéréses}böngésző API-val elérheti az API válaszát az alábbi szintaxissal.

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

console.log(await getUser());

C#

A C#-függvényekben a felhasználói adatok a x-ms-client-principal fejlécből érhetők el, amelyek objektummá vagy saját egyéni típusba ClaimsPrincipal deszerializálhatók. Az alábbi kód bemutatja, hogyan csomagolhatja ki a fejlécet egy köztes típusba, ClientPrincipalamely aztán példánysá ClaimsPrincipal alakul.

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

Amikor egy felhasználó be van jelentkezve, a rendszer hozzáadja a x-ms-client-principal fejlécet a felhasználói adatokra vonatkozó kérésekhez a Static Web Apps peremcsomópontjaiban.

Megjegyzés:

Az x-ms-client-principal API-függvényben elérhető fejléc nem tartalmazza a tömböt claims .

¹ A fetch API és a await operátor nem támogatott az Internet Explorerben.

Következő lépések

Alkalmazásbeállítások konfigurálása