チュートリアル:Azure App Service でユーザーをエンド ツー エンドで認証および承認するTutorial: Authenticate and authorize users end-to-end in Azure App Service

Azure App Service は、非常にスケーラブルな、自己適用型の Web ホスティング サービスを提供します。Azure App Service provides a highly scalable, self-patching web hosting service. さらに、App Service には、ユーザーの認証と承認のためのサポートが組み込まれています。In addition, App Service has built-in support for user authentication and authorization. このチュートリアルでは、App Service の認証と承認を使用してアプリケーションをセキュリティで保護する方法を示します。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 の認証と承認では、すべての言語のランタイムがサポートされています。このチュートリアルに沿って、お好みの言語に適用する方法を学習することができます。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 は、Linux オペレーティング システムを使用する、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供します。Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. さらに、App Service には、ユーザーの認証と承認のためのサポートが組み込まれています。In addition, App Service has built-in support for user authentication and authorization. このチュートリアルでは、App Service の認証と承認を使用してアプリケーションをセキュリティで保護する方法を示します。This tutorial shows how to secure your apps with App Service authentication and authorization. ここでは ASP.NET Core アプリと Angular.js フロントエンドが例として使用されています。It uses an ASP.NET Core app with an Angular.js front end as an example. App Service の認証と承認では、すべての言語のランタイムがサポートされています。このチュートリアルに沿って、お好みの言語に適用する方法を学習することができます。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.

高度な認証と承認

これらは、App Service で実現可能な認証および承認のシナリオのごく一部です。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 を ID プロバイダーとして使用する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 サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

前提条件Prerequisites

このチュートリアルを完了するには、以下が必要です。To complete this tutorial:

  • Git をインストールするInstall Git
  • 最新の .NET Core 3.1 SDK をインストールする - Azure Cloud Shell で Bash 環境を使用します。Use the Bash environment in Azure Cloud Shell.新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window - 必要に応じて、Azure CLI をインストールして、CLI リファレンス コマンドを実行します。If you prefer, install the Azure CLI to run CLI reference commands.- ローカル インストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。If you're using a local installation, sign in to the Azure CLI by using the az login command. 認証プロセスを完了するには、ターミナルに表示される手順に従います。To finish the authentication process, follow the steps displayed in your terminal. その他のサインイン オプションについては、Azure CLI でのサインインに関するページを参照してください。For additional sign-in options, see Sign in with the Azure CLI.- 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。When you're prompted, install Azure CLI extensions on first use. 拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。For more information about extensions, see Use extensions with the Azure CLI. - az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。Run az version to find the version and dependent libraries that are installed. 最新バージョンにアップグレードするには、az upgrade を実行します。To upgrade to the latest version, run az upgrade.Install the latest .NET Core 3.1 SDK - Azure Cloud Shell で Bash 環境を使用します。Use the Bash environment in Azure Cloud Shell.新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window - 必要に応じて、Azure CLI をインストールして、CLI リファレンス コマンドを実行します。If you prefer, install the Azure CLI to run CLI reference commands.- ローカル インストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。If you're using a local installation, sign in to the Azure CLI by using the az login command. 認証プロセスを完了するには、ターミナルに表示される手順に従います。To finish the authentication process, follow the steps displayed in your terminal. その他のサインイン オプションについては、Azure CLI でのサインインに関するページを参照してください。For additional sign-in options, see Sign in with the Azure CLI.- 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。When you're prompted, install Azure CLI extensions on first use. 拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。For more information about extensions, see Use extensions with the Azure CLI. - az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。Run az version to find the version and dependent libraries that are installed. 最新バージョンにアップグレードするには、az upgrade を実行します。To upgrade to the latest version, run az upgrade.

ローカル .NET Core アプリを作成するCreate local .NET Core app

この手順では、ローカル .NET Core プロジェクトを設定します。In this step, you set up the local .NET Core project. バックエンド API アプリとフロントエンド Web アプリのデプロイには、同じプロジェクトを使用します。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 に移動し、ToDo 項目の追加、編集、および削除を試みます。Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

ローカルで実行される ASP.NET Core API

任意のタイミングで ASP.NET Core を停止するには、ターミナルで Ctrl+C キーを押します。To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

アプリを Azure にデプロイするDeploy apps to Azure

この手順では、2 つの App Service アプリにプロジェクトをデプロイします。In this step, you deploy the project to two App Service apps. 1 つはフロントエンド アプリで、もう 1 つはバックエンド アプリです。One is the front-end app and the other is the back-end app.

デプロイ ユーザーを構成するConfigure a deployment user

FTP およびローカルの Git では、"デプロイ ユーザー" を使用して Azure Web アプリにデプロイできます。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.
  • パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。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.

Web アプリのデプロイに使用するユーザー名とパスワードを記録します。Record your username and password to use to deploy your web apps.

Azure リソースを作成するCreate Azure resources

Cloud Shell で次のコマンドを実行して、2 つの Windows Web アプリを作成します。In the Cloud Shell, run the following commands to create two Windows web apps. <front-end-app-name> および <back-end-app-name> を、グローバルに一意な 2 つのアプリ名で置き換えてください (有効な文字は、a-z0-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 -). 各コマンドの詳細については、Azure App Service での RESTful API と CORS に関する記事を参照してください。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

Cloud Shell で次のコマンドを実行して、2 つの Web アプリを作成します。In the Cloud Shell, run the following commands to create two web apps. <front-end-app-name> および <back-end-app-name> を、グローバルに一意な 2 つのアプリ名で置き換えてください (有効な文字は、a-z0-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 -). 各コマンドの詳細については、Azure App Service での .NET Core アプリの作成に関するページを参照してください。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

注意

az webapp create の出力に表示されている、フロントエンド アプリとバックエンド アプリの Git リモートの URL を保存します。Save the URLs of the Git remotes for your front-end app and back-end app, which are shown in the output from az webapp create.

Git から Azure へのプッシュPush 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> を、「Azure リソースを作成する」で保存した Git リモートの URL で置き換えます。Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Git Credential Manager によって資格情報の入力を求めるメッセージが表示されたら、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

ローカル ターミナル ウィンドウで、以下の 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> を、「Azure リソースを作成する」で保存した Git リモートの URL で置き換えます。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 に移動し、2 つのアプリが動作していることを確認します。Navigate to the following URLs in a browser and see the two apps working.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

ブラウザー ウィンドウでの Azure App Service Rest API Sample のスクリーンショット。To do list アプリが表示されている。

注意

アプリが再起動されると、新しいデータが消去されていることに気付く場合があります。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);

最初の行は、バックエンド API アプリへの GET /api/Todo 呼び出しを行います。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");

最初の行は、バックエンド API アプリへの GET /api/Todo/{id} 呼び出しを行います。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");

最初の行は、バックエンド API アプリへの POST /api/Todo 呼び出しを行います。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();

最初の行は、バックエンド API アプリへの PUT /api/Todo/{id} 呼び出しを行います。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();

最初の行は、バックエンド API アプリへの DELETE /api/Todo/{id} 呼び出しを行います。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 1from 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 1from 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.

ブラウザー ウィンドウでの Azure App Service Rest API Sample のスクリーンショット。フロントエンド アプリから項目が追加されている To do list アプリが表示されている。

auth を構成するConfigure auth

この手順では、2 つのアプリの認証と承認を有効にします。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.

ID プロバイダーとして Azure Active Directory を使用します。You use Azure Active Directory as the identity provider. 詳細については、App Services アプリケーション用の 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 portal] メニューで [リソース グループ] を選択するか、または任意のページから [リソース グループ] を検索して選択します。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.

サンプル リソース グループの概要を示し、バックエンド アプリの管理ページが選択されている、[リソース グループ] ウィンドウのスクリーンショット。

バックエンド アプリの左側のメニューで [認証] を選択し、 [ID プロバイダーの追加] をクリックします。In your back-end app's left menu, select Authentication, and then click Add identity provider.

[ID プロバイダーの追加] ページで、Microsoft および Azure AD ID にサインインするための ID プロバイダー として [Microsoft] を選択します。In the Add an identity provider page, select Microsoft as the Identity provider to sign in Microsoft and Azure AD identities.

[アプリの登録] > [App registration type](アプリの登録の種類) で、 [Create new app registration](新しいアプリの登録を作成する) を選択します。For App registration > App registration type, select Create new app registration.

[アプリの登録] > [サポートされているアカウントの種類] で、 [現在のテナント - 単一テナント] を選択します。For App registration > Supported account types, select Current tenant-single tenant.

[App Service authentication settings](App Service 認証の設定) セクションで、 [認証][認証が必要] のままにし、 [Unauthenticated requests](認証されていない要求)[HTTP 302 Found redirect: recommended for websites](HTTP 302 Found リダイレクト: Web サイトに推奨) のままにします。In the App Service authentication settings section, leave Authentication set to Require authentication and Unauthenticated requests set to HTTP 302 Found redirect: recommended for websites.

[ID プロバイダーの追加] ページの下部にある [追加] をクリックして、対象の Web アプリの認証を有効にします。At the bottom of the Add an identity provider page, click Add to enable authentication for your web app.

[認証/承認] が選択され、右側のメニューで設定が選択されている、バックエンド アプリの左側のメニューのスクリーンショット。

[認証] ページが開きます。The Authentication page opens. Azure AD アプリケーションの クライアント ID をメモ帳にコピーします。Copy the Client ID of the Azure AD application to a notepad. この値は、後で必要になります。You need this value later.

Azure AD アプリを示している [Azure Active Directory の設定] ウィンドウと、コピーするクライアント ID を示している [Azure AD アプリケーション] ウィンドウのスクリーンショット。

ここで終えた場合でも、既に App Service の認証と承認によってセキュリティが確保された自己完結型のアプリが完成します。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. フロントエンド アプリでは、クライアント ID は必要ありません。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. 次の 3 つの手順を実行する必要があります。You need to do three things:

  • バックエンドへのフロントエンド アクセスを許可するGrant the front end access to the back end
  • 使用可能なトークンを返すように App Service を構成する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 portal] メニューで [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 のアクセス許可] が選択されている、[Microsoft - アプリの登録] ウィンドウのスクリーンショット。

[アクセス許可の追加] を選択し、 [所属する組織で使用している 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.

[委任されたアクセス許可]、user_impersonation、および [アクセス許可の追加] ボタンが選択されているところを示す、[API アクセス許可の要求] ページのスクリーンショット。

使用可能なアクセス トークンを返すように App Service を構成する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. この手順では、バックエンドにアクセスするための使用可能なアクセス トークンを提供するように、App Service の認証および承認を構成します。In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. この手順では、バックエンドのクライアント ID が必要です。この ID は、「バックエンド アプリの認証と承認を有効にする」でコピーしたものです。For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Azure Resource Explorer に移動し、リソース ツリーを使用してフロントエンド Web アプリを見つけます。Navigate to Azure Resource Explorer and using the resource tree, locate your front-end web app.

リソース ツリーでフロントエンド アプリが選択された状態で、Azure Resource Explorer が開きます。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.

[読み取り/書き込み] ボタンが選択されている、[Azure Resource Explorer] ページの上部の [読み取り専用] および [読み取り/書き込み] ボタンのスクリーンショット。

左側のブラウザーで、config > authsettings にドリルダウンします。In the left browser, drill down to config > authsettings.

[authsettings] ビューで、 [編集] をクリックします。In the authsettings view, click Edit. コピーしたクライアント ID を使用して、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>"],

additionalLoginParams 文字列とクライアント ID の例を示す、[authsettings] ビューのコード例のスクリーンショット。

[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.

他のプロバイダー用にアクセス トークンを構成する方法については、「ID プロバイダー トークンの更新」を参照してください。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.

フロントエンド アプリに必要なアクセス許可が付与されていて、バックエンドのクライアント ID もログイン パラメーターに追加されます。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. App Service は、認証された各要求に X-MS-TOKEN-AAD-ACCESS-TOKEN ヘッダーを挿入することで、このトークンをサーバー コードに提供します (「Retrieve tokens in app code (アプリ コードでトークンを取得する)」を参照)。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"]);
}

このコードは、すべてのリモート API 呼び出しに標準の HTTP ヘッダー Authorization: Bearer <access-token> を追加します。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. 唯一の違いは、App Service の認証と承認によって、サービス間呼び出しも含めて、両方のアプリがセキュリティで保護されていることです。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

この手順では、フロントエンドの Angular.js アプリをバックエンド API に合わせて設定します。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 にアクセスして同じアクセス トークンを取得することができます (「Retrieve tokens in app code (アプリ コードでトークンを取得する)」を参照)。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 用 Microsoft Authentication Library を使用すると、Angular.js アプリケーション パターンを簡略化できます。However, you can use Microsoft Authentication Library for JavaScript to help simplify the Angular.js application pattern.

CORS を構成するConfigure CORS

Cloud Shell で az webapp cors add コマンドを使用して、クライアントの URL に対して CORS を有効にします。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. ただし、ブラウザーで Angular.js アプリからのクロスドメイン API 呼び出しが許可されるようにするには、この手順が必要です。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.

Angular.js アプリをバックエンド API に合わせて設定するPoint Angular.js app to back-end API

ローカル リポジトリで、wwwroot/index.html を開きます。In the local repository, open wwwroot/index.html.

行 51 の apiEndpoint 変数を、バックエンド アプリの HTTPS URL (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> は、App Service のアプリ名で置き換えます。Replace <back-end-app-name> with your app name in App Service.

ローカル リポジトリで、wwwroot/app/scripts/todoListSvc.js を開き、すべての API 呼び出しの前に apiEndpoint が付加されていることを確認します。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.

API 呼び出しにアクセス トークンを追加するAdd 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" });

新しい変更では、/.auth/me を呼び出し、アクセス トークンを設定する、resolve マッピングを追加します。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. アプリに対する再認証をユーザーに強制することなくアクセス トークンを更新する方法については、「Refresh identity provider tokens (ID プロバイダー トークンの更新)」を参照してください。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 を ID プロバイダーとして使用する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.