Öğ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.

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.

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.
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
Ö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 runhttp://localhost:5000sayfasına gidip todo öğeleri ekleme, düzenleme ve kaldırma işlemlerini deneyin.
ASP.NET Core durdurmak için
Ctrl+Cterminalde tuşuna basın.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österirmain. 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
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_BRANCHuygulama ayarınıaz webapp config appsettings setkomutuyla 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=mainYerel 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 mainYerel 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
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
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";İ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.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.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.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.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.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
http://<front-end-app-name>.azurewebsites.netsayfasına gidipfrom front end 1vefrom front end 2gibi birkaç öğe ekleyin.Ön uç uygulamasından eklenen öğeleri görmek için
http://<back-end-app-name>.azurewebsites.netsayfasına gidin. Ayrıca,from back end 1vefrom back end 2gibi birkaç öğe ekleyin ve ardından ön uç uygulamasını yenileyerek değişiklikleri yansıtıp yansıtmadığını görün.
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
Azure Portal menüsünde, kaynak grupları ' nı seçin veya herhangi bir sayfadan kaynak gruplarını arayıp seçin.
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.
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.
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.
Varsayılan ayarları kabul edin ve Ekle'ye tıklayın.
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.
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.)
Ö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.
İzin ekle'yi ve ardından API'lerim'i > <back-end-app-name> seçin.
Arka uç uygulamasının API izinleri isteği sayfasında Temsilcili izinler'i seçin ve user_impersonation izin 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 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 zatenemailistenen. 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_impersonationmenü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.
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ızOnActionExecutingşimdi erişim belirteci gösterir.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 mainhttps://<front-end-app-name>.azurewebsites.netoturumunu 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
Yerel depoda wwwroot/index.html dosyasını açın.
Satır 51'de,
apiEndpointdeğişkenini arka uç uygulamanın HTTPS URL'si () olarakhttps://<back-end-app-name>.azurewebsites.netayarlayın. yerine <back-end-app-name> uygulama adı App Service.Yerel depoda wwwroot/app/scripts/todoListSvc.js dosyasını açıp tüm API çağrılarının başına
apiEndpointekinin 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
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.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" });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 ayarlayanresolveeşlemesini ekler.todoListCtrldenetleyicisinin ö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
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 mainhttps://<front-end-app-name>.azurewebsites.netsayfası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.
