Megosztás a következőn keresztül:

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

  • Cikk

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.

Ez a cikk bemutatja, hogyan olvashat felhasználói adatokat egy üzembe helyezett alkalmazásból. Ha a helyi fejlesztés során emulált felhasználói adatokat szeretne olvasni, olvassa el az Engedélyezés és hitelesítés emuláció című témakört.

Ü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:

Tulajdonság 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": "abcd12345abcd012345abcdef0123450",
  "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.

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ésesbö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());

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.

Feljegyzés

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

1 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