Öğretici: Azure App Service'te kullanıcıların kimliğini doğrulama ve kullanıcıları uçtan uca yetkilendirme

Öğreticide şunları öğrenirsiniz:

Bu yordamdaki kimlik doğrulaması, Azure Uygulaması Hizmeti tarafından barındırma platformu katmanında sağlanır. Bu web uygulamasının başarıyla kullanılabilmesi için ön uç ve arka uç uygulamasını dağıtmanız ve kimlik doğrulamasını yapılandırmanız gerekir.

Kullanıcı profilini alma

Ön uç uygulaması, arka uç API'sini güvenli bir şekilde kullanacak şekilde yapılandırılmıştır. Ön uç uygulaması, kullanıcı için bir Microsoft oturum açma hizmeti sağlar, ardından kullanıcının arka uçtan sahte profilini almasına izin verir. Bu öğretici, senaryoyu tamamlama adımlarını basitleştirmek için sahte bir profil kullanır.

Kaynak kodunuz ön uçta yürütülmeden önce App Service kimliği doğrulanmış accessToken olan kodu App Service x-ms-token-aad-access-token üst bilgisinden ekler. Ön uç kaynak kodu daha sonra accessToken'a erişir ve arka uç API'sine güvenli bir şekilde bearerToken erişmek için olarak arka uç sunucusuna gönderir. Arka uç sunucusu, arka uç kaynak kodunuz içine geçirilmeden önce bearerToken'i doğrular. Arka uç kaynak kodunuz bearerToken'i aldıktan sonra kullanılabilir.

Bu serinin sonraki makalesinde bearerToken, Microsoft Graph API'sine erişmek için kapsamı olan bir belirteçle değiştirilir. Microsoft Graph API'si kullanıcının profil bilgilerini döndürür.

Önkoşullar

Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı oluşturun.

• Node.js (LTS)

• Azure Cloud Shell'de Bash ortamını kullanın. Daha fazla bilgi için bkz . Azure Cloud Shell'de Bash için hızlı başlangıç.

  

• CLI başvuru komutlarını yerel olarak çalıştırmayı tercih ediyorsanız Azure CLI'yı yükleyin . Windows veya macOS üzerinde çalışıyorsanız Azure CLI’yi bir Docker kapsayıcısında çalıştırmayı değerlendirin. Daha fazla bilgi için bkz . Docker kapsayıcısında Azure CLI'yi çalıştırma.

  • Yerel yükleme kullanıyorsanız az login komutunu kullanarak Azure CLI ile oturum açın. Kimlik doğrulama işlemini tamamlamak için terminalinizde görüntülenen adımları izleyin. Diğer oturum açma seçenekleri için bkz . Azure CLI ile oturum açma.

  • İstendiğinde, ilk kullanımda Azure CLI uzantısını yükleyin. Uzantılar hakkında daha fazla bilgi için bkz. Azure CLI ile uzantıları kullanma.

  • Yüklü sürümü ve bağımlı kitaplıkları bulmak için az version komutunu çalıştırın. En son sürüme yükseltmek için az upgrade komutunu çalıştırın.

1. Örnek uygulamayı kopyalayın

1. Azure Cloud Shell'de aşağıdaki komutu çalıştırarak örnek depoyu kopyalayın.

   git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
   

2. Uygulama oluşturma ve dağıtma

Kaynak grubunu, web uygulaması planını, web uygulamasını oluşturun ve tek adımda dağıtın.

3. Uygulama ayarını yapılandırma

Ön uç uygulamasının API istekleri için arka uç uygulamasının URL'sini bilmesi gerekir. Uygulama ayarını yapılandırmak için aşağıdaki Azure CLI komutunu kullanın. URL, biçiminde https://<back-end-app-name>.azurewebsites.netolmalıdır.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. Ön uç arka ucu çağırır

Ön uç uygulamasına göz atın ve arka uçtan sahte profili döndürebilirsiniz. Bu eylem, ön ucun profili arka uçtan başarıyla istediğinden ve arka ucun profili döndürdüğünü doğrular.

1. Ön uç web uygulamasını bir tarayıcıda açın. https://<front-end-app-name>.azurewebsites.net

   

2. Get user's profile bağlantısını seçin.

3. Arka uç web uygulamasından döndürülen sahte profili görüntüleyin.

   

   withAuthentication false değeri, kimlik doğrulamasının henüz ayarlanmamış olduğunu gösterir.

5. Kimlik doğrulamayı yapılandırma

Bu adımda, iki web uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştirirsiniz. Bu öğreticide kimlik sağlayıcısı olarak Microsoft Entra Id kullanılır.

Ayrıca ön uç uygulamasını şu şekilde yapılandırabilirsiniz:

• Ön uç uygulamasına arka uç uygulamasına erişim verme
• App Service’i kullanılabilir bir belirteç döndürecek şekilde yapılandırma
• Kodunuzda belirteci kullanın.

Daha fazla bilgi için bkz . App Services uygulamanız için Microsoft Entra kimlik doğrulamasını yapılandırma.

Arka uç uygulaması için kimlik doğrulamasını ve yetkilendirmeyi etkinleştirme

1. Azure portalı menüsünde Kaynak grupları'nı seçin veya herhangi bir sayfadan Kaynak grupları'nı arayın ve seçin.

2. Kaynak grupları'nda kaynak grubunuzu bulun ve seçin. Genel Bakış'ta arka uç uygulamanızı seçin.

3. Arka uç uygulamanızın sol menüsünde Kimlik Doğrulama'yı ve ardından Kimlik sağlayıcısı ekle'yi seçin.

4. Kimlik sağlayıcısı ekle sayfasında, Microsoft ve Microsoft Entra kimliklerinde oturum açmak için Kimlik sağlayıcısı olarak Microsoft'u seçin.

5. Varsayılan ayarları kabul edin ve Ekle'yi seçin.

   

6. Kimlik Doğrulaması sayfası açılır. Microsoft Entra uygulamasının İstemci Kimliğini bir not defterine kopyalayın. Bu değer daha sonra gerekli olacaktır.

   

Burada durursanız, App Service kimlik doğrulaması ve yetkilendirmesi tarafından zaten güvenli hale getirilen bağımsız bir uygulamanız vardır. Kalan bölümlerde, kimliği doğrulanmış kullanıcıyı ön uçtan arka uca "akarak" çok uygulamalı çözümün güvenliğini sağlamayı gösterir.

Ön uç uygulaması için kimlik doğrulamasını ve yetkilendirmeyi etkinleştirme

1. Azure portalı menüsünde Kaynak grupları'nı seçin veya herhangi bir sayfadan Kaynak grupları'nı arayın ve seçin.

2. Kaynak grupları'nda kaynak grubunuzu bulun ve seçin. Genel Bakış'ta ön uç uygulamanızın yönetim sayfasını seçin.

3. Ön uç uygulamanızın sol menüsünde Kimlik Doğrulama'yı ve ardından Kimlik sağlayıcısı ekle'yi seçin.

4. Kimlik sağlayıcısı ekle sayfasında, Microsoft ve Microsoft Entra kimliklerinde oturum açmak için Kimlik sağlayıcısı olarak Microsoft'u seçin.

5. Varsayılan ayarları kabul edin ve Ekle'yi seçin.

6. Kimlik Doğrulaması sayfası açılır. Microsoft Entra uygulamasının İstemci Kimliğini bir not defterine kopyalayın. Bu değer daha sonra gerekli olacaktır.

Ön uç uygulamasına arka uç erişimi verme

Her iki uygulamanızda da kimlik doğrulaması ve yetkilendirmeyi etkinleştirdikten sonra uygulamaların her biri bir AD uygulaması tarafından desteklenir. Kimlik doğrulamasını tamamlamak için üç şey yapmanız gerekir:

• Ön uç uygulamasına arka uç uygulamasına erişim verme
• App Service’i kullanılabilir bir belirteç döndürecek şekilde yapılandırma
• Kodunuzda belirteci kullanın.

Bu adımda, ön uç uygulamasına kullanıcı adına arka uç uygulamasına erişim verirsiniz. (Teknik olarak, ön ucun AD uygulaması , arka ucun AD uygulamasına kullanıcı adına erişim izinleridir.)

1. Ön uç uygulamasının Kimlik Doğrulaması sayfasında, Kimlik sağlayıcısı altında ön uç uygulamanızın adını seçin. Bu uygulama kaydı sizin için otomatik olarak oluşturuldu. Soldaki menüden API izinleri'ni seçin.

2. İzin ekle'yi ve ardından API'lerim><arka uç-uygulama-adı'yı> seçin.

3. Arka uç uygulamasının API izinleri iste sayfasında Temsilci izinleri'ni seçin ve user_impersonation ve ardından İzin ekle'yi seçin.

   

App Service’i kullanılabilir bir erişim belirteci döndürecek şekilde yapılandırma

Ön uç uygulaması artık oturum açmış kullanıcı olarak arka uç uygulamasına erişmek için gerekli izinlere sahiptir. Bu adımda App Service kimlik doğrulamasını ve yetkilendirmesini arka uçtan erişmeniz için kullanılabilir bir erişim belirteci verecek şekilde yapılandıracaksınız. Bu adım için arka uç uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştir bölümünden kopyaladığınız arka ucun istemci kimliği gerekir.

Cloud Shell'de, parametresini kimlik doğrulama ayarına identityProviders.azureActiveDirectory.login.loginParameterseklemek scope için ön uç uygulamasında aşağıdaki komutları çalıştırın. Front-end-app-name> ve< back-end-client-id> değerini değiştirin.<

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Komutlar, ek özel kapsamlara sahip bir özelliği etkili bir loginParameters şekilde ekler. İstenen kapsamların açıklaması aşağıdadır:

• openid zaten App Service tarafından istendi. Daha fazla bilgi için bkz . OpenID Connect Kapsamları.
• offline_access kolaylık sağlamak için (belirteçleri yenilemek istemeniz durumunda) buraya dahildir.
• api://<back-end-client-id>/user_impersonation arka uç uygulama kaydınızda kullanıma sunulan bir API'dir. Arka uç uygulamasını belirteç hedef kitlesi olarak içeren bir JWT belirteci sağlayan kapsamdır.

Uygulamalarınız artık yapılandırılmıştır. Ön uç artık uygun bir erişim belirteci ile arka uçtan erişmeye hazırdır.

Diğer sağlayıcılar için erişim belirtecini yapılandırma hakkında bilgi için bkz . Kimlik sağlayıcısı belirteçlerini yenileme.

6. Arka uç App Service'i yalnızca ön uç App Service'ten belirteç kabul etmek için yapılandırın

Ayrıca arka uç App Service'i yalnızca ön uç App Service'ten bir belirteci kabul etmek üzere yapılandırmanız gerekir. Bunu yapmamak, belirteci ön uçtan arka uça geçirdiğinizde "403: Yasak hatası" ile sonuçlanabilir.

Bunu, önceki adımda kullandığınız Azure CLI işlemiyle ayarlayabilirsiniz.

1. appId Ön uç App Service'i edinin (bunu ön uç App Service'in "Kimlik Doğrulaması" dikey penceresinden alabilirsiniz).

2. ve <front-end-app-id>öğesinin yerine aşağıdaki Azure CLI'yi <back-end-app-name> çalıştırın.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. Ön uç kimliği doğrulanmış arka ucu çağırır

Ön uç uygulamasının doğru kapsamlı kullanıcının kimlik doğrulamasını user_impersonation arka uçtan geçirmesi gerekir. Aşağıdaki adımlar, bu işlev için örnekte sağlanan kodu gözden geçirir.

Ön uç uygulamasının kaynak kodunu görüntüleyin:

1. Kullanıcının accessToken'i program aracılığıyla almak için ön uç App Service ekli x-ms-token-aad-access-token üst bilgisini kullanın.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Üst bilgideki Authentication accessToken değerini değer olarak bearerToken kullanın.

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Bu öğretici, senaryoyu basitleştirmek için sahte bir profil döndürür. Bu serideki sonraki öğreticide, Microsoft Graph gibi bir aşağı akış Azure hizmetinin kapsamına sahip yeni bir belirteç için arka uç taşıyıcıToken'in nasıl değiş tokuş edilmesi gösterilmektedir.

7. Arka uç profili ön uça döndürür

Ön uçtan gelen istek yetkilendirilmediyse, arka uç App service istek uygulama kodunuz ulaşmadan önce isteği 401 HTTP hata koduyla reddeder. Arka uç koduna ulaşıldığında (yetkili bir belirteç içerdiğinden), accessToken'i almak için bearerToken öğesini ayıklayın.

Arka uç uygulamasının kaynak kodunu görüntüleyin:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. Uygulamalara göz atın

1. Tarayıcıda ön uç web sitesini kullanın. URL biçimindedir https://<front-end-app-name>.azurewebsites.net/.

2. Tarayıcı, kimlik doğrulamanızı web uygulamasına istemektedir. Kimlik doğrulamasını tamamlayın.

   

3. Kimlik doğrulaması tamamlandıktan sonra ön uç uygulaması uygulamanın giriş sayfasını döndürür.

   

4. Get user's profile öğesini seçin. Bu, taşıyıcı belirtecindeki kimlik doğrulamanızı arka uça geçirir.

5. Arka uç, sahte sabit kodlanmış profil adıyla yanıt verir: John Doe.

   

   withAuthentication true değeri, kimlik doğrulamasının henüz ayarlandığını gösterir.

9. Kaynakları temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.

1. Cloud Shell'de aşağıdaki komutu çalıştırarak kaynak grubunu silin. Bu komutun çalıştırılması bir dakika sürebilir.

   az group delete --name myAuthResourceGroup
   

2. Daha önce arka uç ve ön uç uygulamalarının Enable authentication and authorization bölümlerinde bulduğunuz ve not ettiğiniz kimlik doğrulama uygulamalarının İstemci Kimliğini kullanın.

3. Hem ön uç hem de arka uç uygulamaları için uygulama kayıtlarını silin.

   # delete app - do this for both frontend and backend client ids
   az ad app delete <client-id>
   

Sık sorulan sorular

Bu kimlik doğrulamayı yerel geliştirme makinemde test Nasıl yaparım??

Bu yordamdaki kimlik doğrulaması, Azure Uygulaması Hizmeti tarafından barındırma platformu katmanında sağlanır. Eşdeğer öykünücü yoktur. Kimlik doğrulamasını kullanmak için ön uç ve arka uç uygulamasını ve yapılandırma kimlik doğrulamasını dağıtmanız gerekir.

Uygulama sahte profil görüntülemiyor, nasıl hata ayıklarım?

Ön uç ve arka uç uygulamalarının her ikisi de, bu uygulama sahte profili döndürmediğinde kimlik doğrulamasında hata ayıklamaya yardımcı olacak rotalara sahiptir/debug. Ön uç hata ayıklama yolu, doğrulanması gereken kritik parçaları sağlar:

• Ortam değişkenleri:
  • BACKEND_URL olarak https://<back-end-app-name>.azurewebsites.netdoğru yapılandırıldı. Sondaki eğik çizgiyi veya yolu eklemeyin.
• HTTP üst bilgileri:
  • Üst x-ms-token-* bilgiler eklenir.
• Oturum açmış kullanıcının Microsoft Graph profil adı görüntülenir.
• Ön uç uygulamasının belirteç kapsamına sahiptir user_impersonation. Kapsamınız bunu içermiyorsa, bu bir zamanlama sorunu olabilir. Azure kaynaklarında ön uç uygulamanızın login parametrelerini doğrulayın. Kimlik doğrulamasını çoğaltmak için birkaç dakika bekleyin.

Uygulama kaynak kodu her web uygulamasına doğru dağıtılır mı?

1. Web uygulaması için Azure portalında Geliştirme Araçları -> Gelişmiş Araçlar'ı ve ardından Git -> seçeneğini belirleyin. Bu, yeni bir tarayıcı sekmesi veya penceresi açar.

2. Yeni tarayıcı sekmesinde Dizine Gözat -> Site wwwroot'ı seçin.

3. Dizininde aşağıdakilerin olduğunu doğrulayın:

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. package.json name özelliğinin veya web adıyla frontend backendaynı olduğunu doğrulayın.

5. Kaynak kodu değiştirdiyseniz ve yeniden dağıtmanız gerekiyorsa, bu uygulamanın package.json dosyasını içeren dizinden az webapp up komutunu kullanın.

Uygulama doğru şekilde mi başladı?

Giriş sayfası istendiğinde her iki web uygulaması da bir şey döndürmelidir. Bir web uygulamasına erişemiyorsanız /debug , uygulama doğru şekilde başlamadı. Bu web uygulamasının hata günlüklerini gözden geçirin.

1. Web uygulaması için Azure portalında Geliştirme Araçları -> Gelişmiş Araçlar'ı ve ardından Git -> seçeneğini belirleyin. Bu, yeni bir tarayıcı sekmesi veya penceresi açar.
2. Yeni tarayıcı sekmesinde Dizine Gözat -> Dağıtım Günlükleri'ni seçin.
3. Bildirilen sorunları bulmak için her günlüğü gözden geçirin.

Ön uç uygulaması arka uç uygulamasıyla konuşabiliyor mu?

Ön uç uygulaması arka uç uygulamasını sunucu kaynak kodundan çağırdığından, bu tarayıcı ağ trafiğinde görebileceğiniz bir şey değildir. Arka uç profili isteğinin başarılı olduğunu belirlemek için aşağıdaki listeyi kullanın:

• Arka uç web uygulaması, ulaşıldıysa ön uç uygulamasına herhangi bir hata döndürür. Buna ulaşılamıyorsa, ön uç uygulaması durum kodunu ve iletiyi bildirir.
  • 401: Kullanıcı kimlik doğrulamasını doğru geçirmedi. Bu, kapsamın doğru ayarlandığını gösterebilir.
  • 404: Sunucunun URL'si, sunucunun sahip olduğu bir yolla eşleşmiyor
• Kullanıcının profili için ön uç isteğinde bulunurken izlemek için arka uç uygulamasının akış günlüklerini kullanın. Kaynak kodunda console.log hata ayıklama bilgileri vardır ve bu bilgiler hatanın nerede oluştuğunun belirlenmesine yardımcı olur.

Ön uç belirtecinin süresi dolduğunda ne olur?

Erişim belirtecinizin süresi bir süre sonra sona erer. Kullanıcıların uygulamanızla yeniden kimlik doğrulaması yapmalarına gerek kalmadan erişim belirteçlerinizi yenileme hakkında bilgi için bkz . Kimlik sağlayıcısı belirteçlerini yenileme.

Ön uç uygulamasında tarayıcı tabanlı bir uygulamam varsa doğrudan arka uçla konuşabilir mi?

Bu yaklaşım, sunucu kodunun erişim belirtecini istemci tarayıcısında çalışan JavaScript koduna geçirmesini gerektirir. Tarayıcıda erişim belirtecini korumanın bir yolu olmadığından, bu önerilen bir yaklaşım değildir. Şu anda Ön Uç için Arka Uç deseni önerilir. Bu öğreticideki örne uygulandıysa, ön uç uygulamasındaki tarayıcı kodu, sunucu koduna aracı olarak kimliği doğrulanmış bir oturumda API çağrıları yapar ve ön uç uygulamasındaki sunucu kodu, üst bilgi değerini taşıyıcı belirteci olarak kullanarak x-ms-token-aad-access-token arka uç uygulamasına API çağrıları yapar. Tarayıcı kodunuzdan sunucu koduna yapılan tüm çağrılar zaten kimliği doğrulanmış oturum tarafından korunuyor olabilir.

Sonraki adımlar

Öğrendikleriniz:

Bir Azure hizmetine erişmek için bu kullanıcının kimliğini kullanmayı öğrenmek için sonraki öğreticiye ilerleyin.