Oktatóanyag: Felhasználók hitelesítése és engedélyezése végpontok között az Azure App Service-benTutorial: Authenticate and authorize users end-to-end in Azure App Service

Az Azure App Service egy hatékonyan méretezhető, önjavító webes üzemeltetési szolgáltatás.Azure App Service provides a highly scalable, self-patching web hosting service. Az App Service továbbá beépített támogatást nyújt a felhasználók hitelesítéséhez és engedélyezéséhez.In addition, App Service has built-in support for user authentication and authorization. Ebből az oktatóanyagból megtudhatja, hogyan gondoskodhat az alkalmazások védelméről az App Service-hitelesítés és -engedélyezés segítségével.This tutorial shows how to secure your apps with App Service authentication and authorization. Egy ASP.NET Core alkalmazást használ, amely egy Angular.js előtéri példát mutat be.It uses a ASP.NET Core app with an Angular.js front end as an example. Az App Service-hitelesítés és -engedélyezés támogatja az összes nyelvi futtatókörnyezetet, Ön pedig az oktatóanyag elvégzésével megismerheti, hogyan alkalmazhatja ezt a kívánt nyelvre.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.

A Azure app Service a Linux operációs rendszer használatával jól méretezhető, önjavító webes üzemeltetési szolgáltatást nyújt.Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. Az App Service továbbá beépített támogatást nyújt a felhasználók hitelesítéséhez és engedélyezéséhez.In addition, App Service has built-in support for user authentication and authorization. Ebből az oktatóanyagból megtudhatja, hogyan gondoskodhat az alkalmazások védelméről az App Service-hitelesítés és -engedélyezés segítségével.This tutorial shows how to secure your apps with App Service authentication and authorization. Egy ASP.NET Core alkalmazást használ, amely egy Angular.js előtéri példát mutat be.It uses an ASP.NET Core app with an Angular.js front end as an example. Az App Service-hitelesítés és -engedélyezés támogatja az összes nyelvi futtatókörnyezetet, Ön pedig az oktatóanyag elvégzésével megismerheti, hogyan alkalmazhatja ezt a kívánt nyelvre.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.

Egyszerű hitelesítés és engedélyezés

Azt is bemutatja, hogyan gondoskodhat egy többrétegű alkalmazás védelméről egy védett háttérrendszeri API a hitelesített felhasználó nevében történő elérésével mind a kiszolgálói kódból, mind a böngészőkódból.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.

Speciális hitelesítés és engedélyezés

Ez mindössze néhány az App Service-ben elérhető összes lehetséges hitelesítési és engedélyezési eljárás közül.These are only some of the possible authentication and authorization scenarios in App Service.

Az alábbi lista az oktatóanyagban ismertetett témaköröket tartalmazza:Here's a more comprehensive list of things you learn in the tutorial:

  • Beépített hitelesítés és engedélyezés engedélyezéseEnable built-in authentication and authorization
  • Alkalmazások biztonságossá tétele a nem hitelesített kérelmek ellenSecure apps against unauthenticated requests
  • Az Azure Active Directory használata identitásszolgáltatókéntUse Azure Active Directory as the identity provider
  • Távoli alkalmazás elérése a bejelentkezett felhasználó nevébenAccess a remote app on behalf of the signed-in user
  • Biztonságos szolgáltatások közötti hívások jogkivonat-hitelesítésselSecure service-to-service calls with token authentication
  • Hozzáférési kódok használata kiszolgálói kódbólUse access tokens from server code
  • Hozzáférési kódok használata az ügyfél (böngésző) kódjábólUse access tokens from client (browser) code

Az oktatóanyag lépései macOS, Linux és Windows rendszerre is vonatkoznak.You can follow the steps in this tutorial on macOS, Linux, Windows.

Ha nem rendelkezik Azure- előfizetéssel, a Kezdés előtt hozzon létre egy ingyenes fiókot .If you don't have an Azure subscription, create a free account before you begin.

ElőfeltételekPrerequisites

Az oktatóanyag elvégzéséhez:To complete this tutorial:

Helyi .NET Core-alkalmazás létrehozásaCreate local .NET Core app

Ebben a lépésben a helyi .NET Core-projektet állíthatja be.In this step, you set up the local .NET Core project. Ugyanezen projekt használatával telepít egy háttérrendszeri API-alkalmazást és egy előtér-webalkalmazást.You use the same project to deploy a back-end API app and a front-end web app.

A mintaalkalmazás klónozása és futtatásaClone and run the sample application

Az alábbi parancsok futtatásával klónozza, majd futtassa a mintaadattárat.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

Navigáljon ide: http://localhost:5000, majd adja hozzá, szerkessze vagy távolítsa el a teendőket.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

Helyileg futó ASP.NET Core API

Ha bármikor le szeretné állítani az ASP.NET Core-t, nyomja le a Ctrl+C billentyűkombinációt a terminálon.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Alkalmazások telepítése az Azure-baDeploy apps to Azure

Ebben a lépésben üzembe helyezi a projektet két App Service-alkalmazásban.In this step, you deploy the project to two App Service apps. Az egyik az előtéri, a másik a háttéralkalmazás.One is the front-end app and the other is the back-end app.

Üzembe helyező felhasználó konfigurálásaConfigure a deployment user

Az FTP és a helyi git egy üzembe helyezési felhasználó használatával üzembe helyezhető egy Azure-webalkalmazásban.FTP and local Git can deploy to an Azure web app by using a deployment user. Miután konfigurálta az üzembe helyezési felhasználót, használhatja azt az összes Azure-környezetben.Once you configure your deployment user, you can use it for all your Azure deployments. A fiók szintű központi telepítési felhasználóneve és jelszava eltér az Azure-előfizetés hitelesítő adataitól.Your account-level deployment username and password are different from your Azure subscription credentials.

Az üzembe helyezési felhasználó konfigurálásához futtassa az az WebApp Deployment User set parancsot a Azure Cloud shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Cserélje <username> le <password> a és a értékét egy üzembe helyezési felhasználói felhasználónévre és jelszóra.Replace <username> and <password> with a deployment user username and password.

  • A felhasználónévnek egyedinek kell lennie az Azure-ban, a git-leküldések pedig nem tartalmazhatják a (z) " @ " szimbólumot.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • A jelszónak legalább nyolc karakterből kell állnia, és a következő három elem közül kettőnek kell lennie: betűk, számok és szimbólumok.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>

A JSON-kimenet a jelszót jeleníti meg null .The JSON output shows the password as null. 'Conflict'. Details: 409 hibaüzenet esetén változtassa meg a felhasználónevet.If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 hibaüzenet esetén használjon erősebb jelszót.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Jegyezze fel a felhasználónevet és a jelszót a webalkalmazások üzembe helyezéséhez.Record your username and password to use to deploy your web apps.

Azure-erőforrások létrehozásaCreate Azure resources

A Cloud Shellban futtassa a következő parancsokat két Windows-alapú webalkalmazás létrehozásához.In the Cloud Shell, run the following commands to create two Windows web apps. Cserélje le <front-end-app-name> és <back-end-app-name> két globálisan egyedi alkalmazás-névvel (érvényes karakterek:, a-z 0-9 és - ).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). A parancsokról további információt talál a CORS-támogatással rendelkező RESTful API üzemeltetése az Azure App Service-ben című szakaszban.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

A Cloud Shellben futtassa a következő parancsokat két webalkalmazás létrehozásához.In the Cloud Shell, run the following commands to create two web apps. Cserélje le <front-end-app-name> és <back-end-app-name> két globálisan egyedi alkalmazás-névvel (érvényes karakterek:, a-z 0-9 és - ).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Az egyes parancsokkal kapcsolatos további információkért lásd: .net Core-alkalmazás létrehozása Azure app Serviceban.For more information on each command, see Create a .NET Core app in Azure App Service.

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

Megjegyzés

Mentse a távoli Git-elemek URL-címeit az előtér- és a háttéralkalmazás esetében. Ezek az az webapp create kimenetében láthatók.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.

Leküldéses üzenet küldése a Gitből az Azure-raPush to Azure from Git

A helyi terminálablakba visszalépve futtassa a következő Git-parancsokat a háttéralkalmazás telepítéséhez.Back in the local terminal window, run the following Git commands to deploy to the back-end app. Cserélje le az <deploymentLocalGitUrl-of-back-end-app> elemet az Azure-erőforrások létrehozásalehetőséggel mentett git-távirányító URL-címére.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Amikor a git Hitelesítőadat-kezelő kéri a hitelesítő adatok megadását, győződjön meg arról, hogy a központi telepítési hitelesítőadatokat adja meg, nem pedig a Azure Portalba való bejelentkezéshez használt hitelesítő adatokat.When prompted for credentials by Git Credential Manager, make sure that you enter your deployment credentials, not the credentials you use to sign in to the Azure portal.

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

A helyi terminálablakban futtassa a következő Git-parancsokat ugyanezen kódnak az előtér-alkalmazásba történő telepítéséhez.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. Cserélje le az <deploymentLocalGitUrl-of-front-end-app> elemet az Azure-erőforrások létrehozásalehetőséggel mentett git-távirányító URL-címére.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

Tallózással keresse meg az alkalmazásokatBrowse to the apps

Nyissa meg a következő URL-címeket egy böngészőben, és ellenőrizze a két alkalmazás működését.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

Képernyőkép egy Azure App Service REST API-mintáról egy böngészőablakban, amely a tennivalók listája alkalmazást jeleníti meg.

Megjegyzés

Ha az alkalmazás újraindul, láthatja, hogy az új adatok törölve lettek.If your app restarts, you may have noticed that new data has been erased. Ez az elvárt működés, ugyanis az ASP.NET Core mintaalkalmazás memóriában lévő adatbázist használ.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Háttérrendszeri API meghívása az előtérbőlCall back-end API from front end

Ebben a lépésben kijelöli az előtér-alkalmazás kiszolgálói kódját, hogy hozzáférjen a háttérrendszeri API-hoz.In this step, you point the front-end app's server code to access the back-end API. Később engedélyezni fogja az előtértől a háttérbe irányuló hitelesített hozzáférést.Later, you enable authenticated access from the front end to the back end.

Az előtérkód módosításaModify front-end code

A helyi adattárban nyissa meg a következőt: Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs. Az TodoController osztály elején adja hozzá a következő sorokat, és cserélje le at a <back-end-app-name> háttérbeli alkalmazás nevére: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";

Keresse meg a (z) által díszített metódust, [HttpGet] és cserélje le a kódot a kapcsos zárójelek közé a következőket:Find the method that's decorated with [HttpGet] and replace the code inside the curly braces with:

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

Az első sor GET /api/Todo hívást indít a háttérrendszeri API-alkalmazás felé.The first line makes a GET /api/Todo call to the back-end API app.

Ezután keresse meg a által díszített metódust, [HttpGet("{id}")] és cserélje le a kódot a kapcsos zárójeleken belül a következőre:Next, find the method that's decorated with [HttpGet("{id}")] and replace the code inside the curly braces with:

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

Az első sor GET /api/Todo/{id} hívást indít a háttérrendszeri API-alkalmazás felé.The first line makes a GET /api/Todo/{id} call to the back-end API app.

Ezután keresse meg a által díszített metódust, [HttpPost] és cserélje le a kódot a kapcsos zárójeleken belül a következőre:Next, find the method that's decorated with [HttpPost] and replace the code inside the curly braces with:

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

Az első sor POST /api/Todo hívást indít a háttérrendszeri API-alkalmazás felé.The first line makes a POST /api/Todo call to the back-end API app.

Ezután keresse meg a által díszített metódust, [HttpPut("{id}")] és cserélje le a kódot a kapcsos zárójeleken belül a következőre:Next, find the method that's decorated with [HttpPut("{id}")] and replace the code inside the curly braces with:

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

Az első sor PUT /api/Todo/{id} hívást indít a háttérrendszeri API-alkalmazás felé.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

Ezután keresse meg a által díszített metódust, [HttpDelete("{id}")] és cserélje le a kódot a kapcsos zárójeleken belül a következőre:Next, find the method that's decorated with [HttpDelete("{id}")] and replace the code inside the curly braces with:

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

Az első sor DELETE /api/Todo/{id} hívást indít a háttérrendszeri API-alkalmazás felé.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Mentse az összes módosítást.Save all your changes. A helyi terminálablakból telepítse a módosításokat az előtér-alkalmazásban a következő Git-parancsok segítségével: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

A módosítások ellenőrzéseCheck your changes

Nyissa meg a http://<front-end-app-name>.azurewebsites.net címet, és adjon hozzá néhány elemet, például a from front end 1 és from front end 2 elemet.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.

Nyissa meg a http://<back-end-app-name>.azurewebsites.net címet az előtér-alkalmazásból hozzáadott elemek megtekintéséhez.Navigate to http://<back-end-app-name>.azurewebsites.net to see the items added from the front-end app. Továbbá adjon hozzá néhány elemet, például a from back end 1 és a from back end 2 elemet, majd frissítse az előtér-alkalmazást annak ellenőrzéséhez, hogy az tükrözi-e a módosításokat.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.

Képernyőkép egy Azure App Service REST API-mintáról egy böngészőablakban, amely az előtér-alkalmazásból hozzáadott elemekkel rendelkező Feladatlista-alkalmazást jeleníti meg.

Hitelesítés konfigurálásaConfigure auth

Ebben a lépésben engedélyezni fogja a két alkalmazás hitelesítését és engedélyezését.In this step, you enable authentication and authorization for the two apps. Konfigurálni fogja továbbá az előtér-alkalmazást, hogy létrehozzon egy hozzáférési jogkivonatot, amelynek segítségével hitelesített hívásokat indíthat a háttéralkalmazáshoz.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.

Az Azure Active Directoryt fogja használni identitásszolgáltatóként.You use Azure Active Directory as the identity provider. További információért tekintse meg az Azure Active Directory-hitelesítés az App Services-alkalmazáshoz való konfigurálásáról szóló részt.For more information, see Configure Azure Active Directory authentication for your App Services application.

Hitelesítés és engedélyezés engedélyezése a háttéralkalmazás számáraEnable authentication and authorization for back-end app

A Azure Portal menüben válassza az erőforráscsoportok lehetőséget, vagy keresse meg és válassza ki az erőforráscsoportok lehetőséget bármely oldalon.In the Azure portal menu, select Resource groups or search for and select Resource groups from any page.

Az erőforráscsoportok területen keresse meg és válassza ki az erőforráscsoportot.In Resource groups, find and select your resource group. Az Áttekintés területen válassza ki a háttérbeli alkalmazás felügyeleti lapját.In Overview, select your back-end app's management page.

Képernyőkép az erőforráscsoportok ablakról, amely egy példaként szolgáló erőforráscsoport és egy háttérbeli alkalmazás felügyeleti oldalának áttekintését jeleníti meg.

A háttérbeli alkalmazás bal oldali menüjében válassza a hitelesítés/engedélyezés lehetőséget, majd a bejelöléssel engedélyezze app Service hitelesítést.In your back-end app's left menu, select Authentication / Authorization, then enable App Service Authentication by selecting On.

Az Elvégzendő művelet, ha a kérés nincs hitelesítve területen válassza a Bejelentkezés az Azure Active Directoryval lehetőséget.In Action to take when request is not authenticated, select Log in with Azure Active Directory.

A hitelesítésszolgáltatók területen válassza a Azure Active Directory lehetőséget.Under Authentication Providers, select Azure Active Directory.

Képernyőkép a háttérbeli alkalmazás bal oldali menüjéről, amelyen a hitelesítés/engedélyezés lehetőség van kiválasztva, a jobb oldali menüben pedig a beállítások lehetőség van kiválasztva.

Válassza az expressz lehetőséget, majd fogadja el az alapértelmezett beállításokat új ad-alkalmazás létrehozásához, majd kattintson az OK gombra.Select Express, then accept the default settings to create a new AD app and select OK.

A hitelesítés/engedélyezés lapon válassza a Mentés lehetőséget.In the Authentication / Authorization page, select Save.

Miután megtalálta az üzenetet Successfully saved the Auth Settings for <back-end-app-name> App , frissítse a portál oldalt.Once you see the notification with the message Successfully saved the Auth Settings for <back-end-app-name> App, refresh the portal page.

Válassza a Azure Active Directory ismét lehetőséget, majd válassza ki a Azure ad alkalmazás.Select Azure Active Directory again, and then select the Azure AD App.

Másolja az Azure AD-alkalmazás ügyfél-azonosítóját egy Jegyzettömbbe.Copy the Client ID of the Azure AD application to a notepad. Erre az értékre később szüksége lesz.You need this value later.

Képernyőkép a Azure Active Directory beállítások ablakról, amely a Azure AD alkalmazás és az Azure AD-alkalmazások ablakát mutatja a másolandó ügyfél-azonosító megjelenítéséhez.

Ha leállítja ezt a funkciót, egy olyan önálló alkalmazást is tartalmaz, amelyet a App Service hitelesítés és engedélyezés már biztosít.If you stop here, you have a self-contained app that's already secured by the App Service authentication and authorization. A fennmaradó szakaszokból megtudhatja, hogyan védheti meg a többalkalmazásos megoldásokat a hitelesített felhasználó az előtérből a háttérbe való beáramlásával.The remaining sections show you how to secure a multi-app solution by "flowing" the authenticated user from the front end to the back end.

Hitelesítés és engedélyezés engedélyezése az előtér-alkalmazás számáraEnable authentication and authorization for front-end app

Kövesse újból a lépéseket az előtér-alkalmazás esetében is, de az utolsó lépést hagyja ki.Follow the same steps for the front-end app, but skip the last step. Nincs szüksége az előtér-alkalmazás ügyfél-AZONOSÍTÓJÁRA.You don't need the client ID for the front-end app.

Igény szerint navigáljon a következőhöz: http://<front-end-app-name>.azurewebsites.net.If you like, navigate to http://<front-end-app-name>.azurewebsites.net. Ez egy biztonságos bejelentkezési oldalra irányítja át.It should now direct you to a secured sign-in page. A bejelentkezést követően továbbra sem férhet hozzá a háttérbeli alkalmazásból származó adatokhoz, mert a háttérbeli alkalmazáshoz Azure Active Directory bejelentkezés szükséges az előtér-alkalmazásból.After you sign in, you still can't access the data from the back-end app, because the back-end app now requires Azure Active Directory sign-in from the front-end app. Három dolgot kell tennie:You need to do three things:

  • Hozzáférés engedélyezése az előtér-alkalmazás számára a háttéralkalmazáshozGrant the front end access to the back end
  • Az App Service konfigurálása használható jogkivonat visszaadásáraConfigure App Service to return a usable token
  • A jogkivonat használata a kódbanUse the token in your code

Tipp

Ha hibákba ütközik, és újrakonfigurálja az alkalmazás hitelesítési/engedélyezési beállításait, előfordulhat, hogy a jogkivonat-tároló nem hozza létre újból a jogkivonatokat az új beállításokból.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. A jogkivonatok újbóli létrehozásának biztosításához ki kell jelentkeznie, majd újból be kell jelentkeznie az alkalmazásba.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. Ennek egyszerű módja, hogy a böngészőt privát üzemmódban használja, és bezárja, majd újból megnyitja a böngészőt privát üzemmódban az alkalmazások beállításainak módosítása után.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.

Hozzáférés engedélyezése az előtér-alkalmazás számára a háttéralkalmazáshozGrant front-end app access to back end

Most, hogy engedélyezve van a hitelesítés és az engedélyezés mindkét alkalmazás számára, mindkét alkalmazás AD-alkalmazáson alapul.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. Ebben a lépésben engedélyeket ad az előtér-alkalmazásnak, hogy hozzáférhessen a háttéralkalmazáshoz a felhasználó nevében.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Voltaképpen az előtér AD-alkalmazásának ad engedélyt a háttér AD-alkalmazásához való hozzáférésre a felhasználó nevében.)(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

A Azure Portal menüben válassza a Azure Active Directory lehetőséget, vagy keresse meg, majd válassza a Azure Active Directory lehetőséget bármelyik lapon.In the Azure portal menu, select Azure Active Directory or search for and select Azure Active Directory from any page.

Válassza ki Alkalmazásregisztrációk > tulajdonában lévő alkalmazások > megtekintheti a címtárban található összes alkalmazást.Select App registrations > Owned applications > View all applications in this directory. Válassza ki az előtér-alkalmazás nevét, majd válassza az API-engedélyek lehetőséget.Select your front-end app name, then select API permissions.

Képernyőkép a Microsoft-Alkalmazásregisztrációk ablakról, amelyen a saját alkalmazások, az előtér-alkalmazás neve és az API-engedélyek van kiválasztva.

Válassza az engedély hozzáadása lehetőséget, majd a saját szervezet által használt API-k elemet > <back-end-app-name> .Select Add a permission, then select APIs my organization uses > <back-end-app-name>.

A háttérbeli alkalmazáshoz tartozó API-engedélyek kérése lapon válassza a delegált engedélyek és User_impersonation, majd az engedélyek hozzáadása elemet.In the Request API permissions page for the back-end app, select Delegated permissions and user_impersonation, then select Add permissions.

Képernyőkép a kérelem API-engedélyek oldaláról, amely a delegált engedélyeket, user_impersonation és az engedély hozzáadása gombot választotta.

Az App Service konfigurálása használható hozzáférési jogkivonat visszaadásáraConfigure App Service to return a usable access token

Az előtér-alkalmazás most már rendelkezik a szükséges engedélyekkel, amelyekkel hozzáfér a háttérbeli alkalmazáshoz a bejelentkezett felhasználóként.The front-end app now has the required permissions to access the back-end app as the signed-in user. Ebben a lépésben konfigurálja az App Service-hitelesítést és -engedélyezést, hogy használható jogkivonatot adjon a háttéralkalmazás eléréséhez.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Ebben a lépésben a háttér-ügyfél-AZONOSÍTÓra van szüksége, amelyet a hitelesítés engedélyezése és a háttérbeli alkalmazásengedélyezése elemre másolt.For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Keresse meg az Azure erőforrás-kezelő , és használja az erőforrás-fát az előtér-webalkalmazás megkereséséhez.Navigate to Azure Resource Explorer and using the resource tree, locate your front-end web app.

A Azure erőforrás-kezelő ekkor megnyílik az erőforrás-fában kiválasztott előtér-alkalmazással.The Azure Resource Explorer is now opened with your front-end app selected in the resource tree. Kattintson az Olvasás/Írás elemre a lap tetején az Azure-erőforrások szerkesztésének engedélyezéséhez.At the top of the page, click Read/Write to enable editing of your Azure resources.

Képernyőkép a Azure Erőforrás-kezelő lap tetején található írásvédett és olvasási/írási gombokról, az olvasás/írás gomb kiválasztásával.

A bal oldali böngészőben bontsa ki a következőt: config > authsettings elemre.In the left browser, drill down to config > authsettings.

Az authsettings nézetben kattintson a Szerkesztés gombra.In the authsettings view, click Edit. Állítsa be a additionalLoginParams következő JSON-karakterláncot a másolt ügyfél-azonosító használatával.Set additionalLoginParams to the following JSON string, using the client ID you copied.

"additionalLoginParams": ["response_type=code id_token","resource=<back-end-client-id>"],

Képernyőkép – példa a authsettings elemre nézetre, amely az additionalLoginParams karakterláncot jeleníti meg, például egy ügyfél-AZONOSÍTÓval.

A beállítások mentéséhez kattintson a PUT elemre.Save your settings by clicking PUT.

Az alkalmazások konfigurálása kész.Your apps are now configured. Az előtér-alkalmazás most már hozzáfér a háttéralkalmazáshoz a megfelelő hozzáférési jogkivonattal.The front end is now ready to access the back end with a proper access token.

A más szolgáltatók hozzáférési jogkivonatának konfigurálásával kapcsolatos további információkért lásd: személyazonosság-szolgáltatói tokenek frissítése.For information on how to configure the access token for other providers, see Refresh identity provider tokens.

API biztonságos hívása a kiszolgálói kódbólCall API securely from server code

Ebben a lépésben engedélyezi a korábban módosított kiszolgálói kód számára, hogy hitelesített hívásokat indítson a háttérrendszeri API irányába.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

Az előtér-alkalmazás most már rendelkezik a szükséges engedélyekkel, és hozzáadja a háttér-ügyfél AZONOSÍTÓját is a bejelentkezési paraméterekhez.Your front-end app now has the required permission and also adds the back end's client ID to the login parameters. Ezáltal hozzáférési jogkivonatot szerezhet a háttéralkalmazással történő hitelesítéshez.Therefore, it can obtain an access token for authentication with the back-end app. Az App Service úgy adja meg a jogkivonatot a kiszolgálói kódhoz, hogy injektál egy X-MS-TOKEN-AAD-ACCESS-TOKEN fejlécet minden hitelesített kéréshez (lásd az alkalmazáskódban lévő jogkivonatok lekéréséről szóló részt).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).

Megjegyzés

Ezeket a fejléceket a rendszer minden támogatott nyelven injektálja.These headers are injected for all supported languages. Az egyes nyelvek szokásos mintájának használatával férhet hozzájuk.You access them using the standard pattern for each respective language.

A helyi adattárban nyissa meg újból a következőt: Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs again. A TodoController(TodoContext context) konstruktorhoz adja hozzá a következő kódot: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"]);
}

Ez a kód hozzáadja a szabványos Authorization: Bearer <access-token> HTTP-fejlécet az összes távoli API-híváshoz.This code adds the standard HTTP header Authorization: Bearer <access-token> to all remote API calls. Az ASP.NET Core MVC-kérelem végrehajtási folyamata OnActionExecuting csak a megfelelő művelet végrehajtása előtt hajtja végre a műveletet, így a kimenő API-hívások mindegyike megjeleníti a hozzáférési jogkivonatot.In the ASP.NET Core MVC request execution pipeline, OnActionExecuting executes just before the respective action does, so each of your outgoing API call now presents the access token.

Mentse az összes módosítást.Save all your changes. A helyi terminálablakból telepítse a módosításokat az előtér-alkalmazásban a következő Git-parancsok segítségével: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

Jelentkezzen be újra az https://<front-end-app-name>.azurewebsites.net helyre.Sign in to https://<front-end-app-name>.azurewebsites.net again. A felhasználói adatok használatára vonatkozó megállapodás lapján kattintson az Elfogadás gombra.At the user data usage agreement page, click Accept.

Ekkor már képesnek kell lennie az adatok létrehozására, olvasására, frissítésére és törlésére a háttéralkalmazásból, mint korábban.You should now be able to create, read, update, and delete data from the back-end app as before. Az egyetlen különbség, hogy az App Service hitelesítése és engedélyezése most már mindkét alkalmazást védi, beleértve a szolgáltatások közötti hívásokat is.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Gratulálunk!Congratulations! A kiszolgálói kód most már hozzáfér a háttéralkalmazás adataihoz a hitelesített felhasználó nevében.Your server code is now accessing the back-end data on behalf of the authenticated user.

API biztonságos hívása a böngészőkódbólCall API securely from browser code

Ebben a lépésben az előtérrendszeri Angular.js alkalmazást a háttérrendszeri API-hoz fogja irányítani.In this step, you point the front-end Angular.js app to the back-end API. Ezáltal megtudhatja, hogyan kérheti le a hozzáférési jogkivonatot, és hogyan indíthat azzal API-hívásokat a háttéralkalmazás felé.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

Míg a kiszolgálói kód hozzáfér a kérelemfejlécekhez, az ügyfélkód ugyanezeket a hozzáférési jogkivonatokat a következőből érheti el: GET /.auth/me (lásd az alkalmazáskódban lévő jogkivonatok lekéréséről szóló részt).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).

Tipp

Ez a szakasz a szabványos HTTP-metódusok használatával mutatja be a biztonságos HTTP-hívásokat.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. A javascripthez készült Microsoft Authentication Library segítségével azonban egyszerűbbé teheti a Angular.js alkalmazás mintáját.However, you can use Microsoft Authentication Library for JavaScript to help simplify the Angular.js application pattern.

A CORS konfigurálásaConfigure CORS

A Cloud Shellban engedélyezze a CORS az ügyfél URL-címére a az webapp cors add parancs használatával.In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Cserélje le a <back-end-app-name> és a <front-end-app-name> helyőrzőket.Replace the <back-end-app-name> and <front-end-app-name> placeholders.

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

Ez a lépés nem kapcsolódik a hitelesítéshez és az engedélyezéshez.This step is not related to authentication and authorization. Azonban szükség van rá ahhoz, hogy a böngésző lehetővé tegye a tartományok közötti API-hívásokat az Angular.js-alkalmazásból.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. További információ: CORS-funkció hozzáadása.For more information, see Add CORS functionality.

Angular.js-alkalmazás átirányítása a háttérrendszeri API feléPoint Angular.js app to back-end API

A helyi adattárban nyissa meg a következőt: wwwroot/index.html.In the local repository, open wwwroot/index.html.

A 51. sorban állítsa a apiEndpoint változót a háttérbeli alkalmazás () HTTPS URL-címére https://<back-end-app-name>.azurewebsites.net .In Line 51, set the apiEndpoint variable to the HTTPS URL of your back-end app (https://<back-end-app-name>.azurewebsites.net). Cserélje le az <back-end-app-name> alkalmazást az alkalmazás nevére app Service.Replace <back-end-app-name> with your app name in App Service.

Nyissa meg a helyi adattárban a wwwroot/app/scripts/todoListSvc.js fájlt, és ellenőrizze, hogy minden API-hívás a következővel van-e kiegészítve: apiEndpoint.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. Az Angular.js-alkalmazás most már a háttérrendszer API-kat fogja hívni.Your Angular.js app is now calling the back-end APIs.

Hozzáférési jogkivonat hozzáadása az API-hívásokhozAdd access token to API calls

A wwwroot/app/scripts/todoListSvc.js fájlban az API-hívások listája (getItems : function(){. sor) fölött adja hozzá a következő függvényt a listához: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;
},

A rendszer ezt a függvényt fogja meghívni az alapértelmezett Authorization fejléc a hozzáférési jogkivonattal történő beállításához.This function is called to set the default Authorization header with the access token. A következő lépésben fogja meghívni.You call it in the next step.

A helyi adattárban nyissa meg a wwwroot/app/scripts/app.js fájlt, és keresse meg a következő kódot: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" });

Cserélje le a teljes kódblokkot az alábbi kódra: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" });

Az új módosítás hozzáadja a resolve leképezést, amely a /.auth/me meghívása után beállítja a hozzáférési jogkivonatot.The new change adds the resolve mapping that calls /.auth/me and sets the access token. Ellenőrzi, hogy rendelkezik-e a hozzáférési jogkivonattal, mielőtt létrehozza a todoListCtrl vezérlő példányát.It makes sure you have the access token before instantiating the todoListCtrl controller. E módon minden, a vezérlő által kezdeményezett API-hívás tartalmazni fogja a jogkivonatot.That way all API calls by the controller includes the token.

Frissítések telepítése és teszteléseDeploy updates and test

Mentse az összes módosítást.Save all your changes. A helyi terminálablakból telepítse a módosításokat az előtér-alkalmazásban a következő Git-parancsok segítségével: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

Keresse meg újból a következőt: https://<front-end-app-name>.azurewebsites.net.Navigate to https://<front-end-app-name>.azurewebsites.net again. Most már képesnek kell lennie az adatok közvetlenül az Angular.js-alkalmazásból történő létrehozására, olvasására, frissítésére és törlésére.You should now be able to create, read, update, and delete data from the back-end app, directly in the Angular.js app.

Gratulálunk!Congratulations! Az ügyfélkód most már hozzáfér a háttéradatokhoz a hitelesített felhasználó nevében.Your client code is now accessing the back-end data on behalf of the authenticated user.

A hozzáférési jogkivonatok lejártakorWhen access tokens expire

A hozzáférési jogkivonatok bizonyos idő elteltével lejárnak.Your access token expires after some time. További információ a hozzáférési jogkivonatok frissítéséről anélkül, hogy a felhasználóknak újra hitelesíteniük kell magukat az alkalmazással kapcsolatban: az identitás-szolgáltatói tokenek frissítése.For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Az erőforrások eltávolításaClean up resources

Az előző lépésekben Azure-erőforrásokat hozott létre egy erőforráscsoportban.In the preceding steps, you created Azure resources in a resource group. Ha várhatóan nem lesz szüksége ezekre az erőforrásokra a jövőben, törölje az erőforráscsoportot a következő parancs Cloud Shellben történő futtatásával: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

A parancs futtatása egy percig is eltarthat.This command may take a minute to run.

További lépésekNext steps

Az alábbiak elvégzését ismerte meg:What you learned:

  • Beépített hitelesítés és engedélyezés engedélyezéseEnable built-in authentication and authorization
  • Alkalmazások biztonságossá tétele a nem hitelesített kérelmek ellenSecure apps against unauthenticated requests
  • Az Azure Active Directory használata identitásszolgáltatókéntUse Azure Active Directory as the identity provider
  • Távoli alkalmazás elérése a bejelentkezett felhasználó nevébenAccess a remote app on behalf of the signed-in user
  • Biztonságos szolgáltatások közötti hívások jogkivonat-hitelesítésselSecure service-to-service calls with token authentication
  • Hozzáférési kódok használata kiszolgálói kódbólUse access tokens from server code
  • Hozzáférési kódok használata az ügyfél (böngésző) kódjábólUse access tokens from client (browser) code

Folytassa a következő oktatóanyaggal, amelyből megtudhatja, hogyan képezhető le egyéni DNS-név az alkalmazáshoz.Advance to the next tutorial to learn how to map a custom DNS name to your app.