Přístup k informacím o uživatelích ve službě Azure Static Web Apps

Azure Static Web Apps poskytuje informace o uživateli související s ověřováním prostřednictvím koncového bodu přímého přístupu a funkcí rozhraní API.

Mnoho uživatelských rozhraní se hodně spoléhá na ověřovací data uživatelů. Koncový bod přímého přístupu je rozhraní API nástroje, které zveřejňuje informace o uživatelích bez nutnosti implementovat vlastní funkci. Kromě pohodlí koncový bod přímého přístupu podléhá zpožděním studených startů, která jsou přidružená k bezserverové architektuře.

Data objektu zabezpečení klienta

Objekt dat instančního objektu klienta zveřejňuje pro vaši aplikaci identifikovatelné informace uživatele. V objektu instančního objektu klienta jsou uvedené následující vlastnosti:

Vlastnost	Popis
identityProvider	Název zprostředkovatele identity.
userId	Jedinečný identifikátor specifický pro Azure Static Web Apps pro uživatele. Hodnota je jedinečná pro jednotlivé aplikace. Stejný uživatel například vrátí jinou userId hodnotu u jiného prostředku Static Web Apps. Hodnota se zachová po celou dobu života uživatele. Pokud odstraníte a přidáte stejného uživatele zpět do aplikace, vygeneruje se nový userId .
userDetails	Uživatelské jméno nebo e-mailová adresa uživatele Někteří poskytovatelé vrátí e-mailovou adresu uživatele, zatímco jiní odesílají popisovač uživatele.
userRoles	Pole přiřazenýchrolích
claims	Pole deklarací identity vrácené vaším vlastním zprostředkovatelem ověřování. Přístupná pouze v koncovém bodu přímého přístupu.

Následující příklad je ukázkový objekt instančního objektu klienta:

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

Koncový bod přímého přístupu

Můžete odeslat GET požadavek na trasu /.auth/me a přijímat přímý přístup k datům objektu zabezpečení klienta. Pokud stav zobrazení závisí na autorizačních datech, použijte tento přístup k zajištění nejlepšího výkonu.

Pro přihlášené uživatele obsahuje odpověď objekt JSON objektu ZABEZPEČENÍ klienta. Požadavky od neověřených uživatelů vrátí null.

Pomocí rozhraní API pro načtení¹ můžete přistupovat k datům objektu zabezpečení klienta pomocí následující syntaxe.

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

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

Funkce rozhraní API

Funkce rozhraní API dostupné ve Static Web Apps prostřednictvím back-endu Azure Functions mají přístup ke stejným informacím o uživateli jako klientská aplikace s výjimkou claims pole. I když rozhraní API přijímá identifikovatelné informace uživatele, neprovádí vlastní kontroly, pokud je uživatel ověřený nebo jestli odpovídá požadované roli. Pravidla řízení přístupu jsou definována staticwebapp.config.json v souboru.

JavaScript

Data objektu x-ms-client-principal zabezpečení klienta se předávají funkcím rozhraní API v hlavičce požadavku. Data objektu zabezpečení klienta se odesílají jako řetězec s kódováním Base64 obsahující serializovaný objekt JSON.

Následující ukázková funkce ukazuje, jak číst a vracet informace o uživateli.

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

Za předpokladu, že je výše uvedená funkce pojmenovaná user, můžete pomocí rozhraní API pro načtení¹ prohlížeče získat přístup k odpovědi rozhraní API pomocí následující syntaxe.

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

console.log(await getUser());

C#

Ve funkci jazyka C# jsou informace o uživateli k dispozici v x-ms-client-principal hlavičce, kterou může aplikace deserializovat do objektu ClaimsPrincipal nebo vlastního typu. Následující kód ukazuje, jak rozbalit hlavičku do zprostředkujícího typu , ClientPrincipalkterý se pak změní na ClaimsPrincipal instanci.

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

Když je uživatel přihlášený, x-ms-client-principal přidá se hlavička do požadavků na informace o uživateli prostřednictvím hraničních uzlů Static Web Apps.

Poznámka:

Hlavička x-ms-client-principal přístupná ve funkci rozhraní API neobsahuje claims pole.

¹ Operátor pro načtení a operátor await se v Internet Exploreru nepodporuje.

Další kroky

Konfigurace nastavení aplikace