Önceki

Sonraki

Alıştırma - Kimlik doğrulama sağlayıcılarını ve erişimi yapılandırma

Tamamlandı

Alışveriş listesi web uygulamanızın bazı yollara erişimin güvenliğini sağlaması ve belirli kimlik doğrulama sağlayıcılarını devre dışı bırakması gerekir. Bu alıştırmada, bu sonucu elde etmek için web uygulamanızın yönlendirme yapılandırmasını güncelleştireceksiniz.

Bu alıştırmada aşağıdaki adımları tamamlayacaksınız:

1. Bazı kimlik doğrulama sağlayıcılarını devre dışı bırakmak için yönlendirme yapılandırmasına kurallar ekleyin.
2. Yalnızca kimliği doğrulanmış kullanıcıların erişebilmesi için ürün listesinin güvenliğini sağlayın.
3. Güncelleştirilmiş uygulamayı dağıtın.
4. Kısıtlamaların geçerli olup olmadığını test edin.

Kimlik doğrulama sağlayıcılarını devre dışı bırakma

Microsoft Entra kimlik doğrulama sağlayıcısını devre dışı bırakmak için uygulamamızın yönlendirme yapılandırmasını güncelleştireceğiz.

1. Projeyi Visual Studio Code'da açın.

2. Aşağıdaki dosyayı açın.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. JSON nesnesinin köküne aşağıdaki yönlendirme yapılandırmasını ekleyin.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Bu yönlendirme kuralını ekleyerek kullanıcılarımızın Microsoft Entra kimlik doğrulama sağlayıcısına erişmesini engelleriz.

Ürün listesi erişiminin güvenliğini sağlama

Ardından ürün listesinin güvenliğini sağlamak istiyoruz, böylece api'ye yalnızca kimliği doğrulanmış erişim sağlanıyor. Bunun için yapılandırma dosyasına başka bir yönlendirme kuralı staticwebapp.config.json ekleyeceğiz.

1. Dizinin en üstüne routes aşağıdaki kuralı ekleyin.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. Tamamlanmış staticwebapp.config.json dosyanız aşağıdaki gibi görünmelidir:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

Değişikliklerinizi dağıtma

Bu yapılandırmanın sonucunu test etmeden önce uygulamamızı yeniden dağıtacağız.

1. Visual Studio Code'da F1 tuşuna basarak komut paletini açın.

2. Git: Tümünü İşle'yi girin ve seçin.

3. İşleme iletisi olarak girin Secure access ve Enter tuşuna basın.

4. F1 tuşuna basarak komut paletini açın.

5. Git: Gönder'i girip seçin ve Enter tuşuna basın.

Değişikliklerinizi gönderdikten sonra derleme ve dağıtma işleminin çalışmasını bekleyin. Değişiklikler daha sonra dağıtılan uygulamanızda görünür olmalıdır.

Yeni kısıtlamaları test edin

Uygulamanız yeniden dağıtıldıktan sonra yeni kısıtlamaların geçerli olup olmadığını test edebilirsiniz.

1. Visual Studio Code Gezgini penceresinde Statik Web Uygulamaları bölümüne dönün, my-static-web-app-and-authn öğesine sağ tıklayın ve ardından uygulamayı tarayıcınızda görüntülemek için Siteye Gözat'ı seçin.

2. Oturum açmadıysanız ürün listesi yerine Yetkisiz iletisini görmeniz gerekir.

3. Oturum açmak için kimlik doğrulama sağlayıcısı listesinde Microsoft Entra Id öğesini seçin.

   Aşağıdakine benzer bir 404 hata sayfası görmeniz gerekir:

   

4. Uygulamanıza geri dönmek için tarayıcınızın geri düğmesine basın.

5. Oturum açmak için kimlik doğrulama sağlayıcısı listesinde GitHub'ı seçin.

6. İstenirse GitHub kimlik bilgilerinizi girin ve Azure onay sayfasında Onay Ver'i seçin.

Şimdi oturum açtınız ve ürün listesini görmeniz gerekir.

Sonraki adımlar

Tebrikler. Statik Web Uygulamanızda eksiksiz bir kimlik doğrulama iş akışı uyguladınız!

Devam et