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

Makale
12/31/2023

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan bir web barındırma hizmeti sunar. Ayrıca, App Service kullanıcı kimlik doğrulaması ve yetkilendirmesi için yerleşik destek sunar. Bu öğreticide, App Service kimlik doğrulaması ve yetkilendirmesi ile uygulamalarınızın nasıl güvenli hale getirileceği gösterilmektedir. Örnek olarak görünüm ön ucuna sahip bir Express.js kullanır. App Service kimlik doğrulaması ve yetkilendirmesi tüm dil çalışma zamanlarını destekler ve öğreticiyi takip ederek tercih ettiğiniz dilde nasıl uygulanacağını öğrenebilirsiniz.

Azure Uygulaması Hizmeti, Linux işletim sistemini kullanarak yüksek oranda ölçeklenebilir, kendi kendine düzeltme eki uygulamalı bir web barındırma hizmeti sağlar. Ayrıca, App Service kullanıcı kimlik doğrulaması ve yetkilendirmesi için yerleşik destek sunar. Bu öğreticide, App Service kimlik doğrulaması ve yetkilendirmesi ile uygulamalarınızın nasıl güvenli hale getirileceği gösterilmektedir. Görünümlere sahip bir Express.js kullanır. App Service kimlik doğrulaması ve yetkilendirmesi tüm dil çalışma zamanlarını destekler ve öğreticiyi takip ederek tercih ettiğiniz dilde nasıl uygulanacağını öğrenebilirsiniz.

Öğreticide şunları öğrenirsiniz:

Yerleşik kimlik doğrulaması ve yetkilendirmeyi etkinleştirme
Kimliği doğrulanmamış isteklere karşı uygulamaların güvenliğini sağlama
Kimlik sağlayıcısı olarak Microsoft Entra Id kullanma
Oturum açmış kullanıcının adına uzak bir uygulamaya erişme
Belirteç kimlik doğrulaması ile hizmetten hizmete güvenli çağrılar
Sunucu kodundan erişim belirteçleri kullanma

İpucu

Bu senaryoyu tamamladıktan sonra Azure hizmetlerine kimliği doğrulanmış bir kullanıcı olarak bağlanmayı öğrenmek için sonraki yordama geçin. Yaygın senaryolar azure depolamaya veya belirli yeteneklere veya belirli tablolara veya dosyalara erişimi olan kullanıcı olarak bir veritabanına erişmeyi içerir.

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.

Kavramsal diyagram, web kullanıcısından ön uç uygulamasına ve arka uç uygulamasına kimlik doğrulama akışını gösterir.

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

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.

Ön uç web uygulaması dizinine geçin.

cd js-e2e-web-app-easy-auth-app-to-app/frontend

az webapp up ile ön uç web uygulamasını oluşturun ve dağıtın. Web uygulaması adının genel olarak benzersiz olması gerektiğinden, değerini benzersiz bir adla değiştirin <front-end-app-name> .
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
```
Arka uç web uygulaması dizinine geçin.
```
cd ../backend
```
Arka uç web uygulamasını aynı kaynak grubuna ve uygulama planına dağıtın. Web uygulaması adının genel olarak benzersiz olması gerektiğinden, değerini benzersiz bir baş harf veya sayı kümesiyle değiştirin <back-end-app-name> .
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
```

Ön uç web uygulaması dizinine geçin.
```
cd frontend
```
az webapp up ile ön uç web uygulamasını oluşturun ve dağıtın. Web uygulaması adının genel olarak benzersiz olması gerektiğinden, değerini benzersiz bir baş harf veya sayı kümesiyle değiştirin <front-end-app-name> .
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
```
Arka uç web uygulaması dizinine geçin.
```
cd ../backend
```
Arka uç web uygulamasını aynı kaynak grubuna ve uygulama planına dağıtın. Web uygulaması adının genel olarak benzersiz olması gerektiğinden, değerini benzersiz bir baş harf veya sayı kümesiyle değiştirin <back-end-app-name> .
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
```

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.

Ön uç web uygulamasını bir tarayıcıda açın. https://<front-end-app-name>.azurewebsites.net
Get user's profile bağlantısını seçin.
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

Azure portalı menüsünde Kaynak grupları'nı seçin veya herhangi bir sayfadan Kaynak grupları'nı arayın ve seçin.
Kaynak grupları'nda kaynak grubunuzu bulun ve seçin. Genel Bakış'ta arka uç uygulamanızı seçin.
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.
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.
Varsayılan ayarları kabul edin ve Ekle'yi seçin.
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

Azure portalı menüsünde Kaynak grupları'nı seçin veya herhangi bir sayfadan Kaynak grupları'nı arayın ve seçin.
Kaynak grupları'nda kaynak grubunuzu bulun ve seçin. Genel Bakış'ta ön uç uygulamanızın yönetim sayfasını seçin.
Ö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.
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.
Varsayılan ayarları kabul edin ve Ekle'yi seçin.
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.

İpucu

Hatalarla karşılaşırsanız ve uygulamanızın kimlik doğrulaması/yetkilendirme ayarlarını yeniden yapılandırırsanız, belirteç deposundaki belirteçler yeni ayarlarla yeniden oluşturulamayabilir. Belirteçlerinizin yeniden oluşturulduğundan emin olmak için oturumu kapatıp uygulamanızda yeniden oturum açmanız gerekir. Bunu yapmanın kolay bir yolu, tarayıcınızı özel modda kullanmak ve uygulamanızdaki ayarları değiştirdikten sonra tarayıcıyı kapatıp özel modda yeniden açmaktır.

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

Ö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.
İzin ekle'yi ve ardından API'lerim><arka uç-uygulama-adı'yı> seçin.
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.

İpucu

Kapsamı Azure portalında görüntülemek api://<back-end-client-id>/user_impersonation için arka uç uygulamasının Kimlik Doğrulama sayfasına gidin, Kimlik sağlayıcısı altındaki bağlantıya tıklayın ve ardından sol menüden Bir API'yi kullanıma sunma'ya tıklayın.
Bunun yerine bir web arabirimi kullanarak gerekli kapsamları yapılandırmak için Kimlik doğrulama belirteçlerini yenileme makalesinde yer alan Microsoft adımlarına bakın.
Bazı kapsamlar için yönetici veya kullanıcı onayı gerekir. Bu gereksinim, kullanıcı tarayıcıda ön uç uygulamasında oturum açtığında onay isteği sayfasının görüntülenmesine neden olur. Bu onay sayfasından kaçınmak için, İstemci uygulaması ekle'ye tıklayıp ön uç uygulama kaydının istemci kimliğini sağlayarak ön ucun uygulama kaydını API'yi kullanıma sunma sayfasına yetkili bir istemci uygulaması olarak ekleyin.

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.

appId Ön uç App Service'i edinin (bunu ön uç App Service'in "Kimlik Doğrulaması" dikey penceresinden alabilirsiniz).
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:

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'];
```

Ü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

Tarayıcıda ön uç web sitesini kullanın. URL biçimindedir https://<front-end-app-name>.azurewebsites.net/.
Tarayıcı, kimlik doğrulamanızı web uygulamasına istemektedir. Kimlik doğrulamasını tamamlayın.
Kimlik doğrulaması tamamlandıktan sonra ön uç uygulaması uygulamanın giriş sayfasını döndürür.
Get user's profile öğesini seçin. Bu, taşıyıcı belirtecindeki kimlik doğrulamanızı arka uça geçirir.
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.

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

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ı?

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.
Yeni tarayıcı sekmesinde Dizine Gözat -> Site wwwroot'ı seçin.
Dizininde aşağıdakilerin olduğunu doğrulayın:
- package.json
- node_modules.tar.gz
- /src/index.js
package.json name özelliğinin veya web adıyla frontend backendaynı olduğunu doğrulayın.
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.

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.
Yeni tarayıcı sekmesinde Dizine Gözat -> Dağıtım Günlükleri'ni seçin.
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:

Yerleşik kimlik doğrulaması ve yetkilendirmeyi etkinleştirme
Kimliği doğrulanmamış isteklere karşı uygulamaların güvenliğini sağlama
Kimlik sağlayıcısı olarak Microsoft Entra Id kullanma
Oturum açmış kullanıcının adına uzak bir uygulamaya erişme
Belirteç kimlik doğrulaması ile hizmetten hizmete güvenli çağrılar
Sunucu kodundan erişim belirteçleri kullanma

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

Azure Uygulaması Hizmetinde güvenli bir n katmanlı uygulama oluşturma

Aracılığıyla paylaş

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

Kullanıcı profilini alma

Önkoşullar

1. Örnek uygulamayı kopyalayın

2. Uygulama oluşturma ve dağıtma

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

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

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

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

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

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

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

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

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

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

8. Uygulamalara göz atın

9. Kaynakları temizleme

Sık sorulan sorular

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

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

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

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

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

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

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

Sonraki adımlar

Geri Bildirim

Ek kaynaklar