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

いわさです。

以下の記事では、事前構成済みプロバイダーを使うことで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のリダイレクト部分は削除しています。
カスタム認証を使用すると、事前構成済みのすべてのプロバイダーが無効になるためです。

staticwebapp.config.json

{
    "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）をアプリ設定に追加します。

確認

静的WebサイトへアクセスするとAzure ADの認証画面へ遷移します。
まずは、対象テナントで認証してみます。

アクセスが出来ました。

次に、対象外のテナントでアクセスしてみましょう。
前回はこちらでもアクセスできましたが...

アクセスできなくなりましたね。

少し触れていましたが、最後にTwitterなど事前構成済みのプロバイダーが無効になっているかも確認しておきます。

こちらも期待どおり無効化されており、特定のAzure ADテナントでのみアクセス出来ることが確認出来ました。

さいごに

本日はStatic Web Appsのカスタム認証を使って特定のAzure ADテナントからのみアクセスを許可させてみました。
思ってたよりも簡単にアクセス制限を行うことが出来ました。前回の事前構成済みプロバイダーの延長くらいな感じです。

AzureドキュメントのチュートリアルではAzure Functionsを使ってSPA側でAzure ADのユーザー情報を取り扱う方法も紹介されています。
Static Web AppsのFunction機能はまだ試せていなかったので、次回以降そのあたりも試してみたいと思います。