前回はログインを追加してみました。

1. はじめに

2. ログインの追加

今回はログアウトを追加したいと思います。

ログアウトの追加

まず初めに「HTTPの応答が401の場合、ログインリンクを表示する画面に遷移」し、「ルートページにログアウト用のリンクを追加」します。

staticwebapp.config.jsonに「logout」と「loginlink」のルートを追加し、ログインしていない状態でアクセスした場合、「loginlink」画面へ遷移させるために「responseOverrides」を定義します。

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

  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/loginlink"
    }
  }
}

ログイン用のリンクを定義したloginlink.htmlを追加します。

    <div><a href="/login">Login</a></div>

index.htmlにログアウトリンクを追加します。

    <a href="/logout">Logout</a>

では、確認してみましょう。

該当のURLにアクセスすると、ログインリンクページが表示されます。

ログインするとルートページにアクセスできます。

ルートページのログアウトリンクをクリックすると、ログアウトされるため認証権限がなくなり、ログインリンクページへ遷移します。

これで「Microsoft Entra ID」を保有しているユーザは誰でもログインし、参照できるWEBサイトができました。

次回はWEBサイトへのアクセスを限定させてみようと思います。