Aracılığıyla paylaş

Azure Static Web Apps'te statik sitenize kimlik doğrulaması ekleme

  • Makale

Bu makale, ilk sitenizi Azure Static Web Apps'e nasıl dağıtabileceğinizi gösteren serinin ikinci bölümüdür. Daha önce, seçtiğiniz web çerçevesiyle statik bir site oluşturup dağıtmıştınız.

Bu makalede, sitenize kimlik doğrulaması ekleyecek ve buluta dağıtmadan önce siteyi yerel olarak çalıştıracaksınız.

Önkoşullar

Bu öğretici önceki öğreticiden devam eder ve aynı önkoşullara sahiptir.

Kimlik doğrulaması ve yetkilendirme

Azure Static Web Apps, güvenlikle ilgili kod yazmadan Microsoft Entra ve Google gibi yaygın kimlik doğrulama sağlayıcılarını kullanmayı kolaylaştırır.

Not

İsteğe bağlı olarak , arka uç API'lerini kullanırken daha ayrıntılı denetim için özel bir sağlayıcı kaydedebilir ve özel roller atayabilirsiniz.

Bu makalede, sitenizi kimlik doğrulaması için Microsoft Entra Id kullanacak şekilde yapılandıracaksınız.

Kimlik doğrulaması ekleme

Son makalede bir staticwebapp.config.json dosya oluşturdunuz. Bu dosya , Azure Static Web Apps için kimlik doğrulaması dahil olmak üzere birçok özelliği denetler.

  1. öğesini staticwebapp.config.json aşağıdaki yapılandırmayla eşleşecek şekilde güncelleştirin.

    {
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

    bölümü, routes adlandırılmış rollere erişimi kısıtlamanıza olanak tanır. Önceden tanımlanmış iki rol vardır: authenticated ve anonymous. Bağlı kullanıcının izin verilen bir rolü yoksa, sunucu bir "401 Yetkisiz" yanıtı döndürür.

    bölümündeki değerler responseOverrides sitenizi yapılandırarak kimliği doğrulanmamış bir kullanıcının sunucu hatası görmesi yerine tarayıcılarının oturum açma sayfasına yönlendirilmesini sağlar.

  2. Siteyi yerel olarak çalıştırın.

    Siteyi yerel olarak başlatmak için Static Web Apps CLI start komutunu çalıştırın.

    npx swa start

    Bu komut üzerinde http://localhost:4280Azure Static Web Apps öykünücüsunu başlatır.

    Bu URL, hizmet başlatıldıktan sonra terminal pencerenizde gösterilir.

  3. Siteye gitmek için URL'yi seçin.

    Siteyi tarayıcınızda açtıktan sonra yerel kimlik doğrulaması oturum açma sayfası görüntülenir.

    Yerel kimlik doğrulaması oturum açma sayfasının ekran görüntüsü.

    Yerel kimlik doğrulaması oturum açma sayfası, dış hizmetlere gerek kalmadan gerçek kimlik doğrulama deneyiminin öykünmesini sağlar. Bu ekrandan bir kullanıcı kimliği oluşturabilir ve kullanıcıya hangi rolleri uygulamak istediğinizi seçebilirsiniz.

  4. Bir kullanıcı adı girin ve Oturum Aç'ı seçin.

    Kimlik doğrulaması yaptıktan sonra siteniz görüntülenir.

Siteyi Azure'a dağıtma

Sitenizi son öğreticide yaptığınız gibi dağıtın.

  1. Sitenizi oluşturun:

    npx swa build

  2. Sitenizi statik web uygulamasına dağıtın:

    npx swa deploy --app-name swa-demo-site

    Dağıtım tamamlandıktan sonra sitenizin URL'si görüntülenir. Siteyi tarayıcıda açmak için site URL'sini seçin. Standart Microsoft Entra Id oturum açma sayfası görüntülenir:

    Microsoft kimlik doğrulaması oturum açma sayfasının ekran görüntüsü.

    Microsoft hesabınızla oturum açın.

Kaynakları temizleme (isteğe bağlı)

Diğer öğreticilere devam ediyorsanız Azure kaynak grubunu ve kaynaklarını kaldırın:

az group delete -n swa-tutorial

Bir kaynak grubunu kaldırdığınızda, içerdiği tüm kaynakları silersiniz. Bu eylemi geri alamazsınız.

İlgili içerik