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 interfejsu 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. Poza wygodą punkt końcowy dostępu bezpośredniego nie podlega opóźnieniom uruchamiania zimnego, które są skojarzone z architekturą bezserwerową.

Dane podmiotu zabezpieczeń klienta

Obiekt danych podmiotu zabezpieczeń klienta uwidacznia informacje umożliwiające identyfikację użytkownika w aplikacji. Następujące właściwości są opisywane w obiekcie podmiotu zabezpieczeń 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ą dojście użytkownika.
userRoles	Tablica przypisanych ról użytkownika.
claims	Tablica oświadczeń zwróconych przez niestandardowego dostawcę uwierzytelniania. Dostępny tylko w punkcie końcowym dostępu bezpośredniego.

Poniższy przykład to przykładowy obiekt podmiotu zabezpieczeń klienta:

{
  "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 trasy i otrzymać bezpośredni dostęp do danych podmiotu zabezpieczeń 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 zabezpieczeń klienta. Żądania nieuwierzytelnionych użytkowników zwracają wartość null.

Korzystając z interfejsu API pobierania ¹, możesz uzyskać dostęp do danych podmiotu zabezpieczeń klienta przy użyciu 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 usłudze 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 staticwebapp.config.json w pliku.

JavaScript

Dane podmiotu zabezpieczeń klienta są przekazywane do funkcji interfejsu API w nagłówku x-ms-client-principal żądania. Dane podmiotu zabezpieczeń klienta są wysyłane jako ciąg zakodowany w formacie Base64 zawierający serializowany 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 pobierania¹ , 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 języka C# informacje o użytkowniku są dostępne w nagłówku x-ms-client-principal , który aplikacja może deserializować do obiektu lub własnego typu niestandardowego ClaimsPrincipal . Poniższy kod pokazuje, jak rozpakować nagłówek do typu pośredniego , ClientPrincipalktóry następnie jest zamieniany w ClaimsPrincipal wystąpienie.

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

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

Uwaga

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

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

Następne kroki

Konfigurowanie ustawień aplikacji