Azure App Service で実行されている Web アプリに Azure AD 認証を追加する方法

# はじめに
Azure Web App に Azure AD の認証を追加する方法について、
Microsoft 公式のチュートリアルを発見したので、
とりあえず動かすところまで触ってみたいと思います。

# 開発環境
- 開発PC ( Windows 10 Pro )
  - Node.js ( ``v16.13.2`` )
  - Azure CLI ( ``2.32.0`` )
  - Visual Studio Code ( ``1.64.2`` )
- Azure サブスクリプション


# 手順
## サンプルアプリを作成する
検証を進める上で Azure Web App へデプロイするためのサンプルアプリが必要だったため、Azure Web App のクイックスタート (Node.js) - [クイックスタート : Azure で Node.js Web アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-vscode) を元に、サンプルアプリを準備していきます。

Express Generator を使用して、シンプルな Node.js アプリケーションを作成します。

```
npx express-generator sampleApp --view pug
```

プロジェクトフォルダへ移動し、依存パッケージをインストールします。

```
cd sampleApp
npm install
```

開発サーバーを立ち上げます。

```
npm start
```

Web ブラウザで ``localhost:3000`` へアクセスします。

<img width="400" alt="image.png (17.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/3e9e6711-c5f2-4254-80b6-1ffb88a226ff.png">

VSCode の Azure Web App 拡張を使用して、サンプルアプリを Azure Web App へデプロイします (省略)
VSCode から Azure Web App へのデプロイ方法は [公式サイトの手順](https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-vscode#configure-the-app-service-app-and-deploy-code) をご覧ください。

Azure Web App にデプロイが完了すると、**Azure Portal > Azure Web App  [概要] > URL** をクリックして、Web アプリケーションを確認することができます。

<img width="400" alt="image.png (12.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/4d95241c-9e92-4ac1-8545-eaecedd8e04c.png">

## Azure App Service に認証を設定する

Azure Portal を開き、さきほどデプロイした Azure Web App リソースへ移動後、
**ナビゲーションメニュー > 設定 > 認証** を押します。

<img width="800" alt="image.png (347.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/918564a8-0b12-4aa2-9615-c73a8a29a55f.png">

**[ID プロバイダーの追加]** ボタンを押します。

<img width="800" alt="image.png (241.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/05515e82-0625-4481-b3aa-8e0188e279de.png">

**ID プロバイダーの追加** ページに遷移したら、以下の設定を行います。

<img width="800" alt="image.png (209.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/2d54ca09-93c6-41a5-8393-829c99ac7592.png">

| 設定項目 | 設定値 |
| --- | --- |
| ID プロバイダー | Microsoft |
| **アプリの登録** |  |
| アプリの登録の種類 | アプリの登録を新規作成する |
| 名前 | アプリケーションの名前 |
| サポートされているアカウントの種類 | 現在のテナント - 単一テナント |
| **App Service の認証設定** |  |
| アクセスを制御する | 認証が必要 |
| 認証されていない要求 | HTTP 302 リダイレクトが見つかりました: Web サイトに推奨 |
| 次へリダイレクト | ( 既定値 : Microsoft )  |
| トークンストア | チェックを入れる  |

すべての設定項目の入力が完了したら、ページ最下部の **[追加]** ボタンを押して、
対象の Web アプリの認証を有効にします。正常に処理が完了した際は、以下のページに遷移します。

<img width="800" alt="image.png (273.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/641f6e54-d561-4628-b935-608353f8532c.png">

ID プロバイダーの追加により、App Service の認証と認可が有効になり、
アプリが保護されるようになりました。

さきほどと同様に、Web ブラウザから Azure Web App へアクセスをしてみると、
Microsoft の認証ページにリダイレクトされるようになりました。

<img width="800" alt="image.png (757.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/4f456c46-f042-4732-b948-ba141b773a1e.png">

テナント内のユーザーアカウントでサインインを行うと、
**要求されているアクセス許可** と表示されるので、
組織の代理として同意するにチェックを入れ、**承諾** ボタンを押します。

<img width="600" alt="image.png (442.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/b1edbae6-2c09-430e-a27d-f07547734275.png">

Azure Web App にデプロイされている Web アプリケーションを確認することができました。

<img width="400" alt="image.png (12.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/02/26/10862/ecca90e9-6a6c-4415-9d70-efa6ea403be3.png">

## 終わりに
Azure Web App では、フェデレーションID として Microsoft ID プラットフォームの他にも、Facebook や Goolge, Twitter の ID プロバイダーを標準で利用することができるので、今後色々試してみたいと思います。やっぱり触ってみるのが一番理解が早い気がする。


# 参考文献
- [チュートリアル : Azure App Service で実行されている Web アプリに認証を追加する](https://docs.microsoft.com/ja-jp/azure/app-service/scenario-secure-app-authentication-app-service)