前回は説明と準備まで行いました。

1. はじめに

では、続けます。

認証について

ログイン後、ユーザは「anonymous」(匿名)と「authenticated」(認証済み)ロールに属します。ロール制御はstaticwebapp.config.jsonファイルへ設定します。

Azure Static Web Apps を構成する

認証を済ませたユーザは「/.auth/me」にアクセスするとアクセスしているユーザのロールやIDを参照可能です。

Azure Static Web Apps でのユーザー情報へのアクセス

ログインした状態で、アクセスしてみると以下のように認証済みのユーザー情報を取得することができました。

ログインの追加

「該当のプロバイダーにログインしていない場合、ルートページにアクセスを承認しない」ように変更してみようと思います。

「redirect」のURLに「/.auth/login/aad」を定義します。

ルートページを参照するための権限として「allowedRoles」に「authenticated」(認証済み)を設定します。

{
  "routes": [
    {
      "route": "/login",
      "redirect": "/.auth/login/aad"
    },
    {
      "route": "/",
      "allowedRoles": ["authenticated"]
    }
  ]
}

ログインしていない状態でルートページにアクセスすると、
「authenticated」ロールを保持していないため、http401ページが表示されます。

ログイン用の「/login」にアクセスするとログイン画面が表示されます。

ログインを行うと、ルートページにアクセスすることができました。

次回はログアウトを追加しようと思います。