Azure App Service の認証構成

こんちには！テクバンサポートチームの園田です。
今回は「Azure App Serviceでの認証」についてご紹介です。

前回、『Azure App ServiceでのWebアプリケーション公開』でアプリケーションを公開しました。
しかし、前回公開したアプリケーションは誰でも利用できるものとなっています。

では、アプリケーションを利用できる人に制限を掛ける必要があるときはどうすればいいでしょうか？
その解決方法の一つとして、App Serviceの認証構成があります。

これによって、特に難しいコーディングをすることなくAzureポータル上でWebアプリケーションの認証を構成することができます。
では、さっそく紹介していきます！
※前回の記事の続きになりますので、まだ見てない方は先にこちらを見てくださいね！
『Azure App ServiceでのWebアプリケーション公開』

＜App Service で利用可能な認証＞

App Service で認証を構成する際に利用できる認証プロバイダーは以下の通りです。

Azure Active Directory
Facebook
Google
Twitter
Microsoft

今回は、Azure Active Directory を利用して認証を構成しましょう。
これによって、Webアプリケーションに接続するためには、Azure Active Directoryのアカウント情報が必要となります。

＜認証構成手順～簡易モード～＞

では早速、認証を構成してみましょう。

Azure ポータルを開き、App Service一覧を表示させます。
前回公開したApp Serviceを選択します。
選択したApp Serviceの左メニューから「認証/承認」を選択し、「App Service認証」を「オン」に変更します。
「要求が認証されない場合に実行するアクション」を「Azure Active Directory でのアクション」に変更し、その下部にある認証プロバイダーから「Azure Active Directory」を選択します。
管理モードで「簡易」を選択します。その後以下のように設定を行い、「OK」をクリックします。
以下の設定になっていることを確認し、「保存」をクリックします。

以上で、認証の構成が完了しました。

一度、Azureポータルからサインアウト後、公開したWebアプリケーションを開いてみましょう。
Microsoftの認証画面が表示されるので、アカウント・パスワードを入力し、サインインします。
初回接続時には、「要求されているアクセル許可」ダイアログが表示されますが、「承諾」をクリックして下さい。
その後、Webアプリケーションが開かれます。

＜認証構成手順～詳細モード～＞

前述の簡易モードによる手順は、App ServiceとAzure Active Directoryが同じテナントに存在するときのみ利用できます。
認証先が別テナントの場合、詳細モードで認証を構成します。

Azure ポータルにログインし、Azure Active Directoryを開きます。
その後、「アプリの登録」を選択し、「新しいアプリケーションの登録」を選択します。
アプリ名は任意の名前を入力して下さい。
また、サインオンURLは公開したWebアプリケーションのURLを入力して下さい。
上記入力後、作成をクリックして下さい。
アプリの登録に先ほど作成したアプリ名が追加されていることを確認し、アプリ名をクリックします。「設定」をクリック後、「プロパティ」をクリックします。
「プロパティ」内の「アプリケーションID/URI」と「ホームページURL」に
②でも入力した公開WebアプリケーションのURLを入力して下さい。
その後、「保存」をクリックします。
「応答URL」をクリックし、既に入力されているURLを編集します。
公開WebアプリケーションのURLに「/.auth/login/aad/callback」を追加した文字列を入力します。
また、公開Webアプリケーションが「http://」から始まる場合は、「https://」に変更して下さい。
その後、「保存」をクリックします。
ここで、アプリのアプリケーションIDをコピーし、メモ帳等に保存しておきます。
アプリケーションIDは以下の場所を確認します。
「アプリの登録」に戻り、上部の「エンドポイント」をクリックします。
「フェデレーションメタデータドキュメント」のURLをコピーします。
新しいブラウザを開き、先ほどコピーしたURLを貼り付けます。
赤枠内のURLをコピーし、メモ帳等に保存しておきます。
<認証構成手順～簡易モード～>の手順①~④を実施します。
管理モードで「詳細」を選択し、「クライアントID」には手順⑥で保存したアプリケーションIDを、「発行者のURL」には手順⑧で保存したURLを設定します。
以下の設定になっていることを確認し、「保存」をクリックします。

以上で、詳細モードによる認証構成が完了しました。

簡易モードと同様に一度、Azureポータルからサインアウト後、公開したWebアプリケーションを開いてみましょう。

詳細モードでは簡易モードと違い、認証先となる「発行者のURL」や「クライアントID」を手動で設定することができます。
これによって、同一テナントだけでなく別テナントへの認証を構成することが可能となります。

＜番外編：コーディングによる認証構成＞

今まで、Azure ポータル上でノンコーディングによってWebアプリケーションを変更せずに認証を構成する手順を説明してきました。
最後にコーディングによる認証構成手順を説明します。
Visual Studio を利用することで、認証のコーディングがされた状態のWebアプリケーションを作成することが可能です。

Webアプリケーションを作成します。
「Webアプリケーション（モデルビューコントローラー）」を選択し、さらに「認証の変更」をクリックします。
「認証の変更」ダイアログで「職場または学校アカウント」を指定し、ログインを行う Azure Active Directoryのドメインを「ドメイン」に入力して下さい。
その後、「OK」ボタンをクリックし、ダイアログを閉じます。
設定が以下のようになっていることを確認後、「OK」ボタンをクリックし、Webアプリケーションを作成します。
作成完了後、Azure App ServiceでのWebアプリケーション公開のときと同様にアプリケーションを発行しましょう。
発行後、アプリケーションが立ち上がり、サインイン画面が表示されます。