Öğretici: Azure App Service’te kullanıcıların kimliğini doğrulama ve kullanıcıları uçtan uca yetkilendirmeTutorial: Authenticate and authorize users end-to-end in Azure App Service

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan bir web barındırma hizmeti sunar.Azure App Service provides a highly scalable, self-patching web hosting service. Ayrıca, App Service kullanıcı kimlik doğrulaması ve yetkilendirmesi için yerleşik destek sunar.In addition, App Service has built-in support for user authentication and authorization. Bu öğreticide, App Service kimlik doğrulaması ve yetkilendirmesi ile uygulamalarınızın nasıl güvenli hale getirileceği gösterilmektedir.This tutorial shows how to secure your apps with App Service authentication and authorization. Yalnızca bir örnek olarak, Angular.js ön ucu ile birlikte bir ASP.NET Core uygulaması kullanılmaktadır.It uses an ASP.NET Core app with an Angular.js front end, but it is only for an example. 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.App Service authentication and authorization support all language runtimes, and you can learn how to apply it to your preferred language by following the tutorial.

Öğretici, kendi içindeki bir uygulamanın güvenliğini sağlama işlemini göstermek için örnek uygulamayı kullanır (Arka uç uygulaması içn kimlik doğrulaması ve yetkilendirmeyi etkinleştirme içinde).The tutorial uses the sample app to show you how to secure a self-contained app (in Enable authentication and authorization for back-end app).

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.It also shows you how to secure a multi-tiered app, by accessing a secured back-end API on behalf of the authenticated user, both from server code and from browser code.

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.These are only some of the possible authentication and authorization scenarios in App Service.

Öğreticide bilgi edineceğiniz konuların daha kapsamlı bir listesi aşağıda verilmiştir:Here's a more comprehensive list of things you learn in the tutorial:

  • Yerleşik kimlik doğrulaması ve yetkilendirmeyi etkinleştirmeEnable built-in authentication and authorization
  • Kimliği doğrulanmamış isteklere karşı uygulamaların güvenliğini sağlamaSecure apps against unauthenticated requests
  • Azure Active Directory’yi kimlik sağlayıcısı olarak kullanmaUse Azure Active Directory as the identity provider
  • Oturum açmış kullanıcının adına uzak bir uygulamaya erişmeAccess a remote app on behalf of the signed-in user
  • Belirteç kimlik doğrulaması ile hizmetten hizmete güvenli çağrılarSecure service-to-service calls with token authentication
  • Sunucu kodundan erişim belirteçleri kullanmaUse access tokens from server code
  • İstemci (tarayıcı) kodundan erişim belirteçleri kullanmaUse access tokens from client (browser) code

Bu öğreticideki adımları MacOS, Linux ve Windows üzerinde izleyebilirsiniz.You can follow the steps in this tutorial on macOS, Linux, Windows.

Yoksa bir Azure aboneliği, oluşturun bir ücretsiz bir hesap başlamadan önce.If you don't have an Azure subscription, create a free account before you begin.

ÖnkoşullarPrerequisites

Bu öğreticiyi tamamlamak için:To complete this tutorial:

Yerel .NET Core uygulaması oluşturmaCreate local .NET Core app

Bu adımda, yerel .NET Core projesini ayarlarsınız.In this step, you set up the local .NET Core project. Bir arka uç API uygulaması ile ön uç web uygulamasını dağıtmak için aynı projeyi kullanırsınız.You use the same project to deploy a back-end API app and a front-end web app.

Örnek uygulamayı kopyalama ve çalıştırmaClone and run the sample application

Örnek depoyu kopyalamak ve çalıştırmak için aşağıdaki komutları çalıştırın.Run the following commands to clone the sample repository and run it.

git clone https://github.com/Azure-Samples/dotnet-core-api
cd dotnet-core-api
dotnet run

http://localhost:5000 sayfasına gidip todo öğeleri ekleme, düzenleme ve kaldırma işlemlerini deneyin.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

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

ASP.NET Core’u dilediğiniz zaman durdurmak için, terminalde Ctrl+C tuşlarına basın.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Azure Cloud Shell kullanmaUse Azure Cloud Shell

Azure, Azure Cloud Shell, tarayıcınız üzerinden kullanabileceğiniz bir etkileşimli Kabuk ortamını barındırır.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell'i ya da kullanmanıza imkan tanır bash veya PowerShell Azure hizmetleriyle çalışmak için.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Cloud Shell önceden yüklenmiş komutları, yerel ortamınızda herhangi bir yükleme gerekmeden bu makaledeki kodu çalıştırmak için kullanabilirsiniz.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell'i başlatmak için:To launch Azure Cloud Shell:

SeçenekOption Örnek/bağlantıExample/Link
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin.Select Try It in the upper-right corner of a code block. Seçme deneyin kod Cloud Shell için otomatik olarak kopyalamaz.Selecting Try It doesn't automatically copy the code to Cloud Shell. Örneği Azure Cloud Shell için deneyin
Git https://shell.azure.com veya Cloud Shell'i Başlat Cloud Shell, tarayıcınızda açmak için düğmeyi.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. <a href="https://shell.azure.com" title="Azure Cloud Shell'i Başlat
Seçin Cloud Shell düğmesine sağ üst menü çubuğundaki Azure portalında.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure portaldaki Cloud Shell düğmesi

Bu makalede Azure Cloud shell'de kod çalıştırmak için:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell'i başlatın.Launch Cloud Shell.
  2. Seçin kopyalama kodu kopyalamak için bir kod bloğu üzerinde düğmesi.Select the Copy button on a code block to copy the code.
  3. Cloud Shell oturumla kodu yapıştırın Ctrl+Shift+V Windows ve Linux'ta veya Cmd + Shift+V macOS üzerinde.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Tuşuna Enter kodu çalıştırmak için.Press Enter to run the code.

Uygulamaları Azure'a dağıtmaDeploy apps to Azure

Bu adımda projeyi iki App Service uygulamasına dağıtacaksınız.In this step, you deploy the project to two App Service apps. Bunlardan biri ön uç uygulama, diğeri ise arka uç uygulamadır.One is the front-end app and the other is the back-end app.

Dağıtım kullanıcısı yapılandırmaConfigure a deployment user

FTP ve yerel Git için bir Azure web uygulaması kullanarak dağıtabilirsiniz bir dağıtım kullanıcısı.FTP and local Git can deploy to an Azure web app by using a deployment user. Dağıtım kullanıcı yapılandırdıktan sonra tüm Azure dağıtımlarınız için kullanabilirsiniz.Once you configure your deployment user, you can use it for all your Azure deployments. Hesap düzeyinde dağıtım kullanıcı adı ve parola, Azure aboneliği kimlik bilgilerinizden farklıdır.Your account-level deployment username and password are different from your Azure subscription credentials.

Dağıtım kullanıcısı yapılandırma için çalıştırın az webapp deployment kullanıcı kümesi Azure Cloud shell'de komutu.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Değiştirin <username > ve <parola > Dağıtım kullanıcı adı ve parola ile.Replace <username> and <password> with a deployment user username and password.

  • Kullanıcı adı Azure içinde benzersiz olmalıdır ve yerel Git için bildirim içermemelidir ' @' sembolü.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Parola en az sekiz karakter uzunluğunda olmalı, şu üç öğeyi sahip olmalıdır: harf, rakam ve semboller.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
az webapp deployment user set --user-name <username> --password <password>

Parola olarak JSON çıktısını gösterir null.The JSON output shows the password as null. 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin.If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Kullanıcı adı ve web uygulamalarınızı dağıtmak için kullanılacak parolayı kaydedin.Record your username and password to use to deploy your web apps.

Azure kaynakları oluşturmaCreate Azure resources

Cloud Shell’de iki web uygulaması oluşturmak için aşağıdaki komutları çalıştırın.In the Cloud Shell, run the following commands to create two web apps. <front_end_app_name> ve <back_end_app_name> değerlerini genel olarak benzersiz olan iki uygulama adı ile değiştirin (geçerli karakterler a-z, 0-9 ve -).Replace <front_end_app_name> and <back_end_app_name> with two globally unique app names (valid characters are a-z, 0-9, and -). Her bir komut hakkında daha fazla bilgi için bkz. Azure App Service’te CORS ile RESTful API’si.For more information on each command, see RESTful API with CORS in 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

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.Save the URLs of the Git remotes for your front-end app and back-end app, which are shown in the output from az webapp create.

Git üzerinden Azure'a göndermePush to Azure from Git

Yerel terminal penceresine geri dönerek, arka uç uygulamasına dağıtmak için aşağıdaki Git komutlarını çalıştırın.Back in the local terminal window, run the following Git commands to deploy to the back-end app. <deploymentLocalGitUrl-of-back-end-app> değerini, Azure kaynakları oluşturma bölümünde kaydettiğiniz Git uzak öğesine ait URL ile değiştirin.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Git Kimlik Bilgisi Yöneticisi kimlik bilgilerini sorduğunda, Azure portalında oturum açmak için kullandığınız kimlik bilgileri yerine dağıtım kimlik bilgilerini girdiğinizden emin olun.When prompted for credentials by Git Credential Manager, make sure that you enter your deployment credentials, not the credentials you use to log in to the Azure portal.

git remote add backend <deploymentLocalGitUrl-of-back-end-app>
git push backend master

Yerel terminal penceresinde aynı kodu ön uç uygulamasına dağıtmak için aşağıdaki Git komutlarını çalıştırın.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. <deploymentLocalGitUrl-of-front-end-app> değerini, Azure kaynakları oluşturma bölümünde kaydettiğiniz Git uzak öğesine ait URL ile değiştirin.Replace <deploymentLocalGitUrl-of-front-end-app> with the URL of the Git remote that you saved from Create Azure resources.

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

Uygulamalara GözatBrowse to the apps

Bir tarayıcıda aşağıdaki URL'lere gittiğinizde iki uygulamanın çalıştığını görebilirsiniz.Navigate to the following URLs in a browser and see the two apps working.

http://<back_end_app_name>.azurewebsites.net
http://<front_end_app_name>.azurewebsites.net

Azure App Service'te çalışan ASP.NET Core API'si

Not

Uygulamanız yeniden başlatılırsa, yeni verilerin silindiğini fark etmiş olabilirsiniz.If your app restarts, you may have noticed that new data has been erased. Örnek ASP.NET Core uygulaması bir bellek içi veritabanı kullandığından bu davranış tasarım gereğidir.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Ön uçtan arka uç API’si çağırmaCall back-end API from front end

Bu adımda, ön uç uygulamanın sunucu kodunu arka uç API’sine erişecek şekilde yönlendireceksiniz.In this step, you point the front-end app's server code to access the back-end API. Daha sonra, ön uçtan arka uca kimliği doğrulanmış erişimi etkinleştireceksiniz.Later, you enable authenticated access from the front end to the back end.

Ön uç kodunu değiştirmeModify front-end code

Yerel depoda Controllers/TodoController.cs dosyasını açın.In the local repository, open Controllers/TodoController.cs. TodoController sınıfının başına aşağıdaki satırları ekleyin ve <back_end_app_name> değerini arka uç uygulamanızın adıyla değiştirin:At the beginning of the TodoController class, add the following lines and replace <back_end_app_name> with the name of your back-end app:

private static readonly HttpClient _client = new HttpClient();
private static readonly string _remoteUrl = "https://<back_end_app_name>.azurewebsites.net";

GetAll() yöntemini bulun ve küme ayraçlarının içindeki kodu şununla değiştirin:Find the GetAll() method and replace the code inside the curly braces with:

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

İlk satır, arka uç API uygulamasına bir GET /api/Todo çağrısı yapar.The first line makes a GET /api/Todo call to the back-end API app.

Sonra, GetById(long id) yöntemini bulun ve küme ayraçlarının içindeki kodu şununla değiştirin:Next, find the GetById(long id) method and replace the code inside the curly braces with:

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

İlk satır, arka uç API uygulamasına bir GET /api/Todo/{id} çağrısı yapar.The first line makes a GET /api/Todo/{id} call to the back-end API app.

Sonra, Create([FromBody] TodoItem item) yöntemini bulun ve küme ayraçlarının içindeki kodu şununla değiştirin:Next, find the Create([FromBody] TodoItem item) method and replace the code inside the curly braces with:

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

İlk satır, arka uç API uygulamasına bir POST /api/Todo çağrısı yapar.The first line makes a POST /api/Todo call to the back-end API app.

Sonra, Update(long id, [FromBody] TodoItem item) yöntemini bulun ve küme ayraçlarının içindeki kodu şununla değiştirin:Next, find the Update(long id, [FromBody] TodoItem item) method and replace the code inside the curly braces with:

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

İlk satır, arka uç API uygulamasına bir PUT /api/Todo/{id} çağrısı yapar.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

Sonra, Delete(long id) yöntemini bulun ve küme ayraçlarının içindeki kodu şununla değiştirin:Next, find the Delete(long id) method and replace the code inside the curly braces with:

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

İlk satır, arka uç API uygulamasına bir DELETE /api/Todo/{id} çağrısı yapar.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Yaptığınız tüm değişiklikleri kaydedin.Save your all your changes. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

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

Değişikliklerinizi kontrol edinCheck your changes

http://<front_end_app_name>.azurewebsites.net sayfasına gidip from front end 1 ve from front end 2 gibi birkaç öğe ekleyin.Navigate to http://<front_end_app_name>.azurewebsites.net and add a few items, such as from front end 1 and from front end 2.

Ön uç uygulamasından eklenen öğeleri görmek için http://<back_end_app_name>.azurewebsites.net sayfasına gidin.Navigate to http://<back_end_app_name>.azurewebsites.net to see the items added from the front-end app. 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.Also, add a few items, such as from back end 1 and from back end 2, then refresh the front-end app to see if it reflects the changes.

Azure App Service'te çalışan ASP.NET Core API'si

Kimlik doğrulamasını yapılandırmaConfigure auth

Bu adımda, iki uygulama için kimlik doğrulama ve yetkilendirmeyi etkinleştireceksiniz.In this step, you enable authentication and authorization for the two apps. 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.You also configure the front-end app to generate an access token that you can use to make authenticated calls to the back-end app.

Azure Active Directory’yi kimlik sağlayıcısı olarak kullanacaksınız.You use Azure Active Directory as the identity provider. Daha fazla bilgi için bkz. Azure Active Directory kimlik doğrulamasını App Service uygulamanız için yapılandırma.For more information, see Configure Azure Active Directory authentication for your App Services application.

Arka uç uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştirmeEnable authentication and authorization for back-end app

İçinde Azure portalında, soldaki menüden tıklayarak arka uç uygulamanızın Yönetim sayfasını açın: Kaynak grupları > myAuthResourceGroup > <geri_son_uygulama_adı >.In the Azure portal, open your back-end app's management page by clicking from the left menu: Resource groups > myAuthResourceGroup > <back_end_app_name>.

Azure App Service'te çalışan ASP.NET Core API'si

Arka uç uygulamanızın soldaki menüsünde Kimlik doğrulaması / Yetkilendirme öğesine tıklayın, sonra da Açık’a tıklayarak App Service Kimlik Doğrulamasını etkinleştirin.In your back-end app's left menu, click Authentication / Authorization, then enable App Service Authentication by clicking On.

İsteğin kimliği doğrulanmamış olduğunda gerçekleştirilecek eylem menüsünde Azure Active Directory ile oturum aç’ı seçin.In Action to take when request is not authenticated, select Log in with Azure Active Directory.

Kimlik Doğrulama Sağlayıcıları altında Azure Active Directory’ye tıklayın.Under Authentication Providers, click Azure Active Directory

Azure App Service'te çalışan ASP.NET Core API'si

Hızlı’ya tıklayın, ardından yeni bir AD uygulaması oluşturmak için varsayılan ayarları kabul edip Tamam’a tıklayın.Click Express, then accept the default settings to create a new AD app and click OK.

Kimlik Doğrulaması / Yetkilendirme sayfasında Kaydet’e tıklayın.In the Authentication / Authorization page, click Save.

Successfully saved the Auth Settings for <back_end_app_name> App iletisini içeren bildirimi gördüğünüzde sayfayı yenileyin.Once you see the notification with the message Successfully saved the Auth Settings for <back_end_app_name> App, refresh the page.

Azure Active Directory’ye yeniden tıklayıp Uygulamayı Yönet’e tıklayın.Click Azure Active Directory again, and then click Manage Application.

AD uygulamasının yönetim sayfasından Uygulama Kimliği’ni bir not defterine kopyalayın.From the management page of the AD application, copy the Application ID to a notepad. Bu değer daha sonra gerekli olacaktır.You need this value later.

Azure App Service'te çalışan ASP.NET Core API'si

Ön uç uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştirmeEnable authentication and authorization for front-end app

Ön uç uygulaması için de aynı adımları izleyin, ancak son adımı atlayın.Follow the same steps for the front-end app, but skip the last step. Ön uç uygulaması için Uygulama Kimliği gerekli değildir.You don't need the Application ID for the front-end app. Azure Active Directory Ayarları sayfasını açık tutun.Keep the Azure Active Directory Settings page open.

İsterseniz http://<front_end_app_name>.azurewebsites.net sayfasına gidin.If you like, navigate to http://<front_end_app_name>.azurewebsites.net. Şimdi güvenli oturum açma sayfasına yönlendirilmeniz gerekir.It should now direct you to a secured sign-in page. Oturum açtıktan sonra hala yapmanız gereken üç işlem olduğu için, arka uç uygulamasından verilere erişemezsiniz:After you sign in, you still can't access the data from the back-end app, because you still need to do three things:

  • Arka uca ön uç erişimi vermeGrant the front end access to the back end
  • App Service’i kullanılabilir bir belirteç döndürecek şekilde yapılandırmaConfigure App Service to return a usable token
  • Belirteci kodunuzda kullanmaUse the token in your code

İ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.If you run into errors and reconfigure your app's authentication/authorization settings, the tokens in the token store may not be regenerated from the new settings. Belirteçlerinizin yeniden oluşturulduğundan emin olmak için oturumu kapatıp uygulamanızda yeniden oturum açmanız gerekir.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. 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.An easy way to do it is to use your browser in private mode, and close and reopen the browser in private mode after changing the settings in your apps.

Arka uca ön uç uygulaması erişimi vermeGrant front-end app access to back end

Her iki uygulamanızda da kimlik doğrulaması ve yetkilendirmeyi etkinleştirdikten sonra uygulamaların her biri bir AD uygulaması tarafından desteklenir.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. Bu adımda, ön uç uygulamasına kullanıcı adına arka uca erişme izni vereceksiniz.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Teknik açıdan, ön ucun AD uygulamasına arka ucun AD uygulaması için erişim izinleri vereceksiniz.)(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

Bu noktada, ön uç uygulamasının Azure Active Directory Ayarları sayfasında olmanız gerekir.At this point, you should be in the Azure Active Directory Settings page for the front-end app. Değilseniz, o sayfaya geri dönün.If not, go back to that page.

İzinleri Yönet > Ekle > API Seç öğesine tıklayın.Click Manage Permissions > Add > Select an API.

Azure App Service'te çalışan ASP.NET Core API'si

API Seç sayfasında, arka uç uygulamanızın varsayılan olarak arka uç uygulaması adıyla aynı olan AD uygulama adını girin.In the Select an API page, type the AD application name of your back-end app, which is the same as your back-end app name by default. Listeden seçim yapıp Seç’e tıklayın.Select it in the list and click Select.

Erişim <AD_application_name> seçeneğinin yanındaki onay kutusunu işaretleyin.Select the checkbox next to Access <AD_application_name>. Seç > Bitti’ye tıklayın.Click Select > Done.

Azure App Service'te çalışan ASP.NET Core API'si

App Service’i kullanılabilir bir erişim belirteci döndürecek şekilde yapılandırmaConfigure App Service to return a usable access token

Ön uç uygulama artık gerekli izinlere sahiptir.The front-end app now has the required permissions. 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.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Bu adım için, Arka uç uygulaması için kimlik doğrulama ve yetkilendirmeyi etkinleştirme bölümünden kopyaladığınız arka ucun Uygulama Kimliği gereklidir.For this step, you need the back end's Application ID, which you copied from Enable authentication and authorization for back-end app.

Azure Kaynak Gezgini’nde oturum açın.Sign in to Azure Resource Explorer. Sayfanın üst kısmındaki Oku/Yaz’a tıklayarak Azure kaynaklarınızın düzenlenmesini etkinleştirin.At the top of the page, click Read/Write to enable editing of your Azure resources.

Azure App Service'te çalışan ASP.NET Core API'si

Sol tarayıcıda abonelikler > <sizin_aboneliğiniz> > resourceGroups > myAuthResourceGroup > sağlayıcılar > Microsoft.Web > siteler > <ön_uç_uygulama_adı> > config > authsettings öğesine tıklayın.In the left browser, click subscriptions > <your_subscription> > resourceGroups > myAuthResourceGroup > providers > Microsoft.Web > sites > <front_end_app_name> > config > authsettings.

authsettings görünümünde Düzenle’ye tıklayın.In the authsettings view, click Edit. Kopyaladığınız Uygulama Kimliğini kullanarak aşağıdaki JSON dizesini additionalLoginParams olarak ayarlayın.Set additionalLoginParams to the following JSON string, using the Application ID you copied.

"additionalLoginParams": ["response_type=code id_token","resource=<back_end_application_id>"],

Azure App Service'te çalışan ASP.NET Core API'si

PUT öğesine tıklayarak ayarlarınızı kaydedin.Save your settings by clicking PUT.

Uygulamalarınız artık yapılandırılmıştır.Your apps are now configured. Ön uç artık doğru bir erişim belirteci ile arka uca erişmeye hazırdır.The front end is now ready to access the back end with a proper access token.

Bunu diğer sağlayıcılar için yapılandırma hakkında daha fazla bilgi için bkz: kimlik sağlayıcısı belirteçleri yenileme.For information on how to configure this for other providers, see Refresh identity provider tokens.

Sunucu kodundan güvenli bir şekilde API çağırmaCall API securely from server code

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.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

Ön uç uygulamanız artık gerekli izne sahiptir ve aynı zamanda arka ucun Uygulama Kimliği oturum açma parametrelerine ekler.Your front-end app now has the required permission and also adds the back end's Application ID to the login parameters. Bu nedenle, arka uç uygulaması ile kimlik doğrulaması için bir erişim belirteci elde edebilirsiniz.Therefore, it can obtain an access token for authentication with the back-end app. 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).App Service supplies this token to your server code by injecting a X-MS-TOKEN-AAD-ACCESS-TOKEN header to each authenticated request (see Retrieve tokens in app code).

Not

Bu üst bilgiler desteklenen tüm diller için eklenir.These headers are injected for all supported languages. Üst bilgilere ilgili her dil için standart deseni kullanarak erişebilirsiniz.You access them using the standard pattern for each respective language.

Yerel depoda Controllers/TodoController.cs dosyasını yeniden açın.In the local repository, open Controllers/TodoController.cs again. TodoController(TodoContext context) oluşturucusu altında aşağıdaki kodu ekleyin:Under the TodoController(TodoContext context) constructor, add the following code:

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.This code adds the standard HTTP header Authorization: Bearer <access_token> to all remote API calls. ASP.NET Core MVC istek yürütme işlem hattında OnActionExecuting, ilgili eylem yönteminden (GetAll() gibi) hemen önce yürütülür; bu nedenle giden API çağrınız artık erişim belirtecini sunar.In the ASP.NET Core MVC request execution pipeline, OnActionExecuting executes just before the respective action method (such as GetAll()) does, so each of your outgoing API call now presents the access token.

Yaptığınız tüm değişiklikleri kaydedin.Save your all your changes. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for server code"
git push frontend master

https://<front_end_app_name>.azurewebsites.net oturumunu yeniden açın.Sign in to https://<front_end_app_name>.azurewebsites.net again. Kullanıcı veri kullanımı sözleşmesi sayfasında Kabul Et’e tıklayın.At the user data usage agreement page, click Accept.

Artık daha önce olduğu gibi arka uç uygulamanızdan verileri oluşturabilir, okuyabilir, güncelleştirebilir ve silebilirsiniz.You should now be able to create, read, update, and delete data from the back-end app as before. Ş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.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Tebrikler!Congratulations! Sunucu kodunuz artık kimliği doğrulanmış kullanıcı adına arka uç verilerine erişir.Your server code is now accessing the back-end data on behalf of the authenticated user.

Tarayıcı kodundan güvenli bir şekilde API çağırmaCall API securely from browser code

Bu adımda, ön uç Angular.js uygulamasını arka uç API’sine yönlendireceksiniz.In this step, you point the front-end Angular.js app to the back-end API. 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.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

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).While the server code has access to request headers, client code can access GET /.auth/me to get the same access tokens (see Retrieve tokens in app code).

İpucu

Bu bölümde güvenli HTTP çağrılarını göstermek için standart HTTP yöntemleri kullanılır.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. Ancak, Angular.js uygulama desenini kolaylaştırmaya yardımcı olmak üzere JavaScript için Active Directory Authentication Library (ADAL) kullanabilirsiniz.However, you can use Active Directory Authentication Library (ADAL) for JavaScript to help simplify the Angular.js application pattern.

CORS YapılandırmaConfigure CORS

Cloud Shell'de, az resource update komutunu kullanarak istemcinizin URL'sinde CORS'yi etkinleştirin.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. <back_end_app_name> ve <front_end_app_name> yer tutucularını değiştirin.Replace the <back_end_app_name> and <front_end_app_name> placeholders.

az resource update --name web --resource-group myAuthResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<back_end_app_name> --set properties.cors.allowedOrigins="['https://<front_end_app_name>.azurewebsites.net']" --api-version 2015-06-01

Bu adım, kimlik doğrulama ve yetkilendirme ile ilgili değildir.This step is not related to authentication and authorization. Ancak, tarayıcınızın Angular.js uygulamanızdan etki alanları arası API çağrılarına izin vermesi için gereklidir.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. Daha fazla bilgi için bkz. CORS işlevselliği ekleme.For more information, see Add CORS functionality.

Angular.js uygulamasını arka uç API’sine yönlendirmePoint Angular.js app to back-end API

Yerel depoda wwwroot/index.html dosyasını açın.In the local repository, open wwwroot/index.html.

51. satırda, apiEndpoint değişkenini arka uç uygulamanızın URL'sine (https://<back_end_app_name>.azurewebsites.net) ayarlayın.In Line 51, set the apiEndpoint variable to the URL of your back-end app (https://<back_end_app_name>.azurewebsites.net). <back_end_app_name> değerini App Service’teki uygulamanızın adıyla değiştirin.Replace <back_end_app_name> with your app name in App Service.

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.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. Angular.js uygulamanız artık arka uç API'lerini çağırır.Your Angular.js app is now calling the back-end APIs.

API çağrılarına erişim belirteci eklemeAdd access token to API calls

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:In wwwroot/app/scripts/todoListSvc.js, above the list of API calls (above the line getItems : function(){), add the following function to the list:

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.This function is called to set the default Authorization header with the access token. Sonraki adımda bu belirteci çağıracaksınız.You call it in the next step.

Yerel depoda wwwroot/app/scripts/app.js dosyasını açıp aşağıdaki kodu bulun:In the local repository, open wwwroot/app/scripts/app.js and find the following code:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
}).otherwise({ redirectTo: "/Home" });

Tüm kod bloğunu aşağıdaki kod ile değiştirin:Replace the entire code block with the following code:

$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 revolve eşlemesini ekler.The new change adds the revolve mapping that calls /.auth/me and sets the access token. todoListCtrl denetleyicisinin örneğini oluşturmadan önce erişim belirtecine sahip olduğunuzdan emin olur.It makes sure you have the access token before instantiating the todoListCtrl controller. Bu şekilde, denetleyicinin yaptığı tüm API çağrıları belirteci içerir.That way all API calls by the controller includes the token.

Güncelleştirmeleri dağıtma ve test etmeDeploy updates and test

Yaptığınız tüm değişiklikleri kaydedin.Save your all your changes. Yerel terminal penceresinde, ön uç uygulamasında yaptığınız değişiklikleri aşağıdaki Git komutları ile dağıtın:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for Angular"
git push frontend master

https://<front_end_app_name>.azurewebsites.net sayfasına yeniden gidin.Navigate to https://<front_end_app_name>.azurewebsites.net again. Artık doğrudan Angular.js uygulamasında veri oluşturabilir, okuyabilir, güncelleştirebilir ve silebilirsiniz.You should now be able to create, read, update, and delete data from the back-end app, directly in the Angular.js app.

Tebrikler!Congratulations! İstemci kodunuz artık kimliği doğrulanmış kullanıcı adına arka uç verilerine erişir.Your client code is now accessing the back-end data on behalf of the authenticated user.

Erişim belirteçlerinin sona erme zamanıWhen access tokens expire

Erişim belirtecinizin süresi bir süre sonra sona erer.Your access token expires after some time. Kullanıcıların uygulamanızla birlikte yeniden kimlik doğrulamaya zorlayabilir gerek kalmadan, erişim belirteçleri yenileme hakkında daha fazla bilgi için bkz: kimlik sağlayıcısı belirteçleri yenileme.For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Kaynakları temizlemeClean up resources

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.In the preceding steps, you created Azure resources in a resource group. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myAuthResourceGroup

Bu komutun çalıştırılması bir dakika sürebilir.This command may take a minute to run.

Sonraki adımlarNext steps

Öğrendikleriniz:What you learned:

  • Yerleşik kimlik doğrulaması ve yetkilendirmeyi etkinleştirmeEnable built-in authentication and authorization
  • Kimliği doğrulanmamış isteklere karşı uygulamaların güvenliğini sağlamaSecure apps against unauthenticated requests
  • Azure Active Directory’yi kimlik sağlayıcısı olarak kullanmaUse Azure Active Directory as the identity provider
  • Oturum açmış kullanıcının adına uzak bir uygulamaya erişmeAccess a remote app on behalf of the signed-in user
  • Belirteç kimlik doğrulaması ile hizmetten hizmete güvenli çağrılarSecure service-to-service calls with token authentication
  • Sunucu kodundan erişim belirteçleri kullanmaUse access tokens from server code
  • İstemci (tarayıcı) kodundan erişim belirteçleri kullanmaUse access tokens from client (browser) code

Web uygulamanıza özel bir DNS adı eşlemeyle ilgili bilgi edinmek için sonraki öğreticiye geçin.Advance to the next tutorial to learn how to map a custom DNS name to your web app.