Kurz: Komplexní ověřování a autorizace uživatelů v Azure App ServiceTutorial: Authenticate and authorize users end-to-end in Azure App Service

Azure App Service je vysoce škálovatelná služba s automatickými opravami pro hostování webů.Azure App Service provides a highly scalable, self-patching web hosting service. Kromě toho App Service obsahuje integrovanou podporu ověřování a autorizace uživatelů.In addition, App Service has built-in support for user authentication and authorization. V tomto kurzu se dozvíte, jak zabezpečit své aplikace pomocí s využitím ověřování a autorizace pomocí služby App Service.This tutorial shows how to secure your apps with App Service authentication and authorization. Používá ASP.NET Core aplikaci s Angular.js front-endu jako příkladem.It uses a ASP.NET Core app with an Angular.js front end as an example. Ověřování a autorizace pomocí služby App Service podporují moduly runtime všech jazyků a v tomto kurzu můžete zjistit, jak je použít ve vlastním upřednostňovaném jazyce.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.

Azure App Service poskytuje vysoce škálovatelnou službu s automatickými opravami pro hostování webů pomocí operačního systému Linux.Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. Kromě toho App Service obsahuje integrovanou podporu ověřování a autorizace uživatelů.In addition, App Service has built-in support for user authentication and authorization. V tomto kurzu se dozvíte, jak zabezpečit své aplikace pomocí s využitím ověřování a autorizace pomocí služby App Service.This tutorial shows how to secure your apps with App Service authentication and authorization. Používá aplikaci ASP.NET Core s Angular.js front-endu jako příkladem.It uses an ASP.NET Core app with an Angular.js front end as an example. Ověřování a autorizace pomocí služby App Service podporují moduly runtime všech jazyků a v tomto kurzu můžete zjistit, jak je použít ve vlastním upřednostňovaném jazyce.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.

Jednoduché ověřování a autorizace

Kurz také ukazuje, jak zabezpečit vícevrstvé aplikace přistupováním k zabezpečenému back-endovému rozhraní API jménem ověřeného uživatele, a to z kódu serveru i z kódu v prohlížeči.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.

Pokročilé ověřování a autorizace

Toto je pouze několik z možných scénářů ověřování a autorizace v App Service.These are only some of the possible authentication and authorization scenarios in App Service.

Tady ucelenější seznam věcí, které se v tomto kurzu naučíte:Here's a more comprehensive list of things you learn in the tutorial:

  • Povolení integrovaného ověřování a autorizaceEnable built-in authentication and authorization
  • Zabezpečení aplikací před neověřenými požadavkySecure apps against unauthenticated requests
  • Použití služby Azure Active Directory jako zprostředkovatele identityUse Azure Active Directory as the identity provider
  • Přístup ke vzdálené aplikaci jménem přihlášeného uživateleAccess a remote app on behalf of the signed-in user
  • Zabezpečení volání mezi službami pomocí ověřování tokenuSecure service-to-service calls with token authentication
  • Použití přístupových tokenů z kódu serveruUse access tokens from server code
  • Použití přístupových tokenů z klientského kódu (v prohlížeči)Use access tokens from client (browser) code

Podle kroků v tomto kurzu můžete postupovat v systémech macOS, Linux a Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet před tím, než začnete.If you don't have an Azure subscription, create a free account before you begin.

PožadavkyPrerequisites

Pro absolvování tohoto kurzu potřebujete:To complete this tutorial:

  • Nainstalovat Git.Install Git
  • Instalace nejnovější sady .NET Core 3,1 SDK - Použijte prostředí bash v Azure Cloud Shell.Use the Bash environment in Azure Cloud Shell.Spuštění služby Cloud Shell v novém okněLaunch Cloud Shell in a new window - Pokud tomu dáváte přednost, můžete nainstalovat Azure CLI a spouštět referenční příkazy CLI.If you prefer, install the Azure CLI to run CLI reference commands.- Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login.If you're using a local installation, sign in to the Azure CLI by using the az login command. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu.To finish the authentication process, follow the steps displayed in your terminal. Další možnosti přihlášení jsou popsané v tématu Přihlášení pomocí Azure CLI.For additional sign-in options, see Sign in with the Azure CLI.- Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití.When you're prompted, install Azure CLI extensions on first use. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.For more information about extensions, see Use extensions with the Azure CLI. - Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované.Run az version to find the version and dependent libraries that are installed. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.To upgrade to the latest version, run az upgrade.Install the latest .NET Core 3.1 SDK - Použijte prostředí bash v Azure Cloud Shell.Use the Bash environment in Azure Cloud Shell.Spuštění služby Cloud Shell v novém okněLaunch Cloud Shell in a new window - Pokud tomu dáváte přednost, můžete nainstalovat Azure CLI a spouštět referenční příkazy CLI.If you prefer, install the Azure CLI to run CLI reference commands.- Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login.If you're using a local installation, sign in to the Azure CLI by using the az login command. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu.To finish the authentication process, follow the steps displayed in your terminal. Další možnosti přihlášení jsou popsané v tématu Přihlášení pomocí Azure CLI.For additional sign-in options, see Sign in with the Azure CLI.- Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití.When you're prompted, install Azure CLI extensions on first use. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.For more information about extensions, see Use extensions with the Azure CLI. - Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované.Run az version to find the version and dependent libraries that are installed. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.To upgrade to the latest version, run az upgrade.

Vytvoření místní aplikace .NET CoreCreate local .NET Core app

V tomto kroku nastavíte místní projekt .NET Core.In this step, you set up the local .NET Core project. Stejný projekt použijete k nasazení back-endové aplikace API i front-endové webové aplikace.You use the same project to deploy a back-end API app and a front-end web app.

Klonování a spuštění ukázkové aplikaceClone and run the sample application

Spuštěním následujících příkazů naklonujte a spusťte ukázkové úložiště.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

Přejděte na adresu http://localhost:5000 a vyzkoušejte přidávání, úpravy a odebírání položek úkolů.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

Místně spuštěné rozhraní ASP.NET Core API

ASP.NET Core můžete kdykoli zastavit stisknutím Ctrl+C v terminálu.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Nasazení aplikací do AzureDeploy apps to Azure

V tomto kroku nasadíte projekt do dvou aplikací App Service.In this step, you deploy the project to two App Service apps. Jedna je front-endová aplikace a druhá je back-endová aplikace.One is the front-end app and the other is the back-end app.

Konfigurace uživatele nasazeníConfigure a deployment user

FTP a místní Git se můžou nasadit do webové aplikace Azure pomocí uživatele nasazení.FTP and local Git can deploy to an Azure web app by using a deployment user. Jakmile nakonfigurujete uživatele nasazení, můžete ho použít pro všechna nasazení Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Uživatelské jméno a heslo nasazení na úrovni účtu se liší od přihlašovacích údajů předplatného Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Pokud chcete nakonfigurovat uživatele nasazení, spusťte v Azure Cloud Shell příkaz AZ WebApp Deployment User set .To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Nahraďte <username> a <password> pomocí uživatelského jména a hesla pro nasazení.Replace <username> and <password> with a deployment user username and password.

  • Uživatelské jméno musí být v rámci Azure jedinečné a pro místní nabízená oznámení Git nesmí obsahovat @ symbol.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Heslo musí mít délku alespoň osm znaků a dva z následujících tří prvků: písmena, číslice a symboly.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>

Výstup JSON zobrazuje heslo jako null .The JSON output shows the password as null. Pokud se zobrazí chyba 'Conflict'. Details: 409, změňte uživatelské jméno.If you get a 'Conflict'. Details: 409 error, change the username. Pokud se zobrazí chyba 'Bad Request'. Details: 400, použijte silnější heslo.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Poznamenejte si uživatelské jméno a heslo, které chcete použít k nasazení webových aplikací.Record your username and password to use to deploy your web apps.

Vytvoření prostředků AzureCreate Azure resources

V Cloud Shell spuštěním následujících příkazů vytvořte dvě webové aplikace pro Windows.In the Cloud Shell, run the following commands to create two Windows web apps. Nahraďte <front-end-app-name> a <back-end-app-name> dvěma globálně jedinečnými názvy aplikací (platné znaky jsou a-z , 0-9 a - ).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Další informace o jednotlivých příkazech najdete v tématu Rozhraní RESTful API s CORS v Azure App Service.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

Ve službě Cloud Shell spuštěním následujících příkazů vytvořte dvě webové aplikace.In the Cloud Shell, run the following commands to create two web apps. Nahraďte <front-end-app-name> a <back-end-app-name> dvěma globálně jedinečnými názvy aplikací (platné znaky jsou a-z , 0-9 a - ).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Další informace o jednotlivých příkazech najdete v tématu Vytvoření aplikace .NET Core v Azure App Service.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

Poznámka

Uložte si adresy URL vzdálených úložišť Git pro vaši front-endovou aplikaci a back-endovou aplikaci, které se zobrazí ve výstupu příkazu az webapp create.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.

Přenos z Gitu do AzurePush to Azure from Git

Po návratu do okna místního terminálu spuštěním následujících příkazů Git proveďte nasazení do back-endové aplikace.Back in the local terminal window, run the following Git commands to deploy to the back-end app. Nahraďte <deploymentLocalGitUrl-of-back-end-app> adresou URL vzdáleného úložiště Git, kterou jste uložili v části vytvoření prostředků Azure.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Po zobrazení výzvy k zadání přihlašovacích údajů správcem pověření Git Nezapomeňte zadat přihlašovací údaje pro nasazení, ne přihlašovací údaje, které používáte k přihlášení do Azure Portal.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

V okně místního terminálu spuštěním následujících příkazů Git nasaďte stejný kód do front-endové aplikace.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. Nahraďte <deploymentLocalGitUrl-of-front-end-app> adresou URL vzdáleného úložiště Git, kterou jste uložili v části vytvoření prostředků Azure.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

Vyhledat aplikaceBrowse to the apps

V prohlížeči přejděte na následující adresy URL, kde se zobrazí dvě funkční aplikace.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

Snímek obrazovky s ukázkami rozhraní REST API Azure App Service v okně prohlížeče, ve kterém se zobrazuje aplikace seznam úkolů

Poznámka

Pokud se aplikace restartuje, možná si všimnete smazání nových dat.If your app restarts, you may have noticed that new data has been erased. Toto chování je záměrné, protože ukázková aplikace ASP.NET Core využívá databázi v paměti.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Volání back-endového rozhraní API z front-enduCall back-end API from front end

V tomto kroku odkážete kód serveru front-endové aplikace na přístup k back-endovému rozhraní API.In this step, you point the front-end app's server code to access the back-end API. Později povolíte ověřený přístup z front-endu do back-endu.Later, you enable authenticated access from the front end to the back end.

Úprava front-endového kóduModify front-end code

V místním úložišti otevřete soubor Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs. Na začátku TodoController třídy přidejte následující řádky a nahraďte <back-end-app-name> název vaší back-endové aplikace: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";

Vyhledejte metodu, která je upravena pomocí [HttpGet] , a nahraďte kód uvnitř složených závorek následujícím kódem: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);

První řádek provede volání GET /api/Todo do back-endové aplikace API.The first line makes a GET /api/Todo call to the back-end API app.

Dále vyhledejte metodu, která je upravena pomocí, [HttpGet("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem: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");

První řádek provede volání GET /api/Todo/{id} do back-endové aplikace API.The first line makes a GET /api/Todo/{id} call to the back-end API app.

Dále vyhledejte metodu, která je upravena pomocí, [HttpPost] a nahraďte kód uvnitř složených závorek následujícím kódem: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");

První řádek provede volání POST /api/Todo do back-endové aplikace API.The first line makes a POST /api/Todo call to the back-end API app.

Dále vyhledejte metodu, která je upravena pomocí, [HttpPut("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem: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();

První řádek provede volání PUT /api/Todo/{id} do back-endové aplikace API.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

Dále vyhledejte metodu, která je upravena pomocí, [HttpDelete("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem: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();

První řádek provede volání DELETE /api/Todo/{id} do back-endové aplikace API.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Uložte všechny provedené změny.Save all your changes. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git: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

Kontrola změnCheck your changes

Přejděte na adresu http://<front-end-app-name>.azurewebsites.net a přidejte několik položek, například from front end 1 a from front end 2.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.

Přejděte na adresu http://<back-end-app-name>.azurewebsites.net, kde se zobrazí položky přidané z front-endové aplikace.Navigate to http://<back-end-app-name>.azurewebsites.net to see the items added from the front-end app. Přidejte také několik položek, například from back end 1 a from back end 2 a pak aktualizujte front-endovou aplikaci, abyste zjistili, jestli se změny projeví.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.

Snímek obrazovky s ukázkami rozhraní REST API Azure App Service v okně prohlížeče, ve kterém se zobrazuje aplikace seznam úkolů s položkami přidanými z aplikace front-end.

Konfigurace ověřováníConfigure auth

V tomto kroku pro své dvě aplikace povolíte ověřování a autorizaci.In this step, you enable authentication and authorization for the two apps. Také nakonfigurujete front-endovou aplikaci tak, aby vygenerovala přístupový token, který můžete použít k provádění ověřených volání do back-endové aplikace.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.

Jako zprostředkovatele identity použijete Azure Active Directory.You use Azure Active Directory as the identity provider. Další informace najdete v tématu Konfigurace ověřování pomocí Azure Active Directory pro aplikaci App Services.For more information, see Configure Azure Active Directory authentication for your App Services application.

Povolení ověřování a autorizace pro back-endovou aplikaciEnable authentication and authorization for back-end app

V nabídce Azure Portal vyberte skupiny prostředků nebo vyhledejte a vyberte skupiny prostředků z libovolné stránky.In the Azure portal menu, select Resource groups or search for and select Resource groups from any page.

V skupiny prostředků vyhledejte a vyberte skupinu prostředků.In Resource groups, find and select your resource group. V přehledu vyberte stránku správy vaší back-endové aplikace.In Overview, select your back-end app's management page.

Snímek obrazovky okna skupiny prostředků zobrazující přehled ukázkové skupiny prostředků a vybrané stránky pro správu back-endové aplikace.

V nabídce vlevo back-end aplikace vyberte ověřování/autorizace a pak povolte App Service ověřování výběrem zapnuto.In your back-end app's left menu, select Authentication / Authorization, then enable App Service Authentication by selecting On.

V části Akce, která se má provést, když požadavek nebude ověřený vyberte Přihlásit se přes Azure Active Directory.In Action to take when request is not authenticated, select Log in with Azure Active Directory.

V části Zprostředkovatelé ověřování vyberte Azure Active Directory.Under Authentication Providers, select Azure Active Directory.

Snímek obrazovky levé nabídky aplikace, která zobrazuje vybrané ověřování a autorizaci a nastavení vybrané v pravé nabídce

Vyberte Express, přijměte výchozí nastavení a vytvořte novou aplikaci AD a vyberte OK.Select Express, then accept the default settings to create a new AD app and select OK.

Na stránce ověřování/autorizace vyberte Uložit.In the Authentication / Authorization page, select Save.

Jakmile se zobrazí oznámení se zprávou Successfully saved the Auth Settings for <back-end-app-name> App , aktualizujte stránku portálu.Once you see the notification with the message Successfully saved the Auth Settings for <back-end-app-name> App, refresh the portal page.

Znovu vyberte Azure Active Directory a pak vyberte aplikace Azure AD.Select Azure Active Directory again, and then select the Azure AD App.

Zkopírujte ID klienta aplikace Azure AD do poznámkového bloku.Copy the Client ID of the Azure AD application to a notepad. Tuto hodnotu budete potřebovat později.You need this value later.

Snímek obrazovky okna nastavení Azure Active Directory zobrazující Aplikace Azure AD a okno aplikace služby Azure AD zobrazující ID klienta, které se má zkopírovat

Pokud zde zastavíte, máte samostatnou aplikaci, která je už zabezpečená App Service ověřováním a autorizací.If you stop here, you have a self-contained app that's already secured by the App Service authentication and authorization. V dalších částech se dozvíte, jak zabezpečit řešení Multi-App pomocí "toku" ověřeného uživatele z front-endu do back-endu.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.

Povolení ověřování a autorizace pro front-endovou aplikaciEnable authentication and authorization for front-end app

Použijte stejný postup i u front-endové aplikace, ale poslední krok přeskočte.Follow the same steps for the front-end app, but skip the last step. Pro front-end aplikaci nepotřebujete ID klienta.You don't need the client ID for the front-end app.

Pokud chcete, přejděte na adresu http://<front-end-app-name>.azurewebsites.net.If you like, navigate to http://<front-end-app-name>.azurewebsites.net. Měla by vás teď přesměrovat na zabezpečenou přihlašovací stránku.It should now direct you to a secured sign-in page. Až se přihlásíte, pořád nemáte přístup k datům z back-endové aplikace, protože back-end aplikace nyní vyžaduje Azure Active Directory přihlášení z aplikace front-end.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. Musíte provést tři věci:You need to do three things:

  • Udělení přístupu front-endu do back-enduGrant the front end access to the back end
  • Konfigurace služby App Service tak, aby vracela použitelný tokenConfigure App Service to return a usable token
  • Použití tokenu v kóduUse the token in your code

Tip

Pokud dojde k chybám a překonfigurujete nastavení ověřování nebo autorizace vaší aplikace, tokeny v úložišti tokenů není možné vygenerovat znovu z nového nastavení.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. Pokud chcete zajistit opětovné vygenerování tokenů, musíte se z aplikace odhlásit a znovu se k ní přihlásit.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. Snadným způsobem, jak to provést, je použít prohlížeč v privátním režimu a po změně nastavení aplikací zavřít a znovu otevřít prohlížeč v privátním režimu.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.

Udělení přístupu front-endové aplikaci do back-enduGrant front-end app access to back end

Teď, když jste povolili ověřování a autorizaci pro obě své aplikace, využívají obě aplikaci AD.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. V tomto kroku udělíte front-endové aplikaci oprávnění k přístupu k back-endu jménem uživatele.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Technicky vzato udělíte aplikaci AD front-endu oprávnění k přístupu k aplikaci AD back-endu jménem uživatele.)(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

V nabídce Azure Portal vyberte Azure Active Directory nebo vyhledejte a vyberte Azure Active Directory na libovolné stránce.In the Azure portal menu, select Azure Active Directory or search for and select Azure Active Directory from any page.

Vyberte Registrace aplikací > vlastněné aplikace > Zobrazit všechny aplikace v tomto adresáři.Select App registrations > Owned applications > View all applications in this directory. Vyberte název front-end aplikace a pak vyberte oprávnění API.Select your front-end app name, then select API permissions.

Snímek obrazovky okna Microsoft-Registrace aplikací se vlastními aplikacemi, názvem aplikace front-end a vybranými oprávněními rozhraní API.

Vyberte Přidat oprávnění a pak vyberte rozhraní API moje organizace používá > <back-end-app-name> .Select Add a permission, then select APIs my organization uses > <back-end-app-name>.

Na stránce požádat o oprávnění API pro back-endové aplikace vyberte delegovaná oprávnění a user_impersonation a pak vyberte Přidat oprávnění.In the Request API permissions page for the back-end app, select Delegated permissions and user_impersonation, then select Add permissions.

Snímek obrazovky se stránkou oprávnění API žádosti, která zobrazuje delegovaná oprávnění, user_impersonation a vybrané tlačítko Přidat oprávnění.

Konfigurace služby App Service tak, aby vracela použitelný přístupový tokenConfigure App Service to return a usable access token

Aplikace front-end má teď požadovaná oprávnění pro přístup k back-endové aplikaci jako přihlášený uživatel.The front-end app now has the required permissions to access the back-end app as the signed-in user. V tomto kroku nakonfigurujete ověřování a autorizaci pomocí služby App Service tak, abyste získali použitelná přístupový token pro přístup k back-endu.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Pro tento krok potřebujete ID klienta back-endu, které jste zkopírovali z části Povolení ověřování a autorizace pro back-endové aplikace.For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Přejděte na Azure Resource Explorer a pomocí stromu prostředků Najděte front-end webovou aplikaci.Navigate to Azure Resource Explorer and using the resource tree, locate your front-end web app.

Azure Resource Explorer se teď otevře s vaší front-end aplikací vybranou ve stromu prostředků.The Azure Resource Explorer is now opened with your front-end app selected in the resource tree. V horní části stránky klikněte na Čtení / zápis a povolte úpravy vašich prostředků Azure.At the top of the page, click Read/Write to enable editing of your Azure resources.

Snímek obrazovky s tlačítky pro čtení a čtení a zápis v horní části stránky Azure Resource Explorer s vybraným tlačítkem pro čtení/zápis.

V levém prohlížeči přejděte k části Konfigurace > authsettings.In the left browser, drill down to config > authsettings.

V zobrazení authsettings (nastavení ověřování) klikněte na Edit (Upravit).In the authsettings view, click Edit. Nastavte additionalLoginParams na následující řetězec JSON pomocí ID klienta, které jste zkopírovali.Set additionalLoginParams to the following JSON string, using the client ID you copied.

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

Snímek obrazovky příkladu kódu v zobrazení authsettings zobrazující řetězec additionalLoginParams s příkladem ID klienta.

Uložte nastavení kliknutím na PUT.Save your settings by clicking PUT.

Vaše aplikace jsou teď nakonfigurované.Your apps are now configured. Front-end je teď připravený na přístup do back-endu se správným přístupovým tokenem.The front end is now ready to access the back end with a proper access token.

Informace o tom, jak nakonfigurovat přístupový token pro jiné poskytovatele, najdete v tématu aktualizace tokenů zprostředkovatele identity.For information on how to configure the access token for other providers, see Refresh identity provider tokens.

Zabezpečené volání rozhraní API z kódu serveruCall API securely from server code

V tomto kroku povolíte dříve upravený kód serveru tak, aby prováděl ověřená volání do back-endového rozhraní API.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

Aplikace front-end má nyní požadovaná oprávnění a také přidá ID klienta back-endu do parametrů přihlášení.Your front-end app now has the required permission and also adds the back end's client ID to the login parameters. Proto může získat přístupový token k ověření v back-endové aplikaci.Therefore, it can obtain an access token for authentication with the back-end app. App Service poskytuje tento token vašemu kódu serveru tím, že do každého ověřeného požadavku vkládá hlavičku X-MS-TOKEN-AAD-ACCESS-TOKEN (viz Načítání tokenů v kódu aplikace).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).

Poznámka

Tyto hlavičky se vkládají pro všechny podporované jazyky.These headers are injected for all supported languages. V jednotlivých jazycích k nim můžete přistupovat standardním způsobem.You access them using the standard pattern for each respective language.

V místním úložišti znovu otevřete soubor Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs again. Pod konstruktor TodoController(TodoContext context) přidejte následující kód: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"]);
}

Tento kód do všech volání vzdáleného rozhraní API přidá standardní hlavičku HTTP Authorization: Bearer <access-token>.This code adds the standard HTTP header Authorization: Bearer <access-token> to all remote API calls. V kanálu spuštění žádosti ASP.NET Core MVC se OnActionExecuting spustí těsně před příslušnou akcí, takže každé z vašich odchozích volání rozhraní API teď prezentuje přístupový token.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.

Uložte všechny provedené změny.Save all your changes. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git: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

Znovu se přihlaste k https://<front-end-app-name>.azurewebsites.net.Sign in to https://<front-end-app-name>.azurewebsites.net again. Na stránce smlouvy o využití uživatelských dat klikněte na Přijmout.At the user data usage agreement page, click Accept.

Teď byste měli být schopni vytvářet, číst, aktualizovat a odstraňovat data z back-endové aplikace stejně jako dříve.You should now be able to create, read, update, and delete data from the back-end app as before. Jediným rozdílem je, že obě aplikace jsou teď zabezpečené ověřováním a autorizací pomocí služby App Service, a to včetně volání mezi službami.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Gratulujeme!Congratulations! Váš kód serveru teď přistupuje k back-endovým datům jménem ověřeného uživatele.Your server code is now accessing the back-end data on behalf of the authenticated user.

Zabezpečené volání rozhraní API z kódu v prohlížečiCall API securely from browser code

V tomto kroku odkážete front-endovou aplikaci Angular.js na back-endové rozhraní API.In this step, you point the front-end Angular.js app to the back-end API. Tímto způsobem zjistíte, jak načíst přístupový token a provádět s ním volání rozhraní API do back-endové aplikace.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

Zatímco kód serveru má přístup k hlavičkám požadavků, klientský kód může stejné přístupové tokeny získat přístupem k GET /.auth/me (viz Načítání tokenů v kódu aplikace).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).

Tip

V této části se k předvedení zabezpečených volání HTTP používají standardní metody HTTP.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. K zjednodušení Angular.jsho vzoru aplikace ale můžete použít knihovnu Microsoft Authentication Library pro JavaScript .However, you can use Microsoft Authentication Library for JavaScript to help simplify the Angular.js application pattern.

Konfigurace CORSConfigure CORS

V Cloud Shell pomocí příkazu povolte CORS pro adresu URL vašeho klienta az webapp cors add .In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Nahraďte <back-end-app-name> <front-end-app-name> zástupné symboly a.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'

Tento krok nesouvisí s ověřováním a autorizací.This step is not related to authentication and authorization. Je však potřeba ho provést, aby prohlížeč povoloval volání rozhraní API mezi doménami z vaší aplikace Angular.js.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. Další informace najdete v tématu popisujícím přidání funkcí CORS.For more information, see Add CORS functionality.

Odkázání aplikace Angular.js na back-endové rozhraní APIPoint Angular.js app to back-end API

V místním úložišti otevřete soubor wwwroot/index.html.In the local repository, open wwwroot/index.html.

Na řádku 51 nastavte apiEndpoint proměnnou na adresu URL https vaší back-endové aplikace ( 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). Nahraďte <back-end-app-name> názvem vaší aplikace v App Service.Replace <back-end-app-name> with your app name in App Service.

V místním úložišti otevřete soubor wwwroot/app/scripts/todoListSvc.js a všimněte si, že před všechna volání rozhraní API je připojený koncový bod rozhraní API apiEndpoint.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. Vaše aplikace Angular.js teď volá back-endová rozhraní API.Your Angular.js app is now calling the back-end APIs.

Přidání přístupového tokenu do volání rozhraní APIAdd access token to API calls

V souboru wwwroot/app/scripts/todoListSvc.js před seznam volání rozhraní API (nad řádek getItems : function(){) přidejte do seznamu následující funkci: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;
},

Zavoláním této funkce se nastaví výchozí hlavička Authorization s přístupovým tokenem.This function is called to set the default Authorization header with the access token. Zavoláte ji v dalším kroku.You call it in the next step.

V místním úložišti otevřete soubor wwwroot/app/scripts/app.js a vyhledejte následující kód: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" });

Celý blok kódu nahraďte následujícím kódem: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" });

Tato nová změna přidá mapování resolve, které zavolá /.auth/me a nastaví přístupový token.The new change adds the resolve mapping that calls /.auth/me and sets the access token. Před vytvořením instance kontroleru todoListCtrl se ujistí, že máte přístupový token.It makes sure you have the access token before instantiating the todoListCtrl controller. Díky tomu všechna volání rozhraní API kontrolerem zahrnují token.That way all API calls by the controller includes the token.

Nasazení aktualizací a testDeploy updates and test

Uložte všechny provedené změny.Save all your changes. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git: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

Znovu přejděte na adresu https://<front-end-app-name>.azurewebsites.net.Navigate to https://<front-end-app-name>.azurewebsites.net again. Teď byste měli být schopni vytvářet, číst, aktualizovat a odstraňovat data z back-endové aplikace přímo v aplikaci Angular.js.You should now be able to create, read, update, and delete data from the back-end app, directly in the Angular.js app.

Gratulujeme!Congratulations! Váš klientský kód teď přistupuje k back-endovým datům jménem ověřeného uživatele.Your client code is now accessing the back-end data on behalf of the authenticated user.

Vypršení platnosti přístupových tokenůWhen access tokens expire

Platnost vašich přístupových tokenů po určité době vyprší.Your access token expires after some time. Informace o tom, jak aktualizovat přístupové tokeny, aniž by se uživatelé museli znovu ověřit u vaší aplikace, najdete v tématu aktualizace tokenů zprostředkovatele identity.For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Vyčištění prostředkůClean up resources

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků.In the preceding steps, you created Azure resources in a resource group. Pokud předpokládáte, že už tyto prostředky nebudete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu ve službě Cloud Shell: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

Spuštění tohoto příkazu může trvat přibližně minut.This command may take a minute to run.

Další krokyNext steps

Naučili jste se:What you learned:

  • Povolení integrovaného ověřování a autorizaceEnable built-in authentication and authorization
  • Zabezpečení aplikací před neověřenými požadavkySecure apps against unauthenticated requests
  • Použití služby Azure Active Directory jako zprostředkovatele identityUse Azure Active Directory as the identity provider
  • Přístup ke vzdálené aplikaci jménem přihlášeného uživateleAccess a remote app on behalf of the signed-in user
  • Zabezpečení volání mezi službami pomocí ověřování tokenuSecure service-to-service calls with token authentication
  • Použití přístupových tokenů z kódu serveruUse access tokens from server code
  • Použití přístupových tokenů z klientského kódu (v prohlížeči)Use access tokens from client (browser) code

Přejděte k dalšímu kurzu, kde se dozvíte, jak namapovat vlastní název DNS na svou aplikaci.Advance to the next tutorial to learn how to map a custom DNS name to your app.