メインコンテンツへスキップ

開始前に

以下を準備してください。
  • アプリケーション用に Custom Domain が設定された Auth0 テナント
  • Auth0 CLI がインストールされ、認証済みであること
  • post-login Action
  • non-persistent セッションポリシーを使用する Auth0 のテナントセッション
  • (任意) セッションのアイドルタイムアウト値と絶対タイムアウト値を設定する
Keep Me Signed In では、信頼できるデバイスでログイン状態を維持するかどうかをユーザーが選択できます。
Login image
  • Keep Me Signed In チェックボックスを選択すると、ブラウザーを再起動しても維持される永続セッションが設定されます。
  • Keep Me Signed In チェックボックスを選択しない場合は、ブラウザーを閉じると期限切れになる非永続セッションが設定されます。
non-persistent (ephemeral) sessions と Actions を使用すると、このロジックはフロントエンドにリフレッシュトークンを公開することなく、サーバー側で安全に処理されます。 Custom Prompts、Auth0 CLI、Actions による一時セッションを使用することで、リフレッシュトークンを使わず、クライアント側のセッション回避策も不要で、バックエンドから完全に制御できる、安全でモダンな「Keep Me Signed In」フローを実装できます。 このソリューションは、次を重視するお客様に最適です。
  • ゼロトラストのブラウザーセッション処理
  • セッション永続化の最小化
  • 信頼できるデバイスでの上書き

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

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

​
任意: 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 で確認メッセージが表示されます。 
テンプレートを保存しますか? Yes

▸ New Universal Login Experience のテンプレートが正常に更新されました!

​
2. Auth0 CLI を使用して「Keep Me Signed In」チェックボックスを追加する

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

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

  1. テナントの構成に応じて、login-id または login プロンプトのカスタマイズエディターを開きます。
auth0 universal-login customize -p login-id
  1. レンダリングモードで standard を選択します
Rendering Mode: standard
カスタマイズエディターがローカル アドレスで起動します: 
http://localhost:52649
テナントで login と login-id のどちらが使用されているかわからない場合は、Auth0 のプロンプトのカスタマイズを参照してください。

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

カスタマイズエディターで Partials オプションを開きます。
  1. Prompt を login-id (または login) に設定します
  2. Screen を login-id (または login) に設定します
  3. Partial を form-content-end に設定します
Auth0 CLI partials
次の 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 を使用してログインします。 ログイン画面には、Keep Me Signed Inチェックボックスが表示されます。
ログイン画像

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

Auth0 CLI で使用する set-session-persistence.js という名前の新しいファイルを作成し、以下のコードを追加します。 
exports.onExecutePostLogin = async (event, api) => {

  // パラメーターが存在する場合にのみ変更を適用する
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode('persistent');
  }
};
この Action は、ユーザーがチェックボックスをオンにすると、ブラウザーを再起動してもセッション Cookie が保持されるようにします。信頼できるデバイスのセッション有効期間も延長するには、以下の信頼できるデバイスのセッション有効期間を設定するを参照してください。 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 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");
                   }
                 };
Action の id を使用してデプロイします: 
auth0 actions deploy <id>
Auth0 Dashboard > Actions > Triggers > Post-Login に移動し、新しい Action を現在のフローに追加して、Apply を選択します。
Dashboard Actions Triggers Post Login

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

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 を使用してログインし、Keep Me Signed In チェックボックスをオンにします。
  • テナントログで、 (イベントタイプ s または ssa) を検索します
    • cookie: { mode: "non-persistent" }
    • cookie: { mode: "persistent" }
  • Actions で event.session.cookie.mode を検索します