Statik Web Apps'te kimlik doğrulamasını yönetme

2 dakika

Alışveriş listesi web uygulamanızın kullanıcılarını benzersiz bir şekilde tanımlamak ve ürünleri depolamak için onlara kişisel bir alan sağlamak için bir yönteme ihtiyacı vardır.

Kimlik doğrulaması, bilgi sistemine erişmeye çalışan bir kullanıcının kimliğini doğrulama yöntemidir. Şimdi kimlik doğrulamasını ve Bunu Azure Static Web Apps'te nasıl uygulayabileceğinizi inceleyeceğiz.

Kimlik sağlayıcıları

Azure Static Web Apps, kimlik doğrulamasını aşağıdaki sağlayıcılarla yöneterek kimlik doğrulama deneyimini kolaylaştırır:

Microsoft Entra Kimlik
GitHub
X

Tüm kimlik doğrulama sağlayıcıları varsayılan olarak etkindir. Daha sonra bir kimlik doğrulama sağlayıcısını özel yol kuralıyla nasıl kısıtlayabileceğinizi göreceğiz.

Sistem klasörü

/.auth Sistem klasörü, kimlik doğrulamasıyla ilgili tüm API'lere erişim sağlar. Oturum açma ve kapatma ve kullanıcı bilgilerine erişme dahil olmak üzere uygulamanızda tam kimlik doğrulama iş akışı uygulamak için bu uç noktaları kullanabilirsiniz.

Aşağıdaki tabloda, uygulamanızda kullanabileceğiniz sağlayıcıya özgü oturum açma yolu listelenir.

Kimlik sağlayıcısı	Oturum açma yolu
Microsoft Entra Kimlik	`/.auth/login/aad`
GitHub	`/.auth/login/github`
X	`/.auth/login/x`

Örneğin, GitHub ile oturum açmak için web uygulamanıza aşağıdaki kod parçacığını içeren bir oturum açma bağlantısı ekleyebilirsiniz:

<a href="/.auth/login/github">Login</a>

Bir kullanıcının oturum açmadan sonra belirli bir sayfaya dönmesini istiyorsanız, sorgu dizesi parametresinde post_login_redirect_uri bir URL de sağlayabilirsiniz. Örneğin:

<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>

Oturumu kapatma

Yol, /.auth/logout web uygulamasındaki kullanıcıları günlüğe kaydeder. Aşağıdaki örnekte gösterildiği gibi kullanıcının oturumu kapatmasına izin vermek için site gezintinize bir bağlantı ekleyebilirsiniz.

<a href="/.auth/logout">Log out</a>

Oturum açmada olduğu gibi, sorgu dizesi parametresini kullanarak post_logout_redirect_uri oturumu kapattırdıktan sonra yeniden yönlendirmek için bir URL sağlayabilirsiniz:

<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>

Kullanıcı bilgilerine erişme

Kimlik doğrulamasıyla ilgili kullanıcı bilgilerine doğrudan erişim uç noktası veya API işlevlerindeki özel bir üst bilgi aracılığıyla erişebilirsiniz.

Yola bir GET istek /.auth/me gönderirseniz, şu anda oturum açmış olan kullanıcının verilerini içeren bir JSON nesnesi alırsınız. Kimliği doğrulanmamış kullanıcılardan gelen istekler döndürür null.

Aşağıdaki örnek, örnek bir yanıt nesnesidir.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

API işlevleri

Azure Static Web Apps'te kullanılabilen tüm API işlevleri, istemci uygulamanızla aynı kullanıcı bilgilerine erişebilir. Kullanıcı verileri HTTP üst bilgisindeki işlevlere x-ms-client-principal geçirilir. Veriler bir JSON nesnesi olarak seri hale getirilir ve Base64'te kodlanır.

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["x-ms-client-principal"];
  const encoded = Buffer.from(header, "base64");
  const decoded = encoded.toString("ascii");

  context.res = {
    body: {
      userInfo: JSON.parse(decoded)
    }
  };
};

Sonraki adımlar

Ardından uygulamamızda eksiksiz bir kimlik doğrulama iş akışı uygulayacağız.

Bilginizi ölçün

Devam et