Azure Static Web Appsを試してみた４【Azure AD連携】

# はじめに
以前の記事[Azure Static Web Appsを試してみた３【API（Azure Functions）連携】](https://qiita.com/akihiro-nakano/items/d84efbf67b7df8a42274)でAzure Static Web Appsと、Azure Functionsとの連携について書きました。
今回は、セキュリティを考慮し、認証（Azure Active Directory連携）を取り入れてみます。

## Azure Active Directory
例によって、アプリケーションの登録を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/d1cab668-329b-f329-c0bf-59861c5cb4c8.png)

- リダイレクトURI
    - デフォルトでは「https://サーバー名/.auth/login/aad/callback」となるようなので、「/.auth/login/aad/callback」をつけておきます。

ディレクトリ(テナント)IDと登録後に払い出される「アプリケーション(クライアント)ID」をローカルに保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/844764b8-f2a3-e4c5-49c3-6f1d22ba9bc0.png)

「証明書またはシークレットの追加」をクリックし、クライアントシークレットを作成後、値をローカルに保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/00b0924d-b8cc-20c5-6bc4-93d5fba1d333.png)

また、メニューから「認証」クリックし、IDトークン（暗黙的およびハイブリットフローに使用）をチェック後、保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/16d806d8-4fbc-bec3-c91e-1b32b6a84630.png)



## Static Web Apps
メニューで構成を選択し「アプリケーション設定」に先程、ローカルに保存しておいた「アプリケーションID」と「クライアントシークレット」をそれぞれ登録し、キーをローカルに保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/075158c0-99b0-2da1-56ee-4fbb25807266.png)

## staticwebapp.config.json
app_locationで指定したフォルダの直下に「staticwebapp.config.json」を作成します。


### 認証に関わるAADの設定
入力する情報は以下の通りです。

- openIdIssuer
    - https://login.microsoftonline.com/{保存しておいたテナントID}
- clientIdSettingName
    - 保存しておいたStaticWebAppsのキー(アプリケーションID)
- clientSecretSettingName
    - 保存しておいたStaticWebAppsのキー(クライアントシークレット)

### 認証に関わるルーティングの設定
- ログイン
    - /.auth/login/aad
- ログアウト
    - /.auth/logout
- ログイン後のリダイレクトURL
    - /.auth/login/aad/callback
- 401発生時
    - ログインへリダイレクト
- すべてのエンドポイント
    - allowedRolesをauthenticatedにし、認証済みであることを前提とする

```json
{
  "$schema": "https://json.schemastore.org/staticwebapp.config.json" ,
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/{保存しておいたテナントID}",
          "clientIdSettingName": "AAD_ClientID",
          "clientSecretSettingName": "AAD_Client_Secret"
        }
      }
    }
  },
  "routes": [
    {
      "route": "/login",
      "redirect": "/.auth/login/aad"
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    },
    {
      "route": "/.auth/login/aad/callback",
      "redirect": "/"
    },
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/login",
      "statusCode": 302
    }
  }
}
```

## 動作確認
無事、ログインできていない場合は、ログインページが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/76855264-832f-36b4-1cb3-93e0d9856e1e.png)

ログイン後はアプリケーションのページが表示されます。
（当然API側も認証されていない場合は、loginにリダイレクトされます）

## TIPS
当然ローカル環境でも認証について確認したくなるのですが、以下の手順で可能です。

### static-web-apps-cli
Static Web Apps用のCLIをインストールし、CLIを実行することで疑似的に認証が出来ます。

``` CMD
> npm install -g @azure/static-web-apps-cli
```

以下のコマンドを実行する前にAngularプロジェクトを起動(ng serve)しておく必要があります。

``` CMD
> swa start http://localhost:4200 --swa-config-location ./angular-swa 
```
(./angular-swaは「staticwebapp.config.json」の配置場所です。)

実行後は「http://localhost:4280 」にアクセスすることでAngularアプリにアクセスでき、疑似的にログイン後のユーザー情報の設定画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/ae8e81c5-8ebe-384c-d862-ef6f575f78a6.png)


- 参考：[Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli)

## まとめ
Azure Active Directoryとの連携を試しましたが、OpenID Connectでの連携もサポートされいるようなので、[次回](https://qiita.com/akihiro-nakano/items/4c0f1d90446b0b0dc5cd)はAzure Active Directory B2Cも試してみようと思います。