セッションを使用してサインインしたままにするを設定するユースケース

開始前に

以下を確認してください。

アプリケーション用にカスタムドメインが設定された Auth0 テナント
インストールおよび認証が完了している Auth0 CLI
post-login Action
非永続なセッションポリシーを使用する Auth0 テナントセッション
(任意) セッションのアイドルタイムアウト値と絶対セッションタイムアウト値の設定

サインインしたままにする 機能では、信頼済みデバイスでログイン状態を維持するかどうかをユーザーが選択できます。

サインインしたままにする チェックボックスを選択すると、ブラウザーを再起動しても維持される永続的なセッションが設定されます。
サインインしたままにする チェックボックスを選択しない場合は、ブラウザーを閉じると失効する非永続なセッションが設定されます。

非永続 (エフェメラル) セッションと Actions を組み合わせることで、リフレッシュトークンをフロントエンドに公開することなく、このロジックをサーバー側で安全に処理できます。 Custom Prompts、Auth0 CLI、そして Actions 経由のエフェメラルセッションを使用することで、リフレッシュトークン不要、クライアント側でのセッション回避策も不要、さらにバックエンドで完全に制御可能な、安全でモダンな「サインインしたままにする」フローを実装できます。このソリューションは、次を重視するお客様に最適です。

ゼロトラストのブラウザーセッション処理
セッションの永続化を最小限に抑えること
信頼済みデバイスでの上書き制御

ユーザーのサインインしたままにする設定を取得するには、ページテンプレートを設定し、Auth0 CLI を使ってカスタムプロンプトを追加して、Universal Login をカスタマイズする必要があります。

この手順は、テナントで Universal Login テンプレートが設定されていない場合にのみ必要です。

次のコマンドを使用して、ページテンプレートを作成または更新します。

auth0 universal-login templates update

カスタマイズエディターでは、ログインページのテンプレートが開きます。ブランドに合った任意のHTML構造を使用できます。以下は、背景とウィジェットを囲むラッパーを含む最小限のテンプレート例です。

<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1643916861364-02e63ce3e52f");
        background-size: cover;
        background-position: center;
      }
      .prompt-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>
  </head>
  <body class="_widget-auto-layout">
    {% if prompt.name == "login" or prompt.name == "signup" %}
      <div class="prompt-wrapper">
        {%- auth0:widget -%}
      </div>
    {% else %}
      {%- auth0:widget -%}
    {% endif %}
  </body>
</html>

保存してエディターを閉じると、Auth0 CLI に確認メッセージが表示されます:

Do you want to save the template? Yes

▸ Successfully updated the template for the New Universal Login Experience!

2. Auth0 CLI を使用して「サインインしたままにする」チェックボックスを追加する

Universal Login の画面にチェックボックスを追加するには、次の手順に従います。

カスタマイズエディターを開く

テナントの設定に応じて、login-id またはログインプロンプトのカスタマイズエディターを開きます。

auth0 universal-login customize -p login-id

レンダリングモードでstandardを選択します

Rendering Mode: standard

カスタマイズエディターは次のローカルアドレスで起動します：

http://localhost:52649

ご利用のテナントで login と login-id のどちらが使われているかわからない場合は、Auth0のプロンプトのカスタマイズを参照してください。

チェックボックスを設定する

カスタマイズエディターで Partials オプションを開きます。

Prompt を login-id (または login) に設定します
Screen を login-id (または login) に設定します
Partial を form-content-end に設定します

以下の HTML スニペットを追加します。

<div class="ulp-field">
  <input type="checkbox" name="ulp-remember-me" id="remember-me">
  <label for="remember-me">Stay signed in on this device?</label>
</div>

これによりログインフォームの下にチェックボックスがレンダリングされます。

変更をデプロイする

右上にあるDeploy Changesを選択して、カスタマイズ内容を保存し、適用します。

チェックポイント

Universal Login でログインします。ログイン画面には、ログインしたままにするのチェックボックスがあります。

Auth0 CLI で使用する set-session-persistence.js という新しいファイルを作成し、以下のコードを追加します。

exports.onExecutePostLogin = async (event, api) => {

  // パラメーターが存在する場合にのみ変更を適用する
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode('persistent');
  }
};

このActionは、ユーザーがチェックボックスをオンにすると、ブラウザーを再起動した後もセッションCookieが保持されるようにします。信頼済みデバイスのセッションの有効期間も延長するには、以下の信頼済みデバイスのセッション期間を設定するをご覧ください。 set-session-persistence.jsファイルを使用して、Auth0 CLIでpost-login Actionを作成または更新します。

auth0 actions create --name kmsi --trigger post-login --code "$(cat set-session-persistence.js)"

Auth0 CLI は Action ID を返します:

ID             f54c4aae-431f-4290-a7e0-cfc6a3f28386
NAME           kmsi
TYPE           post-login
STATUS         pending
DEPLOYED       ✗
LAST DEPLOYED
LAST UPDATED   0 seconds ago
CREATED        0 seconds ago
CODE           exports.onExecutePostLogin = async (event, api) => {
                   if (event.request.body['ulp-remember-me']) {
                     api.session.setCookieMode("persistent");
                   } else {
                     api.session.setCookieMode("non-persistent");
                   }
                 };

id を使って Action をデプロイします:

auth0 actions deploy <id>

Auth0 Dashboard > Actions > Triggers > Post-Login に移動して、新しいActionを現在のフローに追加し、Apply を選択します。

信頼済みデバイスのセッション期間を設定する

setCookieMode() で制御できるのは、セッション Cookie をブラウザーにどのように渡すかだけです。永続 Cookie はブラウザーを再起動しても保持されますが、非永続 (セッション) Cookie はブラウザーを閉じると削除されます。これはバックエンドセッションの有効期限を変更するものではありません。信頼済みデバイスのセッションの有効期間を長くしたい場合は、api.session.setExpiresAt() または api.session.setIdleExpiresAt() を使って、有効期限を明示的に設定する必要があります。

信頼済みデバイスのセッション有効期間を長くするには、setCookieMode() とあわせて api.session.setExpiresAt() または api.session.setIdleExpiresAt() を使用します。

exports.onExecutePostLogin = async (event, api) => {
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode("persistent");

    const now = Date.now();
    api.session.setExpiresAt(now + 7 * 24 * 60 * 60 * 1000); // 7日間
  } else {
    api.session.setCookieMode("nonpersistent");
  }
};

4. 実装をテストする

セッションの動作を確認するには、次の操作を行います。 Universal Login でログインし、サインインしたままにするチェックボックスをオンにします。

テナントログで、 (イベントタイプ s または ssa) を検索します
- cookie: { mode: "non-persistent" }
- cookie: { mode: "persistent" }
Actions で event.session.cookie.mode を検索します

ユーザーを管理

アクセスを管理する

セッションを使用してサインインしたままにするを設定するユースケース

開始前に

2. Auth0 CLI を使用して「サインインしたままにする」チェックボックスを追加する

カスタマイズエディターを開く

チェックボックスを設定する

変更をデプロイする

チェックポイント

信頼済みデバイスのセッション期間を設定する

4. 実装をテストする

開始前に

​1. Universal Login ページを設定し、カスタムプロンプトを追加する

​任意: Universal Login のページテンプレートを有効化する

​2. Auth0 CLI を使用して「サインインしたままにする」チェックボックスを追加する

​カスタマイズエディターを開く

​チェックボックスを設定する

​変更をデプロイする

​チェックポイント

​3. Auth0 CLI を使用して Post-Login Action を作成する

​信頼済みデバイスのセッション期間を設定する

​4. 実装をテストする

1. Universal Login ページを設定し、カスタムプロンプトを追加する

任意: Universal Login のページテンプレートを有効化する

2. Auth0 CLI を使用して「サインインしたままにする」チェックボックスを追加する

カスタマイズエディターを開く

チェックボックスを設定する

変更をデプロイする

チェックポイント

3. Auth0 CLI を使用して Post-Login Action を作成する

信頼済みデバイスのセッション期間を設定する

4. 実装をテストする