Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

Azure Static Web Appsのサイトにアクセスできるユーザーを限定する

こんにちは、MLBお兄さんこと松村です。
未だに MLB のロックアウトは終わっていません。シーズン開幕の延期も濃厚です。涙


前回の記事で Azure Static Web Apps の認証機能について説明しました。

aadojo.alterbooth.com

今回はこの認証機能を活用して、Azure Static Web Apps のサイトにアクセスできるユーザーを限定する方法について解説します。

ロールでアクセス制御

前回の記事でも言及しましたが、 Azure Static Web Apps の認証機能は staticwebapp.config.json にて定義することができます。

docs.microsoft.com

認証済みのユーザーのみがサイトにアクセス可能となる設定を行うために、前回の記事では最終的に下記の構成としました。

{
  "routes": [
    {
      "route": "/login",
      "redirect": "/.auth/login/github"
    },
    {
      "route": "/",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/login",
      "statusCode": 302
    }
  }
}

カスタムロールでのアクセス制御

例えば、自分専用であったり特定の人だけアクセス可能なサイトを Azure Static Web Apps で構築したい場合、 "allowedRoles": ["authenticated"] では不十分です。
"allowedRoles": ["authenticated"] は認証済みであれば該当するので、アクセスを許可するユーザーを限定することができません。
※IdP側で認証できるユーザーを限定することができるなら、この限りではありません。

Azure Static Web Apps の設定で対応するならば、前述の allowedRoles にカスタムロールを設定し、そのカスタムロールを割り当てるユーザーを Static Web Apps リソースに招待すると良いです。

staticwebapp.config.json

staticwebapp.config.json にてカスタムロールでのアクセス制御を定義するには、以下のように記載します。(抜粋)

{
  "routes": [
    ...
    {
      "route": "/",
      "allowedRoles": ["administrator"]
    },
    ...
  ],

ユーザーの招待

続いて、該当のユーザーを Static Web Apps に招待する手順です。詳しくはドキュメントをご覧ください。

docs.microsoft.com

ユーザーの招待はポータルから行います。この画像のように、Static Web Apps のロール管理にて IdP やユーザー名を入力します。
ここでロール部分に先程 staticwebapp.config.json に記載したカスタムロールを指定します。

f:id:tech-tsubaki:20220308232440p:plain

上記の設定を保存すると招待のための URL が発行されるので、当人に渡して URL にアクセスしてもらいましょう。
URL にアクセスすると IdP のアカウントへの許可フローを求められます。今回は例として GitHub OAuth です。

f:id:tech-tsubaki:20220308232457p:plain

これで Static Web Apps のサイトにアクセスできるユーザーを限定することができます。

注意点

今回の記事で招待した方法には制限が設定されています。(Azureの用語で「クォータ」と言います)
カスタムロールを用いたアクセス制御は 25人 が上限となっています。(記事執筆時点)
詳細はドキュメントにてご確認ください。

docs.microsoft.com

また、Static Web Apps のアクセス制御についての考察としては、こちらの記事がよくまとまっていますので、あわせて紹介します。

ayuina.github.io