Azure Static Web Apps'te kullanıcı bilgilerine erişme

Azure Static Web Apps, doğrudan erişim uç noktası ve API işlevleri aracılığıyla kimlik doğrulamasıyla ilgili kullanıcı bilgileri sağlar.

Birçok kullanıcı arabirimi, kullanıcı kimlik doğrulaması verilerine büyük ölçüde güvenir. Doğrudan erişim uç noktası, özel bir işlev uygulamak zorunda kalmadan kullanıcı bilgilerini kullanıma sunan bir yardımcı program API'dir. Kolaylık sağlamasının ötesinde, doğrudan erişim uç noktası sunucusuz mimariyle ilişkili soğuk başlatma gecikmelerine tabi değildir.

İstemci asıl verileri

İstemci asıl veri nesnesi, kullanıcı tarafından tanımlanabilen bilgileri uygulamanızda kullanıma sunar. İstemci asıl nesnesinde aşağıdaki özellikler bulunur:

Özellik	Açıklama
identityProvider	Kimlik sağlayıcısının adı.
userId	Kullanıcı için Azure Static Web Apps'e özgü benzersiz tanımlayıcı. Değer, uygulama bazında benzersizdir. Örneğin, aynı kullanıcı farklı userId bir Statik Web Uygulamaları kaynağında farklı bir değer döndürür. Değer, kullanıcının ömrü boyunca devam eder. Aynı kullanıcıyı silip uygulamaya yeniden eklerseniz yeni userId bir kullanıcı oluşturulur.
userDetails	Kullanıcının kullanıcı adı veya e-posta adresi. Bazı sağlayıcılar kullanıcının e-posta adresini döndürürken, diğerleri kullanıcı tanıtıcısını gönderir.
userRoles	Kullanıcının atanan rollerinden oluşan bir dizi.
claims	Özel kimlik doğrulama sağlayıcınız tarafından döndürülen talep dizisi. Yalnızca doğrudan erişim uç noktasından erişilebilir.

Aşağıdaki örnek, örnek bir istemci asıl nesnesidir:

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

Doğrudan erişim uç noktası

Yola istek GET /.auth/me gönderebilir ve istemci sorumlusu verilerine doğrudan erişim alabilirsiniz. Görünümünüzün durumu yetkilendirme verilerine dayandığında, en iyi performans için bu yaklaşımı kullanın.

Oturum açmış kullanıcılar için yanıt bir istemci sorumlusu JSON nesnesi içerir. Kimliği doğrulanmamış kullanıcılardan gelen istekler döndürür null.

Getirme¹ API'sini kullanarak aşağıdaki söz dizimini kullanarak istemci sorumlusu verilerine erişebilirsiniz.

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 işlevleri

Azure İşlevleri arka ucu aracılığıyla Statik Web Apps'te kullanılabilen API işlevleri, dizi dışında istemci uygulamasıyla aynı kullanıcı bilgilerine claims erişebilir. API, kullanıcı tarafından tanımlanabilir bilgiler alsa da, kullanıcının kimliğinin doğrulanmış olup olmadığını veya gerekli bir rolle eşleşip eşleşmediğini kendi denetimlerini gerçekleştirmez. Erişim denetimi kuralları dosyada staticwebapp.config.json tanımlanır.

JavaScript

İstemci asıl verileri, istek üst bilgisindeki API işlevlerine x-ms-client-principal geçirilir. İstemci asıl verileri, serileştirilmiş bir JSON nesnesi içeren Base64 kodlu bir dize olarak gönderilir.

Aşağıdaki örnek işlev, kullanıcı bilgilerinin nasıl okunup döndürüleceği gösterilmektedir.

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

Yukarıdaki işlevin adlı userolduğunu varsayarsak, aşağıdaki söz dizimini kullanarak API'nin yanıtına erişmek için fetch¹ tarayıcı API'sini kullanabilirsiniz.

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

console.log(await getUser());

C#

C# işlevinde kullanıcı bilgileri, uygulamanızın bir ClaimsPrincipal nesnenin x-ms-client-principal veya kendi özel türünüzün seri durumdan çıkarabileceği üst bilgiden kullanılabilir. Aşağıdaki kod, üst bilginin ara bir türe ClientPrincipalnasıl açıldığı ve daha sonra bir ClaimsPrincipal örneğe dönüştürülmesi gösterilmektedir.

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

Kullanıcı oturum açtığında üst bilgi, x-ms-client-principal Statik Web Apps uç düğümleri aracılığıyla kullanıcı bilgileri isteklerine eklenir.

Not

x-ms-client-principal API işlevinde erişilebilen üst bilgi diziyi claims içermez.

¹ Getirme API'si ve await işleci Internet Explorer'da desteklenmez.

Sonraki adımlar

Uygulama ayarlarını yapılandırma