Uzyskiwanie dostępu do informacji o użytkowniku w usłudze Azure Static Web Apps

Usługa Azure Static Web Apps udostępnia informacje o użytkownikach związanych z uwierzytelnianiem za pośrednictwem punktu końcowego bezpośredniego dostępu i funkcji API.

Wiele interfejsów użytkownika w dużym stopniu opiera się na danych uwierzytelniania użytkownika. Punkt końcowy bezpośredniego dostępu to interfejs API narzędzia, który uwidacznia informacje o użytkowniku bez konieczności implementowania funkcji niestandardowej. Oprócz wygody, punkt końcowy dostępu bezpośredniego nie podlega opóźnieniom zimnego startu, które są związane z architekturą bezserwerową.

W tym artykule pokazano, jak odczytywać informacje o użytkowniku z wdrożonej aplikacji. Jeśli chcesz odczytać emulowane informacje o użytkowniku podczas programowania lokalnego, zobacz Emulacja autoryzacji i uwierzytelniania.

Dane główne klienta

Obiekt danych głównego klienta udostępnia informacje umożliwiające identyfikację użytkownika aplikacji. Następujące właściwości występują w podstawowym obiekcie klienta:

Właściwości	opis
identityProvider	Nazwa dostawcy tożsamości.
userId	Unikatowy identyfikator specyficzny dla usługi Azure Static Web Apps dla użytkownika. Wartość jest unikatowa dla poszczególnych aplikacji. Na przykład ten sam użytkownik zwraca inną userId wartość dla innego zasobu usługi Static Web Apps. Wartość jest zachowywana przez okres istnienia użytkownika. Jeśli usuniesz i dodasz tego samego użytkownika z powrotem do aplikacji, zostanie wygenerowany nowy userId .
userDetails	Nazwa użytkownika lub adres e-mail użytkownika. Niektórzy dostawcy zwracają adres e-mail użytkownika, a inni wysyłają identyfikator użytkownika.
userRoles	Tablica przypisanych ról użytkownika.
claims	Tablica żądań zwróconych przez twojego niestandardowego dostawcę uwierzytelniania. Dostępny tylko w punkcie końcowym dostępu bezpośredniego.

Poniższy przykład to wzorcowy obiekt klienta głównego:

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

Punkt końcowy dostępu bezpośredniego

Możesz wysłać GET żądanie do /.auth/me punktu końcowego i otrzymać bezpośredni dostęp do danych głównego obiektu klienta. Gdy stan widoku opiera się na danych autoryzacji, użyj tego podejścia, aby uzyskać najlepszą wydajność.

W przypadku zalogowanych użytkowników odpowiedź zawiera obiekt JSON podmiotu klienta. Żądania nieuwierzytelnionych użytkowników zwracają wartość null.

Korzystając z API fetch¹, możesz uzyskać dostęp do danych głównego obiektu klienta za pomocą następującej składni.

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

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

Funkcje interfejsu API

Funkcje interfejsu API dostępne w Static Web Apps za pośrednictwem zaplecza usługi Azure Functions mają dostęp do tych samych informacji o użytkowniku co aplikacja kliencka, z wyjątkiem claims tablicy. Interfejs API odbiera informacje umożliwiające identyfikację użytkownika, ale nie wykonuje własnych testów, czy użytkownik jest uwierzytelniony lub czy jest zgodny z wymaganą rolą. Reguły kontroli dostępu są definiowane w pliku staticwebapp.config.json.

JavaScript

Główne dane klienta są przekazywane do funkcji API w nagłówku x-ms-client-principal żądania. Dane principal klienta są wysyłane jako ciąg zakodowany w formacie Base64, zawierający zserializowany obiekt JSON.

Poniższa przykładowa funkcja pokazuje, jak odczytywać i zwracać informacje o użytkowniku.

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

Przy założeniu, że powyższa funkcja nosi nazwę user, możesz użyć interfejsu API przeglądarki o nazwie fetch¹, aby uzyskać dostęp do odpowiedzi interfejsu API przy użyciu następującej składni.

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

console.log(await getUser());

C#

W funkcji C# informacje o użytkowniku są dostępne z nagłówka x-ms-client-principal, który aplikacja może deserializować do obiektu ClaimsPrincipal albo do własnego, zdefiniowanego przez użytkownika, typu. Poniższy kod pokazuje, jak rozpakować nagłówek do typu pośredniego ClientPrincipal, który następnie jest zamieniany na wystąpienie ClaimsPrincipal.

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

Kiedy użytkownik jest zalogowany, do żądań o informacje o użytkowniku za pośrednictwem węzłów brzegowych usługi Static Web Apps dodaje się nagłówek x-ms-client-principal.

Uwaga

Nagłówek x-ms-client-principal dostępny w funkcji API nie zawiera tablicy claims.

¹ API fetch i operator await nie są obsługiwane w programie Internet Explorer.

Następne kroki

Konfigurowanie ustawień aplikacji