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

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan bir web barındırma hizmeti sunar. App Service, kullanıcı kimlik doğrulaması ve yetkilendirme için yerleşik desteğe sahiptir. 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üm ön ucuna sahip bir Express.js kullanır. App Service kimlik doğrulaması ve yetkilendirmesi tüm dil çalışma zamanlarını destekler. Bu öğreticiyi izleyerek tercih ettiğiniz dile uygulamayı öğrenebilirsiniz.

Azure App Service, Linux işletim sistemini kullanarak yüksek oranda ölçeklenebilir, kendini güncelleyen bir web hosting servisi sağlar. App Service, kullanıcı kimlik doğrulaması ve yetkilendirme için yerleşik desteğe sahiptir. 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üm ön ucuna sahip bir Express.js kullanır. App Service kimlik doğrulaması ve yetkilendirmesi tüm dil çalışma zamanlarını destekler. Bu öğreticiyi izleyerek tercih ettiğiniz dile uygulamayı öğrenebilirsiniz.

Bu yordamdaki kimlik doğrulaması, Azure Uygulaması Hizmeti tarafından barındırma platformu katmanında sağlanır. Ön uç ve arka uç uygulamasını dağıtmanız ve bu web uygulamasının başarıyla kullanılabilmesi için 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.

Bu senaryoyu tamamladıktan sonra Azure hizmetlerine kimliği doğrulanmış bir kullanıcı olarak bağlanmayı öğrenmek için sonraki öğreticiye geçin. Yaygın senaryolar, özel yeteneklere veya belirli tablo veya dosyalara erişimi olan bir kullanıcı olarak Azure Storage'a ya da bir veritabanına erişmeyi içerir.

Bu eğitimde, siz:

  • 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
  • Jeton kimlik doğrulaması ile servisler arası güvenli çağrılar
  • Sunucu kodundan erişim belirteçleri kullanma

Önkoşullar

Azure hesabınız yoksa, başlamadan önce ücretsiz hesap oluşturun.

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 özelliği 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 çalışmadan önce, kimliği doğrulanmış accessToken, App Service x-ms-token-aad-access-token üst bilgisinden, App Service tarafından enjekte edilir. Ön uç kaynak kodu, accessToken'ye erişir ve onu arka uç sunucusuna gönderir. Ön uç sunucusu, arka uç API'sine güvenli bir şekilde erişmek için belirteci olarak bearerToken gönderir. Arka uç sunucusu, bearerToken öğesini arka uç kaynak kodunuza aktarmadan önce doğrular. Arka uç kaynak kodunuz bearerToken'yi aldıktan sonra kullanılabilir.

Bu serinin sonraki eğitiminde, Microsoft Graph API'sine erişim yetkisine sahip bir belirteçle değiştirilir. Microsoft Graph API'si kullanıcının profil bilgilerini döndürür.

Örnek uygulamayı kopyalama

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

Uygulama oluşturma ve dağıtma

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

  1. Web uygulaması dizinine frontend geçin.

    cd js-e2e-web-app-easy-auth-app-to-app/frontend
    
  2. az webapp up komutuyla ön uç web uygulamasını oluşturun ve dağıtın. Web uygulaması adının genel olarak benzersiz olması gerekir. <front-end-app-name> yerine benzersiz bir ad yazın.

    az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:24LTS"
    
  3. Web uygulaması dizinine backend geçin.

    cd ../backend
    
  4. Arka uç web uygulamasını aynı kaynak grubuna ve uygulama planına dağıtın. Web uygulaması adının genel olarak benzersiz olması gerekir. değerini benzersiz bir harf ve sayı dizesiyle 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:24LTS"
    
  1. Web uygulaması dizinine frontend geçin.

    cd frontend
    
  2. az webapp up komutuyla ön uç web uygulamasını oluşturun ve dağıtın. Web uygulaması adının genel olarak benzersiz olması gerekir. değerini benzersiz bir harf ve sayı dizesiyle 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:24-lts"
    
  3. Web uygulaması dizinine backend geçin.

    cd ../backend
    
  4. Arka uç web uygulamasını aynı kaynak grubuna ve uygulama planına dağıtın. Web uygulaması adının genel olarak benzersiz olması gerekir. değerini benzersiz bir harf ve sayı dizesiyle 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:24-lts"
    

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 olmalıdır https://<back-end-app-name>.azurewebsites.net.

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

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

Ön uç uygulamasına gidin ve arka uçtan sahte profili geri getirin. Bu eylem, ön ucun profili arka uçtan başarıyla istediği 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.

    Kimlik doğrulaması başarıyla tamamlandıktan sonra ön uç uygulamasını gösteren web tarayıcısının ekran görüntüsü.

  2. Kullanıcının profilini al bağlantısını seçin.

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

    Sunucudan döndürülen sahte profilli tarayıcının ekran görüntüsü.

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

Kimlik doğrulamasını yapılandırma

Bu bölümde, iki web uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştirin. 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 kullanma

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ındaKaynak 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 Ayarlar>Kimlik Doğrulaması'nı ve ardından Kimlik sağlayıcısı ekle'yi seçin.

  4. Kimlik sağlayıcısı ekle sayfasında, Kimlik sağlayıcısı için Microsoft'u seçerek Microsoft ve Microsoft Entra kimliklerini kullanarak oturum açın.

  5. İstemci sırrı sona erme için bir değer seçin.

    Sağ menüde Kimlik Doğrulaması/Yetkilendirme'nin ve ayarların seçili olduğunu gösteren arka uç uygulamasının sol menüsünün ekran görüntüsü.

  6. Diğer değerler için varsayılan ayarları kabul edin ve Ekle'yi seçin.

  7. Kimlik Doğrulaması sayfası açılır. Microsoft Entra uygulamasının istemci kimliğini Not Defteri'ne kopyalayın. Bu değer daha sonra gerekli olacaktır.

    Microsoft Entra Uygulamasını gösteren Microsoft Entra Ayarları penceresinin ve kopyalanacak istemci kimliğini gösteren Microsoft Entra Applications penceresinin ekran görüntüsü.

Burada durursanız, App Service kimlik doğrulama ve yetkilendirme ile güven altına alınan bağımsız bir uygulamanız olur. Kalan bölümlerde, kimliği doğrulanmış kullanıcıyı ön uçtan arka uca akarak birden çok uygulama çözümünün güvenliğini sağlamayı gösterir.

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

  1. Azure portalındaKaynak grupları'nı arayın ve seçin.

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

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

  4. Kimlik sağlayıcısı ekle sayfasında, Kimlik sağlayıcısı için Microsoft'u seçerek Microsoft ve Microsoft Entra kimliklerini kullanarak oturum açın.

  5. İstemci sırrı sona erme için bir değer seçin. Diğer değerler için varsayılan ayarları kabul edin ve Ekle'yi seçin.

  6. Kimlik Doğrulaması sayfası açılır. Microsoft Entra uygulamasının istemci kimliğini Not Defteri'ne kopyalayın. Bu değer daha sonra gerekli olacaktır.

Ön uç uygulamasının arka uç uygulamasına erişim sağlaması

Her iki uygulamanızda da kimlik doğrulamasını ve yetkilendirmeyi etkinleştirmişsiniz. Kimlik doğrulamasını tamamlamak için üç şey yapmanız gerekir:

  • Kapsam tanımlayarak arka uç uygulamasını API olarak kullanıma sunma
  • Ö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 kullanma

Uyarı

Ön uç uygulamasına arka uç erişimi verebilmeniz için önce bir Uygulama Kimliği URI'si ayarlayarak ve en az bir kapsam tanımlayarak arka uç API'sini kullanıma sunmanız gerekir. Bu, API izinleri atanırken arka ucun "API'lerim" altında seçilebilir olmasını sağlar.

İpucu

Hatalarla karşılaşır ve uygulamanızın kimlik doğrulaması/yetkilendirme ayarlarını yeniden yapılandırırsanız, belirteç deposundaki belirteçler yeni ayarlardan yeniden oluşturulamayabilir. Belirteçlerinizin yeniden oluşturuladığından emin olmak için oturumu kapatmanız ve uygulamanızda yeniden oturum açmanız gerekir. Bir yaklaşım, tarayıcınızı özel modda kullanmaktır. Uygulamalarınızdaki ayarları değiştirdikten sonra tarayıcıyı özel modda kapatıp yeniden açın.

Bu bölümde, ön uç uygulamasına kullanıcı adına arka uç uygulamasına erişim verirsiniz. Teknik olarak, ön ucun AD uygulamasına kullanıcı adına arka ucun AD uygulamasına erişim izinleri verirsiniz.

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

  2. Soldakimenüden API izinlerini> seçin.

  3. İzin ekle'yi seçin, ardından API'lerim><back-end-app-name> seçin.

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

    Temsilci izinleri, user_impersonation ve İzin ekle düğmesinin seçili olduğu API izinlerini isteme sayfasının ekran görüntüsü.

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 bölümde App Service kimlik doğrulamasını ve yetkilendirmesini, arka uca erişmeniz için kullanılabilir bir erişim belirteci verecek şekilde yapılandırın. 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, kimlik doğrulama ayarına scope parametresini eklemek için ön uç uygulamasında identityProviders.azureActiveDirectory.login.loginParameters aşağıdaki komutları çalıştırın. <Front-end-app-name> ve <back-end-client-id> 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, diğer özel kapsamlara sahip bir loginParameters özellik ekler. İstenen kapsamların açıklaması aşağıdadır:

  • Zaten varsayılan olarak App Service tarafından isteniyor. Daha fazla bilgi için bkz. OpenID Connect Kapsamları.
  • belirteçleri yenilemek istemeniz durumunda kolaylık sağlamak için buraya offline_access eklenmiştir.
  • api://<back-end-client-id>/user_impersonation arka uç uygulama kaydınızda kullanıma sunulan bir API'dir. JWT'nin arka uç uygulamasını jeton hedef kitlesi olarak içermesini 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ı'nın altındaki bağlantıyı seçin ve ardından soldaki menüden Api'yi kullanıma sunma'yı seçin.
  • Bunun yerine bir web arabirimi kullanarak gerekli kapsamları yapılandırmak için bkz. Kimlik doğrulama belirteçlerini yenileme.
  • 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ünmesine neden olur. Bu onay sayfasından kaçınmak için ön ucun uygulama kaydını API'yi kullanıma sunma sayfasına yetkili istemci uygulaması olarak ekleyin. İstemci uygulaması ekle'yi seçin ve ön ucun uygulama kaydının istemci kimliğini girin.

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

Diğer sağlayıcılar için erişim belirtecini nasıl yapılandıracağınız hakkında bilgi için, Kimlik sağlayıcısı belirteçlerini yenileme konusuna bakın.

Yalnızca ön uç App Service'ten gelen bir belirteci kabul etmek için arka uç App Service'i yapılandırma.

Ayrıca arka uç App Service'i yalnızca ön uç App Service'ten bir belirteci kabul etmek üzere yapılandırmanız gerekir. Bu yapılandırmanın yapılmaması, belirteci ön uçtan arka uca geçirdiğinizde 403: Yasak hatasıyla sonuçlanır.

Önceki adımda kullandığınız Azure CLI işlemini kullanarak bu yaklaşımı uygulayabilirsiniz.

  1. appId Ön uç App Service'i edinin. Bu değeri ön uç App Service'in Kimlik Doğrulaması sayfasından alabilirsiniz.

  2. Aşağıdaki Azure CLI'yi çalıştırmadan önce <back-end-app-name> ve <front-end-app-id>'in yerine uygun değerleri yerleştirin.

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"

Frontend kimliği doğrulanmış backend'i çağırır

Ön uç uygulamanın, doğru user_impersonation kapsamıyla kullanıcının kimlik doğrulamasını arka uca iletmesi 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 değerini programatik olarak almak için ön uç App Service tarafından eklenen x-ms-token-aad-access-token üst bilgisini kullanın.

    // ./src/server.js
    const accessToken = req.headers['x-ms-token-aad-access-token'];
    
  2. Başlıkta Authentication içindeki accessToken'i bearerToken değeri olarak 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 alt düzey bir Azure hizmetinin kapsamı dahilinde yeni bir belirteç için arka ucun bearerToken nasıl değiştirileceği gösterilmektedir.

Arka uç profili ön uca geri gönderir

Ön uçtan gelen istek yetkilendirilmediyse, arka uç App Service istek uygulama kodunuza ulaşmadan önce isteği 401 HTTP hata koduyla reddeder. Arka uç koduna ulaştığınızda, yetkilendirilmiş bir belirteci içerdiği için, bearerToken öğesini almak için accessToken'yi 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
    }
}

Uygulamalara göz atın

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

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

    İzin isteyen tarayıcı kimlik doğrulaması açılır penceresinin ekran görüntüsü.

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

    Kimlik doğrulaması başarıyla tamamlandıktan sonra ön uç uygulamasını gösteren web tarayıcısının ekran görüntüsü.

  4. Kullanıcı profilini al seçin. Bu eylem, taşıyıcı belirtecindeki kimlik doğrulamanızı arka uç sunucusuna iletir.

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

    Arka uç uygulamasından sahte profil başarıyla aldıktan sonra ön uç uygulamasını gösteren web tarayıcısının ekran görüntüsü.

    withAuthentication true değeri, kimlik doğrulamasının şimdi ayarlandığını gösterir.

Kaynakları temizle

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

  1. Kaynak grubunu silmek için Cloud Shell'de aşağıdaki komutu çalıştırın. Bu komutun çalıştırılması bir dakika sürebilir.

    az group delete --name myAuthResourceGroup
    
  2. Arka uç ve ön uç uygulamalarının bölümlerinde daha önce bulduğunuz ve not ettiğiniz Enable authentication and authorization kullanın.

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

    # delete app - do this for both front-end and back-end client ids
    az ad app delete --id <client-id>
    

Sık sorulan sorular

Bu kimlik doğrulamayı yerel geliştirme makinemde nasıl test edebilirim?

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. Ön uç ve arka uç uygulamasını dağıtmanız ve kimlik doğrulamasını kullanmak üzere her birinin kimlik doğrulamasını yapılandırmanız gerekir.

Uygulama sahte profili görüntülemiyor, onu nasıl düzeltebilirim?

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

  • Ortam değişkenleri:

    • BACKEND_URL, https://<back-end-app-name>.azurewebsites.net olarak doğru şekilde yapılandırılmıştır. Sondaki eğik çizgiyi veya yolu eklemeyin.
  • HTTP üst bilgileri:

    • Başlıklar x-ms-token-* enjekte edilir.
  • Oturum açmış kullanıcının Microsoft Graph profil adı görüntülenir.

  • Ön uç uygulaması belirteç için kapsam belirlemiştir user_impersonation. Kapsamınız bu değeri içermiyorsa, bu bir zamanlama sorunu olabilir. login ön uç uygulamanızın parametrelerini doğrulayın. Kimlik doğrulamanın çoğaltılmasını beklemek 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ı> ve ardından Git'i seçin. Bu eylem yeni bir tarayıcı sekmesi veya penceresi açar.

  2. Yeni tarayıcı sekmesinde Dizin Gözat>wwwroot sitesini seçin.

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

    • package.json
    • node_modules.tar.gz
    • /src/index.js
  4. package.jsonname özelliğinin web adıyla, frontend veya backend, aynı olduğunu doğrulayın.

  5. Kaynak kodu değiştirdiyseniz ve yeniden dağıtmanız gerekiyorsa, bu uygulama için 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ı> ve ardından Git'i seçin. Bu eylem yeni bir tarayıcı sekmesi veya penceresi açar.
  2. Yeni tarayıcı sekmesinde Dizin>Dağıtım Günlüklerine Gözat'ı 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 davranış tarayıcı ağ trafiğinde görebileceğiniz bir davranış değildir. Arka uç profili isteğinin başarısını belirlemek için aşağıdaki listeyi kullanın:

  • Arka uç web uygulamasına ulaşıldığında, herhangi bir hatayı ön uç uygulamasına döndürür. Buna ulaşılamıyorsa, ön uç uygulaması durum kodunu ve iletisini bildirir.

    • 401: Kullanıcı kimlik doğrulamasını doğru geçirmedi. Bu mesaj, kapsamın doğru ayarlanmadığını gösterebilir.
    • 404: Sunucunun URL'si, sunucunun sahip olduğu bir yolla eşleşmiyor
  • Kullanıcı profili talebinde bulunurken ön uç isteğinizi izlemek amacıyla arka uç uygulamasının akış günlüklerini kullanın. ile console.logkaynak kodunda hata ayıklama bilgileri vardır ve bu da 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 yaklaşımı önermeyiz. Şu anda Ön Uç için Arka Uç desenini öneririz.

Bu öğreticideki örneğe uygulanırsa, ön uç uygulamasındaki tarayıcı kodu, sunucu koduna aracı olarak kimliği doğrulanmış bir oturumda API çağrıları gerçekleştirir. Ön uç uygulamasındaki sunucu kodu, x-ms-token-aad-access-token header değerini Bearer Token olarak kullanarak arka uç uygulamasına API çağrıları yapar. Tarayıcı kodunuzdan sunucu koduna yapılan tüm çağrılar kimliği doğrulanmış oturum tarafından korunur.

Sonraki adım

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