限定公開の認証方法にパスワード認証と会員認証がありますが、この機能でサインアウトボタンを追加できるようになりました。
※ BASIC認証には対応していません。

限定公開ページにサインアウトボタンを設置できるようになりました | MovableType.net

今回は実際のサインアウトボタンの設置方法について詳しく解説していきます。

ボタンの設置方法

まず、重要なタグとして <mt:AuthenticationDeleteSessionURL /> が追加されました。このタグではサインアウトに必要なURLが出力されます。

例： https://example.com/.authentication/delete-session

なお、サインアウトは「ウェブサイト内の全てのパスワード認証と会員認証をサインアウトする」になっています。

では、実際にいくつか設置例を紹介します。

サインアウト後、ウェブサイトのトップに遷移

一番シンプルな方法はボタンを押すとウェブサイトのトップに移動する方法になります。

ソースコードは以下になり、

<form action="<mt:AuthenticationDeleteSessionURL />" method="post">
  <button type="submit">サインアウト （サイトトップに戻る）</button>
</form>

実際の表示は以下のようになります。

上記の場合は、配下のブログで会員認証を利用していても、ウェブサイトの直下へリダイレクトされます。

サインアウト後、指定したページへ遷移させる

続いてはリダイレクト後に、特定のページへ遷移させる方法になります。

ソースコードは以下になり、

<form action="<mt:AuthenticationDeleteSessionURL />" method="post">
  <button type="submit">サインアウト （会員トップに戻る）</button>
  <input type="hidden" name="redirect_to" value="/member/" />
</form>

以下のように表示されます。

input タグの value で指定したパスへリダイレクトさせることができます。

JavaScript によるサインアウト

最後は JavaScript によるサインアウトです。

ソースコードは以下になり、

<button id="signout" data-url="<mt:AuthenticationDeleteSessionURL />" type="button">サインアウト（JSで）</button>
<script>
document.getElementById("signout").addEventListener("click", async (ev) => {
  const url = ev.currentTarget.dataset.url;
  await fetch(url, {
    method: "POST",
    credentials: "include",
    headers: {
      "Accept": "application/json",
    },
  });
  alert('サインアウトしました');
  location.reload();
});
</script>

実際には以下のように表示されます。

動作は他とは少し変わり、サインアウトボタンを押すと以下のようなアラートが表示されページ遷移することなくサインアウトします。

以上限定公開のサイトを運用する際に必要に応じてご活用ください。