blog
作成日 : 2024/10/30
更新日 : 2024/10/30
更新日 : 2024/10/30
Azure Static Web Appsの認証を使ってみよう③
前回はログインを追加してみました。
今回はログアウトを追加したいと思います。
ログアウトの追加
まず初めに「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サイトへのアクセスを限定させてみようと思います。