Руководство по Сквозная проверка подлинности и авторизации в Службе приложений AzureTutorial: Authenticate and authorize users end-to-end in Azure App Service

Служба приложений Azure — это служба веб-размещения с самостоятельной установкой исправлений и высоким уровнем масштабируемости.Azure App Service provides a highly scalable, self-patching web hosting service. Кроме того, служба приложений имеет встроенную поддержку проверки подлинности и авторизации пользователя.In addition, App Service has built-in support for user authentication and authorization. В этом руководстве показано, как защитить ваши приложения с помощью проверки подлинности и авторизации в службе приложений.This tutorial shows how to secure your apps with App Service authentication and authorization. В качестве примера в нем используется приложение ASP.NET Core с интерфейсом Angular.js.It uses a ASP.NET Core app with an Angular.js front end as an example. При проверке подлинности и авторизации в службе приложений поддерживаются все языковые среды выполнения. Вы узнаете, как применить их к предпочитаемому языку, следуя руководству.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.

Простая проверка подлинности и авторизация

В руководстве также показано, как защитить многоуровневое приложение, получив доступ к защищенному серверному API от имени прошедшего проверку подлинности пользователя, как в коде сервера, так и в коде браузера.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.

Расширенная проверка подлинности и авторизация

Это только некоторые из возможных сценариев проверки подлинности и авторизации в службе приложений.These are only some of the possible authentication and authorization scenarios in App Service.

Ниже приведен полный список сведений, которые вы узнаете из этого руководства:Here's a more comprehensive list of things you learn in the tutorial:

  • Включение встроенной проверки подлинности и авторизации.Enable built-in authentication and authorization
  • Защита приложений от непроверенных запросов.Secure apps against unauthenticated requests
  • Использование Azure Active Directory в качестве поставщика удостоверений.Use Azure Active Directory as the identity provider
  • Доступ к удаленному приложению от имени выполнившего вход пользователя.Access a remote app on behalf of the signed-in user
  • Безопасные вызовы между службами с помощью проверки подлинности с использованием токена.Secure service-to-service calls with token authentication
  • Использование маркера доступа из серверного кода.Use access tokens from server code
  • Использование маркера доступа из клиентского кода (браузер).Use access tokens from client (browser) code

Шаги, описанные в этом руководстве, можно выполнить для macOS, Linux и Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начать работу.If you don't have an Azure subscription, create a free account before you begin.

Предварительные требованияPrerequisites

Для работы с этим руководством сделайте следующее:To complete this tutorial:

Создание локального приложения .NET CoreCreate local .NET Core app

На этом шаге вы настроите локальный проект .NET Core.In this step, you set up the local .NET Core project. Используйте один и тот же проект для развертывания серверного приложения API и интерфейсного веб-приложения.You use the same project to deploy a back-end API app and a front-end web app.

Клонирование и запуск примера приложенияClone and run the sample application

Затем выполните следующие команды, чтобы клонировать репозиторий с примером и запустить его.Run the following commands to clone the sample repository and run it.

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

Перейдите к http://localhost:5000 и попробуйте добавить, изменить и удалить объекты списка дел.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

Выполняющийся локально API ASP.NET Core

Чтобы остановить ASP.NET Core в любое время, нажмите клавиши Ctrl+C в окне терминала.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Использование Azure Cloud ShellUse Azure Cloud Shell

В Azure есть Azure Cloud Shell, интерактивная оболочка среды, с которой можно работать в браузере.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Для работы со службами Azure можно использовать Bash или PowerShell с Cloud Shell.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Для запуска кода из этой статьи можно использовать предварительно установленные команды Cloud Shell. Ничего дополнительного в локальной среде устанавливать не нужно.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Начало работы с Azure Cloud ShellTo start Azure Cloud Shell:

ПараметрOption Пример и ссылкаExample/Link
Нажмите кнопку Попробовать в правом верхнем углу блока с кодом.Select Try It in the upper-right corner of a code block. При нажатии кнопки Попробовать код не копируется в Cloud Shell автоматически.Selecting Try It doesn't automatically copy the code to Cloud Shell. Открытие Azure Cloud Shell с помощью кнопки "Попробовать"
Перейдите по адресу https://shell.azure.com или нажмите кнопку Запуск Cloud Shell, чтобы открыть Cloud Shell в браузере.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Запуск Cloud Shell в новом окнеLaunch Cloud Shell in a new window
Нажмите кнопку Cloud Shell в строке меню в правом верхнем углу окна портала Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Кнопка "Cloud Shell" на портале Azure

Чтобы выполнить код из этой статьи в Azure Cloud Shell, выполните следующие действия:To run the code in this article in Azure Cloud Shell:

  1. Запустите Cloud Shell.Start Cloud Shell.

  2. В блоке кода нажмите кнопку Копировать, чтобы скопировать код.Select the Copy button on a code block to copy the code.

  3. Вставьте код в окно сеанса Cloud Shell, нажав клавиши CTRL+SHIFT+V в Windows и Linux или CMD+SHIFT+V в macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Нажмите клавишу ВВОД, чтобы выполнить код.Select Enter to run the code.

Развертывание приложений в AzureDeploy apps to Azure

На этом шаге разверните проект в двух приложениях службы приложений.In this step, you deploy the project to two App Service apps. Одно из которых интерфейсное приложение, а второе — серверное.One is the front-end app and the other is the back-end app.

Настойка пользователя развертыванияConfigure a deployment user

Для развертывания в веб-приложение Azure из FTP и локального репозитория Git можно использовать пользователя развертывания.FTP and local Git can deploy to an Azure web app by using a deployment user. Настроив один раз пользователя развертывания, вы сможете использовать его для всех последующих развертываний в Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Имя пользователя и пароль учетной записи развертывания отличаются от учетных данных подписки Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Чтобы настроить пользователя развертывания, выполните в Azure Cloud Shell команду az webapp deployment user set.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Вместо <username> и <password> укажите имя пользователя и пароль развертывания.Replace <username> and <password> with a deployment user username and password.

  • Имя пользователя должно быть уникальным в Azure. Кроме того, чтобы отправка в локальный репозиторий Git работала, имя пользователя не должно содержать символ @.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Пароль должен содержать не менее восьми символов и включать два из трех следующих элементов: буквы, цифры и символы.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>

В выходных данных JSON пароль отображается как null.The JSON output shows the password as null. Если появляется сообщение об ошибке 'Conflict'. Details: 409, измените имя пользователя.If you get a 'Conflict'. Details: 409 error, change the username. Если появляется сообщение об ошибке 'Bad Request'. Details: 400, используйте более надежный пароль.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Запишите имя пользователя и пароль и используйте их для развертывания веб-приложений.Record your username and password to use to deploy your web apps.

Создание ресурсов AzureCreate Azure resources

В Cloud Shell введите следующие команды, чтобы создать два веб-приложения:In the Cloud Shell, run the following commands to create two web apps. Замените <front-end-app-name> и <back-end-app-name>- двумя глобально уникальными именами приложений (допустимые символы: , a-z и 0-9).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Дополнительные сведения о каждой команде см. в статье Размещение API-интерфейсов RESTful с поддержкой CORS в службе приложений Azure.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

Примечание

Сохраните URL-адреса удаленных элементов Git вашего интерфейсного и серверного приложения, которые отображаются в выходных данных 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.

Публикация в Azure из GitPush to Azure from Git

В окне терминала на локальном компьютере выполните следующие команды Git, чтобы выполнить развертывание в серверное приложение.Back in the local terminal window, run the following Git commands to deploy to the back-end app. Замените <deploymentLocalGitUrl-of-back-end-app> URL-адресом удаленного репозитория Git, который вы сохранили на этапе создания ресурсов Azure.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. При появлении запроса на ввод учетных данных в диспетчере учетных данных Git введите учетные данные развертывания (а не используемые для входа на портал Azure).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

В окне терминала на локальном компьютере выполните следующие команды Git, чтобы выполнить развертывание аналогичного кода в интерфейсное приложение.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. Замените <deploymentLocalGitUrl-of-front-end-app> URL-адресом удаленного репозитория Git, который вы сохранили на этапе создания ресурсов 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

Переход к приложениямBrowse to the apps

Перейдите по следующим URL-адресам в браузере и посмотрите, как работают два приложения.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

API ASP.NET Core, выполняющийся в службе приложений Azure

Примечание

Если приложение перезапускается, возможно, вы заметили, что новые данные были удалены.If your app restarts, you may have noticed that new data has been erased. Это сделано намеренно, так как пример приложения ASP.NET Core использует базу данных в памяти.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Вызов серверного API из внешнего интерфейсаCall back-end API from front end

На этом шаге укажите код сервера интерфейсного приложения для доступа к серверному API.In this step, you point the front-end app's server code to access the back-end API. Позже вы включите доступ с проверкой подлинности от интерфейсной части к серверной.Later, you enable authenticated access from the front end to the back end.

Изменение интерфейсного кодаModify front-end code

В локальном репозитории откройте Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs. В начале класса TodoController добавьте следующие строки и замените <back-end-app-name> именем вашего внутреннего приложения.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";

Найдите метод, помеченный [HttpGet], и замените код внутри фигурных скобок следующим: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);

Первая строка осуществляет вызов GET /api/Todo к приложению серверного API.The first line makes a GET /api/Todo call to the back-end API app.

Затем найдите метод, помеченный [HttpGet("{id}")], и замените код внутри фигурных скобок следующим: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");

Первая строка осуществляет вызов GET /api/Todo/{id} к приложению серверного API.The first line makes a GET /api/Todo/{id} call to the back-end API app.

Затем найдите метод, помеченный [HttpPost], и замените код внутри фигурных скобок следующим: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");

Первая строка осуществляет вызов POST /api/Todo к приложению серверного API.The first line makes a POST /api/Todo call to the back-end API app.

Затем найдите метод, помеченный [HttpPut("{id}")], и замените код внутри фигурных скобок следующим: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();

Первая строка осуществляет вызов PUT /api/Todo/{id} к приложению серверного API.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

Затем найдите метод, помеченный [HttpDelete("{id}")], и замените код внутри фигурных скобок следующим: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();

Первая строка осуществляет вызов DELETE /api/Todo/{id} к приложению серверного API.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Сохраните изменения.Save all your changes. В окне терминала на локальном компьютере выполните следующие команды 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

Проверка измененийCheck your changes

Перейдите к http://<front-end-app-name>.azurewebsites.net и добавьте несколько элементов, например from front end 1 и 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.

Перейдите к http://<back-end-app-name>.azurewebsites.net, чтобы просмотреть элементы, добавленные из интерфейсного приложения.Navigate to http://<back-end-app-name>.azurewebsites.net to see the items added from the front-end app. Кроме того, добавьте несколько элементов, например from back end 1 и from back end 2, а затем обновите интерфейсное приложение, чтобы проверить изменения.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.

API ASP.NET Core, выполняющийся в службе приложений Azure

Настройка проверки подлинностиConfigure auth

На этом шаге включите проверку подлинности и авторизацию для двух приложений.In this step, you enable authentication and authorization for the two apps. Кроме того, настройте создание маркера доступа в интерфейсном приложении, который вы можете использовать для осуществления прошедших проверку подлинности вызовов серверного приложения.You also configure the front-end app to generate an access token that you can use to make authenticated calls to the back-end app.

Azure Active Directory используется в качестве поставщика удостоверений.You use Azure Active Directory as the identity provider. Дополнительные сведения см. в статье Настройка приложения службы приложений для использования входа с помощью Azure Active Directory.For more information, see Configure Azure Active Directory authentication for your App Services application.

Включение проверки подлинности и авторизации в серверном приложенииEnable authentication and authorization for back-end app

В меню портала Azure выберите Группы ресурсов или выполните поиск по запросу Группы ресурсов на любой странице и выберите этот пункт.In the Azure portal menu, select Resource groups or search for and select Resource groups from any page.

В разделе Группы ресурсов найдите и выберите свою группу ресурсов.In Resource groups, find and select your resource group. В разделе Обзор выберите страницу управления внутреннего приложения.In Overview, select your back-end app's management page.

API ASP.NET Core, выполняющийся в службе приложений Azure

В левом меню вашего внутреннего приложения выберите Проверка подлинности или авторизация, а затем включите проверку подлинности Службы приложений, выбрав Включено.In your back-end app's left menu, select Authentication / Authorization, then enable App Service Authentication by selecting On.

В раскрывающемся списке Предпринимаемое действие, если проверка подлинности для запроса не выполнена выберите Войти с использованием Azure Active Directory.In Action to take when request is not authenticated, select Log in with Azure Active Directory.

В разделе Поставщики проверки подлинности выберите Azure Active Directory.Under Authentication Providers, select Azure Active Directory.

API ASP.NET Core, выполняющийся в службе приложений Azure

Выберите Экспресс, затем примите настройки по умолчанию, чтобы создать приложение AD, и нажмите кнопку ОК.Select Express, then accept the default settings to create a new AD app and select OK.

На странице Проверка подлинности или авторизация нажмите кнопку Сохранить.In the Authentication / Authorization page, select Save.

После того как вы увидите уведомление с сообщением Successfully saved the Auth Settings for <back-end-app-name> App, обновите страницу портала.Once you see the notification with the message Successfully saved the Auth Settings for <back-end-app-name> App, refresh the portal page.

Щелкните Azure Active Directory еще раз, а затем выберите Приложение Azure AD.Select Azure Active Directory again, and then select the Azure AD App.

Скопируйте Идентификатор клиента приложения Azure в Блокнот.Copy the Client ID of the Azure AD application to a notepad. Это значение понадобится позже.You need this value later.

API ASP.NET Core, выполняющийся в службе приложений Azure

На этот момент у вас уже есть автономное приложение, которое защищено функциями аутентификации и авторизации в службе приложений.If you stop here, you have a self-contained app that's already secured by the App Service authentication and authorization. В остальных разделах показано, как защитить решение с несколькими приложениями, "проводя" данные аутентифицированного пользователя от внешнего интерфейса к серверной части.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.

Включение проверки подлинности и авторизации в интерфейсном приложенииEnable authentication and authorization for front-end app

Выполните те же действия для внешнего приложения, но пропустите последний шаг.Follow the same steps for the front-end app, but skip the last step. Для интерфейсного приложения идентификатор клиента не требуется.You don't need the client ID for the front-end app.

При необходимости перейдите по ссылке http://<front-end-app-name>.azurewebsites.net.If you like, navigate to http://<front-end-app-name>.azurewebsites.net. Теперь она должна направить вас на защищенную страницу входа.It should now direct you to a secured sign-in page. После входа вы по-прежнему не можете получить доступ к данным из внутреннего приложения, так как внутреннее приложение теперь требует входа в Azure Active Directory из интерфейсного приложения.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. Необходимо выполнить три действия:You need to do three things:

  • Предоставить доступ из интерфейсной части к серверной.Grant the front end access to the back end
  • Настроить службу приложений, чтобы вернуть доступный токен.Configure App Service to return a usable token
  • Использовать токен в коде.Use the token in your code

Совет

Если вы столкнулись с ошибками и перенастроили параметры проверки подлинности или авторизации в своем приложении, токены в хранилище токенов не могут быть восстановлены из новых параметров.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. Чтобы убедиться, что ваши токены восстановлены, вам нужно выйти из приложения и войти в него.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. Для этого проще всего использовать браузер в режиме защищенного просмотра, затем закрыть и снова открыть браузер в режиме защищенного просмотра после изменения параметров в своих приложениях.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.

Предоставление интерфейсному приложению доступа к серверной частиGrant front-end app access to back end

Теперь, когда вы включили проверку подлинности и авторизацию для обоих ваших приложений, каждое из них поддерживается приложением AD.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. На этом шаге предоставьте разрешения интерфейсному приложению для доступа к серверной части от имени пользователя.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Технически вы предоставляете интерфейсному приложению AD разрешения на доступ к серверному приложению AD от имени пользователя).(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

В меню портала Azure выберите Azure Active Directory или выполните поиск по запросу Azure Active Directory на любой странице и выберите этот пункт.In the Azure portal menu, select Azure Active Directory or search for and select Azure Active Directory from any page.

Поочередно выберите Регистрация приложений > Собственные приложения > View all applications in this directory (Просмотреть все приложения в этом каталоге).Select App registrations > Owned applications > View all applications in this directory. Щелкните имя внешнего приложения, а затем выберите Разрешения API.Select your front-end app name, then select API permissions.

API ASP.NET Core, выполняющийся в службе приложений Azure

Выберите Добавить разрешение, а затем — Интерфейсы API, используемые моей организацией > <back-end-app-name> .Select Add a permission, then select APIs my organization uses > <back-end-app-name>.

На страницеРазрешения API запросов серверного приложения выберитеДелегированные разрешения и user_impersonation, а затем — Добавить разрешения.In the Request API permissions page for the back-end app, select Delegated permissions and user_impersonation, then select Add permissions.

API ASP.NET Core, выполняющийся в службе приложений Azure

Настройка службы приложений для возвращения используемых маркеров доступаConfigure App Service to return a usable access token

Теперь интерфейсное приложение имеет необходимые разрешения для доступа к серверному приложению в качестве вошедшего в систему пользователя.The front-end app now has the required permissions to access the back-end app as the signed-in user. На этом шаге настройте проверку подлинности и авторизацию в службе приложений, чтобы получить доступный маркер доступа для доступа к серверной части.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Для этого шага вам понадобится идентификатор клиента серверного приложения, который вы скопировали на шаге Включение проверки подлинности и авторизации в серверном приложении.For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Перейдите к обозревателю ресурсов Azure и с помощью дерева ресурсов найдите интерфейсное веб-приложение.Navigate to Azure Resource Explorer and using the resource tree, locate your front-end web app.

Теперь обозреватель ресурсов Azure открывается с помощью интерфейсного приложения, выбранного в дереве ресурсов.The Azure Resource Explorer is now opened with your front-end app selected in the resource tree. В верхней части страницы щелкните Чтение и запись, чтобы внести изменения в обозревателе ресурсов Azure.At the top of the page, click Read/Write to enable editing of your Azure resources.

API ASP.NET Core, выполняющийся в службе приложений Azure

В браузере слева перейдите к разделу config > authsettings.In the left browser, drill down to config > authsettings.

В представлении authsettings щелкните Изменить.In the authsettings view, click Edit. Установите значение additionalLoginParams в следующей строке JSON, используя идентификатор клиента, который вы скопировали.Set additionalLoginParams to the following JSON string, using the client ID you copied.

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

API ASP.NET Core, выполняющийся в службе приложений Azure

Сохраните настройки, щелкнув PUT.Save your settings by clicking PUT.

Теперь приложение настроено.Your apps are now configured. Теперь интерфейсная часть готова к доступу к серверной части с помощью соответствующего маркера доступа.The front end is now ready to access the back end with a proper access token.

Сведения о том, как настроить этот маркер доступа в других поставщиках, см. в разделе об обновлении маркеров поставщиков удостоверений.For information on how to configure the access token for other providers, see Refresh identity provider tokens.

Безопасный вызов API из кода сервераCall API securely from server code

На этом шаге активируйте ранее измененный код сервера, чтобы выполнять аутентифицированные вызовы серверного API.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

Теперь ваше интерфейсное приложение имеет требуемое разрешение, а также добавляет идентификатор клиента серверного приложения к параметрам входа.Your front-end app now has the required permission and also adds the back end's client ID to the login parameters. Таким образом, оно может получить маркер доступа для проверки подлинности в серверном приложении.Therefore, it can obtain an access token for authentication with the back-end app. Служба приложений поставляет этот токен в код сервера, внедряя заголовок X-MS-TOKEN-AAD-ACCESS-TOKEN в каждый аутентифицированный запрос (см. раздел об извлечении токена в коде приложения).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).

Примечание

Эти заголовки внедряются для всех поддерживаемых языков.These headers are injected for all supported languages. Доступ к ним осуществляется с помощью стандартного шаблона для каждого соответствующего языка.You access them using the standard pattern for each respective language.

В локальном репозитории снова откройте Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs again. В конструкторе TodoController(TodoContext context) добавьте следующий код.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"]);
}

Этот код добавляет стандартный HTTP-заголовок Authorization: Bearer <access-token> ко всем удаленным вызовам API.This code adds the standard HTTP header Authorization: Bearer <access-token> to all remote API calls. В конвейере выполните запрос ASP.NET Core MVC. OnActionExecuting выполняется непосредственно перед соответствующим действием, поэтому каждый исходящий вызов API теперь представляет маркер доступа.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.

Сохраните изменения.Save all your changes. В окне терминала на локальном компьютере выполните следующие команды 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

Войдите в https://<front-end-app-name>.azurewebsites.net еще раз.Sign in to https://<front-end-app-name>.azurewebsites.net again. На странице соглашения об использовании пользовательских данных нажмите кнопку Принять.At the user data usage agreement page, click Accept.

Теперь вы можете создавать, читать, обновлять и удалять данные из серверного приложения прямо в приложении.You should now be able to create, read, update, and delete data from the back-end app as before. Единственное отличие теперь в том, что оба приложения защищены проверкой подлинности и авторизацией службы приложений, включая вызовы между службами.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Поздравляем!Congratulations! Код сервера теперь получает доступ к данным серверной части от имени пользователя, прошедшего проверку подлинности.Your server code is now accessing the back-end data on behalf of the authenticated user.

Безопасный вызов API из кода браузераCall API securely from browser code

На этом шаге укажите внешний API для интерфейсного приложения Angular.js.In this step, you point the front-end Angular.js app to the back-end API. Таким образом, вы узнаете, как получить маркер доступа и осуществлять с его помощью вызовы API к серверному приложению.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

Код сервера имеет доступ к заголовкам запроса, код клиента может получить доступ к GET /.auth/me, чтобы получить те же токены доступа (см. разделПолучение токенов в коде приложения).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).

Совет

В этом разделе используются стандартные методы HTTP, чтобы продемонстрировать безопасные вызовы HTTP.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. Тем не менее вы можете использовать библиотеку проверки подлинности Майкрософт для JavaScript, чтобы упростить шаблон приложения Angular.js.However, you can use Microsoft Authentication Library for JavaScript to help simplify the Angular.js application pattern.

Настройка CORSConfigure CORS

В Cloud Shell включите CORS для URL-адреса своего клиента с помощью команды az webapp cors add.In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Замените заполнители <back-end-app-name> и <front-end-app-name> .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'

Этот шаг не связан с проверкой подлинности и авторизацией.This step is not related to authentication and authorization. Тем не менее, это нужно, чтобы ваш браузер разрешал использовать междоменные вызовы API из вашего приложения Angular.js.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. Дополнительные сведения см. в разделе Добавление функциональных возможностей CORS.For more information, see Add CORS functionality.

Указание серверного API для приложения Angular.jsPoint Angular.js app to back-end API

В локальном репозитории откройте wwwroot/index.html.In the local repository, open wwwroot/index.html.

В строке 51 задайте для переменной apiEndpoint URL-адрес HTTPS внутреннего приложения (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). Замените <back-end-app-name> именем своего приложения в Службе приложений.Replace <back-end-app-name> with your app name in App Service.

Откройте локальный репозиторий wwwroot/app/scripts/todoListSvc.js и убедитесь, что apiEndpoint указан для всех вызовов API.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. Теперь приложение Angular.js вызывает серверные API-интерфейсы.Your Angular.js app is now calling the back-end APIs.

Добавление маркера доступа в вызовы APIAdd access token to API calls

В wwwroot/app/scripts/todoListSvc.js над списком вызовов API (над строкой getItems : function(){) добавьте следующую функцию в список: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;
},

Эта функция вызывается для установки заголовка Authorization по умолчанию с маркером доступа.This function is called to set the default Authorization header with the access token. Он будет вызываться на следующем шаге.You call it in the next step.

В локальном репозитории wwwroot/app/scripts/app.js найдите следующий код: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" });

Замените весь блок кода следующим кодом.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" });

При новом изменении добавляется сопоставление resolve, которое вызывает /.auth/me и устанавливает маркер доступа.The new change adds the resolve mapping that calls /.auth/me and sets the access token. Это гарантирует, что у вас есть маркер доступа до создания экземпляра контроллера todoListCtrl.It makes sure you have the access token before instantiating the todoListCtrl controller. Таким образом, все вызовы API с помощью контроллера содержат токен.That way all API calls by the controller includes the token.

Развертывание и тестированиеDeploy updates and test

Сохраните изменения.Save all your changes. В окне терминала на локальном компьютере выполните следующие команды 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

Перейдите к https://<front-end-app-name>.azurewebsites.net еще раз.Navigate to https://<front-end-app-name>.azurewebsites.net again. Теперь вы можете создавать, читать, обновлять и удалять данные с серверного приложения прямо в приложении 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.

Поздравляем!Congratulations! Код клиента теперь получает доступ к данным серверной части от имени пользователя, прошедшего проверку подлинности.Your client code is now accessing the back-end data on behalf of the authenticated user.

Когда истекает срок действия маркеров доступаWhen access tokens expire

Срок действия маркеров доступа истекает через некоторое время.Your access token expires after some time. Сведения об обновлении маркеров доступа без повторной проверки подлинности пользователей в приложении см. в разделе об обновлении маркеров поставщиков удостоверений.For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Очистка ресурсовClean up resources

На предыдущем шаге вы создали ресурсы Azure в группе ресурсов.In the preceding steps, you created Azure resources in a resource group. Если эти ресурсы вам не понадобятся в будущем, вы можете удалить группу ресурсов, выполнив следующую команду в 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

Ее выполнение может занять до минуты.This command may take a minute to run.

Дальнейшие действияNext steps

Вы научились выполнять следующие задачи:What you learned:

  • Включение встроенной проверки подлинности и авторизации.Enable built-in authentication and authorization
  • Защита приложений от непроверенных запросов.Secure apps against unauthenticated requests
  • Использование Azure Active Directory в качестве поставщика удостоверений.Use Azure Active Directory as the identity provider
  • Доступ к удаленному приложению от имени выполнившего вход пользователя.Access a remote app on behalf of the signed-in user
  • Безопасные вызовы между службами с помощью проверки подлинности с использованием токена.Secure service-to-service calls with token authentication
  • Использование маркера доступа из серверного кода.Use access tokens from server code
  • Использование маркера доступа из клиентского кода (браузер).Use access tokens from client (browser) code

Перейдите к следующему руководству, чтобы научиться сопоставлять пользовательские DNS-имена с приложением.Advance to the next tutorial to learn how to map a custom DNS name to your app.