Azure Static Web Appsで特定テナントのAzure ADによるカスタム認証を設定をしてみた

いわさ

2022.03.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

以下の記事では、事前構成済みプロバイダーを使うことでAzure Static Web AppsでAzure ADでの認証機能を追加しました。

しかし、事前構成済みプロバイダーでは特定テナントに制限することは出来ず、Azure ADのいずれかの認証が出来ていればアクセス出来る状態でした。
カスタム認証機能を使うと特定テナントの制限が出来るので本日はこちらを構成してみました。

Azure ADへ静的アプリを登録

まず、対象テナントのAzure ADへアプリ情報を登録します。
リダイレクトURIを指定する関係で、カスタム認証実装前の静的アプリを事前に準備しておく必要がありますが、前回の記事で作成したものを使いたいと思いますので割愛します。

Azure ADのアプリの登録から新規アプリを登録します。

登録したアプリの認証からプラットフォーム（Web）を追加します。

構成時にリダイレクトURIを入力しますが、Azure ADで認証後のリダイレクト先になります。
静的Webアプリではデフォルトで以下が用意されています。(blue-island-0984b2a10.1は静的Webのものに変更してください)

ログイン
- https://blue-island-0984b2a10.1.azurestaticapps.net/.auth/login/aad/callback
ログアウト
- https://blue-island-0984b2a10.1.azurestaticapps.net/.auth/logout/aad/callback

登録時にIDトークン（暗黙的およびハイブリッドフローに使用）を有効化しておきます。
静的Webアプリのカスタム認証のチュートリアルでFunctionsを使ってAADのユーザー情報を取得するチュートリアルがあるのですがこの記事では利用しません。次回以降実装する予定なので、ドキュメントに従って必要なものは有効化していきます。

アプリケーション（クライアント）IDとテナントIDを静的Webアプリの構成ファイルに設定するので控えておきます。

次にシークレットを作成し、シークレットの値も控えておいてください。

Static Web Apps でカスタム認証を構成

Static Web Apps側ではアプリ構成ファイルを設定します。
なお、カスタム認証はStandardプランでのみ使用できます。

前回の記事と同じように全ページ認証を必要としています。
authが前回から追加されており、TwitterやGitHubのリダイレクト部分は削除しています。
カスタム認証を使用すると、事前構成済みのすべてのプロバイダーが無効になるためです。

{
    "auth": {
        "identityProviders": {
            "azureActiveDirectory": {
                "registration": {
                    "openIdIssuer": "https://login.microsoftonline.com/<replace-tennanto-id>/v2.0",
                    "clientIdSettingName": "AZURE_CLIENT_ID",
                    "clientSecretSettingName": "AZURE_CLIENT_SECRET"
                }
            }
        }
    },
    "routes": [
        {
            "route": "/*",
            "allowedRoles": [
                "authenticated"
            ]
        }
    ],
    "responseOverrides": {
        "401": {
            "statusCode": 302,
            "redirect": "/.auth/login/aad"
        }
    }
}

最後に、上記のカスタム認証設定で使用している設定情報（AZURE_CLIENT_IDとAZURE_CLIENT_SECRET）をアプリ設定に追加します。