Azure StaticWebAppsで簡単に認証を行う

対象とする読者

Azure SWAでWebアプリを作ったけど、特定の人にだけ見せたいという人

設定方法

• staticwebapp.config.json ファイルでルールを定義して、許可されているユーザーが制限されたルートにアクセスできるようにします

参考：
https://learn.microsoft.com/ja-jp/azure/static-web-apps/authentication-authorization

ロール

デフォルトではユーザーは anonymous ロールと authenticated ロールに属します。

staticwebapp.config.json

• allowedRoles: 任意の文字列

staticwebapp.config.json

{
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["administrator", "reader"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

招待 & ロール付与方法

• SWAのロール管理メニューを選択

• 招待を押下

• 招待したい人のメールアドレスを指定して生成を押下

  • ロールの説明に閲覧者と日本語で出ているが、まどわされずに「reader」と英字で入力
    

• 招待リンクが発行される

※招待リンクのURL例
https://XXXXX.azurestaticapps.net/.auth/invitations/accept?provider=aad&userDetails=XXXXX&roles=YYYY&se=AAA&sig=BBB