前回は、ログアウト機能を追加しました。

1. はじめに

2. ログインの追加

3. ログアウトの追加

今回はロール制御について試してみたいと思います。

アクセス制御の設定

現時点では、該当のプロバイダーでログインしていれば全ての画面にアクセス可能な状態です。
それを管理者権限を保有しているユーザのみ参照可能なページを追加してみようと思います。

「admin.html」を追加します。

「admin.html」に「admin権限」を保有するユーザのみアクセスできるように
「staticwebapp.config.json」に「admin」を追加し、「allowedRoles」は「admin」とします。

{
  "routes": [
    {
      "route": "/login",
      "redirect": "/.auth/login/aad"
    },
    {
      "route": "/",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    },
    {
      "route": "/loginlink",
      "rewrite": "/loginlink.html"
    },
    {
      "route": "/admin",
      "rewrite": "/admin.html",
      "allowedRoles": ["admin"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/loginlink"
    }
  }
}

「index.html」へadminページへのリンクを追加します。

<div><a href="/admin">admin page</a></div>

ユーザの招待

「admin」権限を割り当てるユーザをStatic Web Appsへ招待します。

静的Webアプリの左メニューから「設定」>「ロール管理」を選択し、上部の「招待」をクリックします。

[招待リンク作成]ウィンドウで、以下を入力し[生成]をクリックします。

• 認証プロバイダー：[Azure Active Directory]を選択
• 対象のメールアドレス：「Microsoft Entra ID」のログイン用のメールアドレス
• ドメイン：ドメインを選択
• ロール：[admin]を入力
• 招待の有効期限(時間):[1]を入力

「Azure Active Directory」は2023年に「Microsoft Entra ID」に変更されていますが、
Azureポータルやドキュメントにはまだ旧称が残っていたため、注意が必要です。

生成リンクをクリックすると、「招待リンク」が表示されます。

こちらの招待リンクはメール送信されるものと思って待っていたのですが、メールが送付されませんでした。
URLをコピーして招待した人に連絡する必要があります。

では、招待リンクにアクセスしてみましょう。
アクセスするとログイン画面が表示されるため、アカウントを入力し、「次へ」をクリックします。

パスワード入力画面が表示されるため、パスワード入力し「サインイン」をクリックします。

アプリのアクセス許可を確認する画面が表示されます。

「同意」ボタンをクリックするとログインを済ませているため、ログインした状態の画面が表示されます。

そこで[admin page]をクリックするとadmin.htmlへ遷移します。

アクセスを許可したアプリはMicrosoft アカウントから参照することが可能です。

注意

今回の招待する方法には制限が設けられており、現時点では25人が上限です。

詳細については以下のリンクを参照ください。

Azure Static Web Apps のクォータ

もう少し続きます。