ユースケース Configure Keep Me Signed In using Sessions

開始する前に

次の準備ができていることを確認してください:

アプリケーション用に Custom Domain を構成済みの Auth0 テナント
インストールおよび認証済みの Auth0 CLI
post-login Action
Auth0 テナントセッションが non-persistent セッションポリシーを使用していること
（オプション）セッションのアイドルおよび絶対セッションタイムアウト値の構成

Keep Me Signed In エクスペリエンスは、信頼済みデバイス上でログイン状態を維持するオプションをユーザーに提供します。

Keep Me Signed In チェックボックスが選択されている場合、ブラウザの再起動後も維持される永続セッションが設定されます。
Keep Me Signed In チェックボックスが選択されていない場合、ブラウザを閉じると失効する非永続セッションが設定されます。

non-persistent（エフェメラル）セッションと Actions を使用すると、リフレッシュトークンをフロントエンドに公開することなく、サーバー側でこのロジックを安全に処理できます。 Custom Prompts、Auth0 CLI、および Actions 経由のエフェメラルセッションを使用することで、リフレッシュトークン不要、クライアント側セッションハック不要、かつバックエンドで完全に制御された、安全でモダンな「Keep Me Signed In」フローを実装できます。このソリューションは、次を重視するお客様に最適です:

ゼロトラストを前提としたブラウザセッション処理
最小限のセッション永続化
信頼済みデバイスによる上書き設定

ユーザーの Keep Me Signed In の設定内容を取得するには、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 プロンプトまたは login プロンプトのカスタマイズエディターを開きます。

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-footer-end に設定します。

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

<div class="ulp-field">
  <input type="checkbox" name="ulp-remember-me" id="remember-me">
  <label for="remember-me">このデバイスでサインインしたままにしますか?</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');
  } 
};

Auth0 CLI を使用し、set-session-persistence.js ファイルを使って 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秒前
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>

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

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

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 を使用してログインし、Keep Me Signed In チェックボックスを選択します。

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

ユーザーの管理

アクセス管理

ユースケース Configure Keep Me Signed In using Sessions

開始する前に

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. テスト実装