Aracılığıyla paylaş


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.

Getirme1 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.

İ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 fetch1 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());

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.

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

Sonraki adımlar