AzureWebApps上に構築したSPA+REST APIのウェブアプリにAADで認証を設定してみた

Last updated at 2021-03-25Posted at 2021-03-09

はじめに

単純な認証は、これだけでOKです。
ブラウザからWebアプリを開くと、AADでの認証を求められます。

フロントエンド側同様に、RestAPI側もWebAppsのコンソールからApp Service認証を「オン」にして、Azure Active Directoryを選択します
詳細モードに切り替えて、クライアントID、発行者のURL、クライアントシークレットを入力してください
- この値はフロントエンド側の同じ画面（AADの設定の詳細モード）を開いて、コピーしてください
  - そうすることで、フロントエンド側と同じ認証情報でRestAPIを呼び出すことができます

とりあえず、これで、コンソールから認証の設定ができました。

.auth/meから取れるtokenは、残念ながら有効期限が切れても更新されません
更新するには、.auth/refreshを呼び出してください
ただし、何も設定をしないと、うまく更新されてくれませんでした。下記の設定が必要だと思われます。
- Azure Resource Explore( https://resources.azure.com ) を開く
- フロントエンド側のWeb Appsのリソースの認証設定にたどり着く
  - subscriptions > ** <subscription_name** > resourceGroups > **_ <resource_group_name> ** > providers > Microsoft.Web > sites > ** <app_name>** > config > authsettings
- additionalLoginParamsを下記のように書き換える。<app_id> はAADのアプリクライアントID
  - "additionalLoginParams": ["response_type=code id_token", "resource=<app_id>"]
このあたり、よく分かってないので間違えているかもしれません。Azureのドキュメントを貼っておくので、そちらを読み解いてもらえればと。
- https://docs.microsoft.com/ja-jp/azure/app-service/app-service-authentication-how-to

ここまでで問題なく動けばOKですが、431エラーが出ることがあります。
認証設定によりヘッダーが追加されて、ヘッダー長が長すぎることが原因です。
環境変数で WEBSITE_AUTH_DISABLE_IDENTITY_FLOW=trueを設定することで回避出来ます。
これも正直良くわかってないです。Azure OSS Developer Supportに記事があったので、そちらを参照してください。
- https://azureossd.github.io/2020/07/25/HTTP-431s-on-Azure-App-Services-Linux/

AzureWebApps上に構築したSPA+REST APIのウェブアプリにAADで認証を設定できた