Öğ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. 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 Angular.js ön ucuna sahip bir ASP.NET Core uygulaması 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 App Service , Linux işletim sistemini kullanarak yüksek düzeyde ölçeklenebilir, kendini yayama 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. örnek olarak Angular.js ön ucuna sahip bir ASP.NET Core uygulaması 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.

Basit kimlik doğrulaması ve yetkilendirme

Ayrıca, kimliği doğrulanmış kullanıcı adına hem sunucu kodundan hem de tarayıcı kodundan güvenliği sağlanmış bir arka uç API’sine erişerek çok katmanlı bir uygulamanın güvenliğini sağlamayı gösterir.

Gelişmiş kimlik doğrulaması ve yetkilendirme

Bunlar, App Service’teki olası kimlik doğrulaması ve yetkilendirme senaryolarından yalnızca bazılarıdır.

Öğreticide bilgi edineceğiniz konuların daha kapsamlı bir listesi aşağıda verilmiştir:

  • Yerleşik kimlik doğrulaması ve yetkilendirmeyi etkinleştirme
  • Kimliği doğrulanmamış isteklere karşı uygulamaların güvenliğini sağlama
  • Azure Active Directory’yi kimlik sağlayıcısı olarak 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
  • İstemci (tarayıcı) kodundan erişim belirteçleri kullanma

Bu öğreticideki adımları MacOS, Linux ve Windows üzerinde izleyebilirsiniz.

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

Önkoşullar

Bu öğreticiyi tamamlamak için:

  • Azure Cloud Shell'Da Bash ortamını kullanın.

    Cloud Shell’i yeni bir pencerede başlatma

  • Dilerseniz CLI başvuru komutlarını çalıştırmak için Azure CLI’yi yükleyebilirsiniz.

    • 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. Ek oturum açma seçenekleri için bkz. Azure CLI ile oturum açma.

    • İstendiğinde, ilk kullanımda Azure CLI uzantıları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.

Yerel .NET Core uygulaması oluşturma

Bu adımda, yerel .NET Core projesini ayarlarsınız. Bir arka uç API uygulaması ile ön uç web uygulamasını dağıtmak için aynı projeyi kullanırsınız.

Örnek uygulamayı kopyalama ve çalıştırma

  1. Örnek depoyu kopyalamak ve çalıştırmak için aşağıdaki komutları çalıştırın.

    git clone https://github.com/Azure-Samples/dotnet-core-api
    cd dotnet-core-api
    dotnet run
    
  2. http://localhost:5000 sayfasına gidip todo öğeleri ekleme, düzenleme ve kaldırma işlemlerini deneyin.

    Yerel olarak çalışan ASP.NET Core API'si

  3. ASP.NET Core durdurmak için Ctrl+C terminalde tuşuna basın.

  4. Varsayılan dalın olduğundan emin olun main .

    git branch -m main
    

    İpucu

    Dal adı değişikliği App Service için gerekli değildir. Ancak, çoğu depo varsayılan dalını olarak değiştirdiklerinden main , bu öğretici ' den bir depoyu nasıl dağıtacağınızı da gösterir main . Daha fazla bilgi için bkz. dağıtım dalını değiştirme.

Uygulamaları Azure'a dağıtma

Bu adımda projeyi iki App Service uygulamasına dağıtacaksınız. Bunlardan biri ön uç uygulama, diğeri ise arka uç uygulamadır.

Dağıtım kullanıcısı yapılandırma

FTP ve yerel git, bir dağıtım kullanıcısı kullanarak bir Azure Web uygulamasına dağıtabilir. Dağıtım kullanıcısını yapılandırdıktan sonra tüm Azure dağıtımlarınız için kullanabilirsiniz. Hesap düzeyinde dağıtım Kullanıcı adınız ve parolanız, Azure aboneliği kimlik bilgilerinizden farklı.

Dağıtım kullanıcısını yapılandırmak için, Azure Cloud Shell bölümünde az WebApp Deployment User set komutunu çalıştırın. <username>Ve öğesini <password> bir dağıtım kullanıcısı Kullanıcı adı ve parolasıyla değiştirin.

  • Kullanıcı adı Azure içinde benzersiz olmalıdır ve yerel git gönderimleri için ' @ ' sembolünü içermemelidir.
  • Parola en az sekiz karakter uzunluğunda olmalıdır ve şu üç öğeden ikisi vardır: harfler, rakamlar ve semboller.
az webapp deployment user set --user-name <username> --password <password>

JSON çıktısı parolayı olarak gösterir null . 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.

Web uygulamalarınızı dağıtmak için kullanmak üzere Kullanıcı adınızı ve parolanızı kaydedin.

Azure kaynakları oluşturma

Cloud Shell iki Windows web uygulaması oluşturmak için aşağıdaki komutları çalıştırın. <front-end-app-name> Ve <back-end-app-name> iki genel benzersiz uygulama adıyla değiştirin (geçerli karakterler a-z , 0-9 ve - ). Her komut hakkında daha fazla bilgi için bkz. CORS Ile Restuz API 'Yi barındırma Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

Cloud Shell’de iki web uygulaması oluşturmak için aşağıdaki komutları çalıştırın. <front-end-app-name> Ve <back-end-app-name> iki genel benzersiz uygulama adıyla değiştirin (geçerli karakterler a-z , 0-9 ve - ). Her komut hakkında daha fazla bilgi için, bkz. Azure App Service bir .NET Core uygulaması oluşturma.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Not

Ön uç uygulama ve arka uç uygulamanızın Git uzak öğelerine ait URL’leri, az webapp create çıktısında gösterilen şekilde kaydedin.

Git üzerinden Azure'a gönderme

  1. Dalı dağıtmakta olduğunuzdan main , iki App Service uygulamanız için varsayılan dağıtım dalını main (bkz. dağıtım dalını değiştirme) olarak ayarlamanız gerekir. Cloud Shell, DEPLOYMENT_BRANCH uygulama ayarını az webapp config appsettings set komutuyla ayarlayın.

    az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
    
  2. Yerel terminal penceresine geri dönerek, arka uç uygulamasına dağıtmak için aşağıdaki Git komutlarını çalıştırın. <deploymentLocalGitUrl-of-back-end-app> Azure kaynakları oluşturlistesinden kaydettiğiniz GIT uzak öğesinin URL 'siyle değiştirin. Git kimlik bilgileri Yöneticisi tarafından kimlik bilgileri istendiğinde, Azure portal oturum açmak için kullandığınız kimlik bilgilerini değil dağıtım kimlik bilgilerinizigirdiğinizden emin olun.

    git remote add backend <deploymentLocalGitUrl-of-back-end-app>
    git push backend main
    
  3. Yerel terminal penceresinde aynı kodu ön uç uygulamasına dağıtmak için aşağıdaki Git komutlarını çalıştırın. <deploymentLocalGitUrl-of-front-end-app> Azure kaynakları oluşturlistesinden kaydettiğiniz GIT uzak öğesinin URL 'siyle değiştirin.

    git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
    git push frontend main
    

Uygulamalara gidin

Bir tarayıcıda aşağıdaki URL'lere gittiğinizde iki uygulamanın çalıştığını görebilirsiniz.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Yapılacaklar listesi uygulaması gösteren bir tarayıcı penceresinde Azure App Service REST API örneğinin ekran görüntüsü.

Not

Uygulamanız yeniden başlatılırsa, yeni verilerin silindiğini fark etmiş olabilirsiniz. Örnek ASP.NET Core uygulaması bir bellek içi veritabanı kullandığından bu davranış tasarım gereğidir.

Ön uçtan arka uç API’si çağırma

Bu adımda, ön uç uygulamanın sunucu kodunu arka uç API’sine erişecek şekilde yönlendireceksiniz. Daha sonra, ön uçtan arka uca kimliği doğrulanmış erişimi etkinleştireceksiniz.

Ön uç kodunu değiştirme

  1. Yerel depoda Controllers/TodoController.cs dosyasını açın. TodoControllerSınıfının başlangıcında, aşağıdaki satırları ekleyin ve <back-end-app-name> arka uç uygulamanızın adıyla değiştirin:

    private static readonly HttpClient _client = new HttpClient();
    private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
    
  2. İle donatılmış yöntemi bulun [HttpGet] ve küme ayraçları içindeki kodu ile değiştirin:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
    return JsonConvert.DeserializeObject<List<TodoItem>>(data);
    

    İlk satır, arka uç API uygulamasına bir GET /api/Todo çağrısı yapar.

  3. Sonra, ile donatılmış yöntemi bulun [HttpGet("{id}")] ve küme ayraçları içindeki kodu ile değiştirin:

    var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
    return Content(data, "application/json");
    

    İlk satır, arka uç API uygulamasına bir GET /api/Todo/{id} çağrısı yapar.

  4. Sonra, ile donatılmış yöntemi bulun [HttpPost] ve küme ayraçları içindeki kodu ile değiştirin:

    var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
    var data = await response.Content.ReadAsStringAsync();
    return Content(data, "application/json");
    

    İlk satır, arka uç API uygulamasına bir POST /api/Todo çağrısı yapar.

  5. Sonra, ile donatılmış yöntemi bulun [HttpPut("{id}")] ve küme ayraçları içindeki kodu ile değiştirin:

    var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
    return new NoContentResult();
    

    İlk satır, arka uç API uygulamasına bir PUT /api/Todo/{id} çağrısı yapar.

  6. Sonra, ile donatılmış yöntemi bulun [HttpDelete("{id}")] ve küme ayraçları içindeki kodu ile değiştirin:

    var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
    return new NoContentResult();
    

    İlk satır, arka uç API uygulamasına bir DELETE /api/Todo/{id} çağrısı yapar.

  7. Yaptığınız tüm değişiklikleri kaydedin. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:

    git add .
    git commit -m "call back-end API"
    git push frontend main
    

Değişikliklerinizi kontrol edin

  1. http://<front-end-app-name>.azurewebsites.net sayfasına gidip from front end 1 ve from front end 2 gibi birkaç öğe ekleyin.

  2. Ön uç uygulamasından eklenen öğeleri görmek için http://<back-end-app-name>.azurewebsites.net sayfasına gidin. Ayrıca, from back end 1 ve from back end 2 gibi birkaç öğe ekleyin ve ardından ön uç uygulamasını yenileyerek değişiklikleri yansıtıp yansıtmadığını görün.

    Bir tarayıcı penceresinde, ön uç uygulamasından eklenen öğelerle bir yapılacaklar listesi uygulaması gösteren bir Azure App Service REST API örneğinin ekran görüntüsü.

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

Bu adımda, iki uygulama için kimlik doğrulama ve yetkilendirmeyi etkinleştireceksiniz. Ayrıca, arka uç uygulamasına kimliği doğrulanmış çağrılar yapmak için kullanabileceğiniz bir erişim belirteci oluşturacak şekilde ön uç uygulamasını yapılandıracaksınız.

Azure Active Directory’yi kimlik sağlayıcısı olarak kullanacaksınız. Daha fazla bilgi için bkz. Azure Active Directory kimlik doğrulamasını App Service uygulamanız için yapılandırma.

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

  1. Azure Portal menüsünde, kaynak grupları ' nı seçin veya herhangi bir sayfadan kaynak gruplarını arayıp seçin.

  2. Kaynak grupları' nda, kaynak grubunuzu bulun ve seçin. Genel bakış bölümünde arka uç uygulamanızın yönetim sayfasını seçin.

    Örnek bir kaynak grubu için Genel Bakış'ın ve bir arka uç uygulamasının yönetim sayfasının seçili olduğu Kaynak grupları penceresinin ekran görüntüsü.

  3. Arka uç uygulamanın sol menüsünde Kimlik Doğrulaması'nın ardından Kimlik sağlayıcısı ekle'ye tıklayın.

  4. Kimlik sağlayıcısı ekle sayfasında, Kimlik sağlayıcısı olarak Microsoft'u seçerek Microsoft ve Azure AD kimlikleri ile oturum açma.

  5. Varsayılan ayarları kabul edin ve Ekle'ye tıklayın.

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

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

    Depolama Azure Active Directory Ayarlar penceresinin ve Azure AD Uygulaması İstemci Kimliğini gösteren Azure AD Uygulamaları penceresinin ekran görüntüsü.

Burada durursanız, kimlik doğrulaması ve yetkilendirme için zaten güvenlik altına App Service uygulama olur. Kalan bölümlerde, kimliği doğrulanmış kullanıcının ön ucundan arka uça "akışını" sağlayarak çoklu uygulama çözümünün güvenliğini sağlamayı gösterir.

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

Ön uç uygulaması için de aynı adımları izleyin, ancak son adımı atlayın. Ön uç uygulaması için istemci kimliğine ihtiyacınız yok. Ancak, ön uç uygulamasının Kimlik doğrulaması sayfasında kalın çünkü bunu bir sonraki adımda kullanabilirsiniz.

İsterseniz http://<front-end-app-name>.azurewebsites.net sayfasına gidin. Şimdi güvenli oturum açma sayfasına yönlendirilmeniz gerekir. Oturum açma sonrasında arka uç uygulamasından verilere erişmeye devam edin çünkü arka uç uygulaması artık ön uç uygulamasından Azure Active Directory için oturum açma gerektirir. Üç şey yapmak gerekir:

  • Arka uca ön uç erişimi verme
  • App Service’i kullanılabilir bir belirteç döndürecek şekilde yapılandırma
  • Belirteci kodunuzda kullanma

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

Arka uca ön uç uygulaması 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. Bu adımda, ön uç uygulamasına kullanıcı adına arka uca erişme izni vereceksiniz. (Teknik açıdan, ön ucun AD uygulamasına arka ucun AD uygulaması için erişim izinleri vereceksiniz.)

  1. Ön uç uygulamasının Kimlik doğrulama sayfasında, Kimlik sağlayıcısı altında ön uç uygulama adı'nızı seçin. Bu uygulama kaydı sizin için otomatik olarak oluşturulmuş. Sol menüden API izinleri'ne tıklayın.

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

  3. Arka uç uygulamasının API izinleri isteği sayfasında Temsilcili izinler'i seçin ve user_impersonation izin ekle'yi seçin.

    Temsilcili izinler, izinler ve İzin ekle düğmesinin user_impersonation API izinleri isteği 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 sahip. Bu adımda, App Service kimlik doğrulaması ve yetkilendirmesini, arka uca 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ının kimlik doğrulamasını ve yetkilendirmesini etkinleştir'den kopyalanan arka uç istemci kimliğine ihtiyacınız vardır.

Aşağıdaki Cloud Shell ön uç uygulamasında aşağıdaki komutları çalıştırarak parametresini scope kimlik doğrulama ayarına identityProviders.azureActiveDirectory.login.loginParameters ekleyin. ve <front-end-app-name> yerine <back-end-client-id> .

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

Komutları etkili bir şekilde ek loginParameters özel kapsamlar ile bir özellik ekler. İstenen kapsamların açıklaması şu şekildedir:

  • openid, profile , ve varsayılan olarak App Service tarafından zaten email istenen. Bilgi için bkz. OpenID Bağlan Kapsamları.
  • api://<back-end-client-id>/user_impersonation , arka uç uygulama kaydınıza açık bir API'dir. Belirteç hedef kitlesi olarak arka uç uygulamasını içeren bir JWT belirteci veren kapsamdır.
  • offline_access kolaylık sağlamak için buraya dahil edilir (belirteçleri yenilemek istemeniz durumunda).

İpucu

  • Kapsamda kapsamı görüntülemek Azure portal 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 api://<back-end-client-id>/user_impersonation menüden API'yi açığa çıkar'a tıklayın.
  • Bunun yerine bir web arabirimi kullanarak gerekli kapsamları yapılandırmak için Kimlik doğrulama belirteçlerini yenileme makalesi microsoft adımlarına bakın.
  • Bazı kapsamlar için yönetici veya kullanıcı onayı gerekir. Bu gereksinim, bir kullanıcı tarayıcıda ön uç uygulamasında oturum açınca onay isteği sayfasının görüntülenebilir. Bu onay sayfasından kaçınmak için, İstemci uygulaması ekle'ye tıklayarak ve ön uç uygulama kaydının istemci kimliğini silerek API'yi gösterme sayfasında ön uç uygulama kaydını yetkili istemci uygulaması olarak ekleyin.

Not

Linux uygulamaları için, arka uç uygulama kaydı için sürüm ayarı yapılandırmaya geçici bir gereksinim vardır. Komut Cloud Shell aşağıdaki komutlarla yapılandırabilirsiniz. yerine arka uç <back-end-client-id> istemcinizin istemci kimliğini de değiştirilebilir.

id=$(az ad app show --id <back-end-client-id> --query objectId --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}" 

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

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

Sunucu kodundan güvenli bir şekilde API çağırma

Bu adımda, daha önce değiştirdiğiniz sunucu kodunu etkinleştirerek arka uç API’sine kimliği doğrulanmış çağrılar yapacaksınız.

Ön uç uygulamanız artık gerekli izinlere sahip ve oturum açma parametrelerine arka uç istemci kimliğini de ekler. Bu nedenle, arka uç uygulaması ile kimlik doğrulaması için bir erişim belirteci elde edebilirsiniz. App Service, kimliği doğrulanmış her bir isteğe bir X-MS-TOKEN-AAD-ACCESS-TOKEN üst bilgisi ekleyerek sunucu kodunuza bu belirteci sağlar (bkz. Uygulama kodunda belirteçleri alma).

Not

Bu üst bilgiler desteklenen tüm diller için eklenir. Üst bilgilere ilgili her dil için standart deseni kullanarak erişebilirsiniz.

  1. Yerel depoda Controllers/TodoController.cs dosyasını yeniden açın. TodoController(TodoContext context) oluşturucusu altında aşağıdaki kodu ekleyin:

    public override void OnActionExecuting(ActionExecutingContext context)
    {
        base.OnActionExecuting(context);
    
        _client.DefaultRequestHeaders.Accept.Clear();
        _client.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
    }
    

    Bu kod, standart Authorization: Bearer <access-token> HTTP üst bilgisini tüm uzak API çağrılarına ekler. MVC ASP.NET Core işlem hattında ilgili eylemden hemen önce yürütülür, dolayısıyla giden API çağrınız OnActionExecuting şimdi erişim belirteci gösterir.

  2. Yaptığınız tüm değişiklikleri kaydedin. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:

    git add .
    git commit -m "add authorization header for server code"
    git push frontend main
    
  3. https://<front-end-app-name>.azurewebsites.net oturumunu yeniden açın. Kullanıcı veri kullanımı sözleşmesi sayfasında Kabul Et’e tıklayın.

    Artık daha önce olduğu gibi arka uç uygulamanızdan verileri oluşturabilir, okuyabilir, güncelleştirebilir ve silebilirsiniz. Şimdiki tek fark, her iki uygulamanın da, hizmetten hizmete çağrılar dahil olmak üzere, App Service kimlik doğrulama ve yetkilendirmesi ile güvenli hale getirilmesidir.

Tebrikler! Sunucu kodunuz artık kimliği doğrulanmış kullanıcı adına arka uç verilerine erişir.

Tarayıcı kodundan güvenli bir şekilde API çağırma

Bu adımda, ön uç Angular.js uygulamasını arka uç API’sine yönlendireceksiniz. Bu şekilde, erişim belirtecini nasıl alacağınızı ve onu kullanarak arka uç uygulamasına API çağrılarını nasıl yapacağınızı öğreneceksiniz.

Sunucu kodu istek üst bilgilerine erişebilse de, istemci kodu aynı erişim belirteçlerini almak için GET /.auth/me erişimine sahiptir (bkz. Uygulama kodunda belirteçleri alma).

İpucu

Bu bölümde güvenli HTTP çağrılarını göstermek için standart HTTP yöntemleri kullanılır. Ancak, uygulama desenini basitleştirmeye yardımcı olmak için JavaScript için Microsoft Angular.js kitaplığını kullanabilirsiniz.

CORS Yapılandırma

Komut Cloud Shell komutunu kullanarak istemcinizin URL'sinde CORS'yi az webapp cors add etkinleştirin. ve yer <back-end-app-name> <front-end-app-name> tutucularını değiştirin.

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Bu adım, kimlik doğrulama ve yetkilendirme ile ilgili değildir. Ancak, tarayıcınızın Angular.js uygulamanızdan etki alanları arası API çağrılarına izin vermesi için gereklidir. Daha fazla bilgi için bkz. CORS işlevselliği ekleme.

Angular.js uygulamasını arka uç API’sine yönlendirme

  1. Yerel depoda wwwroot/index.html dosyasını açın.

  2. Satır 51'de, apiEndpoint değişkenini arka uç uygulamanın HTTPS URL'si () olarak https://<back-end-app-name>.azurewebsites.net ayarlayın. yerine <back-end-app-name> uygulama adı App Service.

  3. Yerel depoda wwwroot/app/scripts/todoListSvc.js dosyasını açıp tüm API çağrılarının başına apiEndpoint ekinin getirildiğini görün. Angular.js uygulamanız artık arka uç API'lerini çağırır.

API çağrılarına erişim belirteci ekleme

  1. wwwroot/app/scripts/todoListSvc.js dosyasındaki API çağrıları listesinin üstünde (getItems : function(){. satırın üzerinde) listeye aşağıdaki işlevi ekleyin:

    setAuth: function (token) {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    },
    

    Bu işlev, erişim belirteci ile birlikte varsayılan Authorization üst bilgisini ayarlamak için çağrılır. Sonraki adımda bu belirteci çağıracaksınız.

  2. Yerel depoda wwwroot/app/scripts/app.js dosyasını açıp aşağıdaki kodu bulun:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
    }).otherwise({ redirectTo: "/Home" });
    
  3. Tüm kod bloğunu aşağıdaki kod ile değiştirin:

    $routeProvider.when("/Home", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
        resolve: {
            token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
                return $http.get('/.auth/me').then(function (response) {
                    todoListSvc.setAuth(response.data[0].access_token);
                    return response.data[0].access_token;
                });
            }]
        },
    }).otherwise({ redirectTo: "/Home" });
    

    Yeni değişiklik, /.auth/me çağrısını yapıp erişim belirtecini ayarlayan resolve eşlemesini ekler. todoListCtrl denetleyicisinin örneğini oluşturmadan önce erişim belirtecine sahip olduğunuzdan emin olur. Bu şekilde, denetleyicinin yaptığı tüm API çağrıları belirteci içerir.

Güncelleştirmeleri dağıtma ve test etme

  1. Yaptığınız tüm değişiklikleri kaydedin. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:

    git add .
    git commit -m "add authorization header for Angular"
    git push frontend main
    
  2. https://<front-end-app-name>.azurewebsites.net sayfasına yeniden gidin. Artık doğrudan Angular.js uygulamasında veri oluşturabilir, okuyabilir, güncelleştirebilir ve silebilirsiniz.

Tebrikler! İstemci kodunuz artık kimliği doğrulanmış kullanıcı adına arka uç verilerine erişir.

Erişim belirteçlerinin sona erme zamanı

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

Kaynakları temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --name myAuthResourceGroup

Bu komutun çalıştırılması bir dakika sürebilir.

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
  • Azure Active Directory’yi kimlik sağlayıcısı olarak 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
  • İstemci (tarayıcı) kodundan erişim belirteçleri kullanma

Özel bir DNS adını uygulamanıza eşlemeyi öğrenmek için sonraki öğreticiye ilerleyin.