招待されたAzure ADユーザーのみがアクセスできるようにすーる（Azure Static Web Apps、Vue3）

はじめに

がちもとさんアドベントカレンダー22日目の記事です。
昨日はスクショを取得し、S3にアップロード、マークダウン形式のリンクを発行するやつをVue3で作りました。今日は、招待されたAzure ADユーザーのみがアクセスできるようにしていきます。

開発環境

• Windows 11 PC
• Vue3
• Azure Static Web Apps

導入

1．Vue3プロジェクト直下にstaticwebapp.config.jsonを配置してプッシュします。

staticwebapp.config.json

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

2．ロール管理から招待リンクを作成します。

3．招待リンクからサインインするとユーザーロールに登録されます。

4．アプリを開いたときにサインインが表示されるようになります。

5．登録されたユーザーロールでサインインすると、表示されます。

6．別のアカウントでサインインすると、きちんとForbiddenされます。

結構簡単ですね。
お疲れさまでした。