Keep Me Signed In エクスペリエンスは、信頼済みデバイス上でログイン状態を維持するオプションをユーザーに提供します。
-
Keep Me Signed In チェックボックスが選択されている場合、ブラウザの再起動後も維持される永続セッションが設定されます。
-
Keep Me Signed In チェックボックスが選択されていない場合、ブラウザを閉じると失効する非永続セッションが設定されます。
non-persistent（エフェメラル）セッション と Actions を使用すると、リフレッシュトークンをフロントエンドに公開することなく、サーバー側でこのロジックを安全に処理できます。
Custom Prompts、Auth0 CLI、および Actions 経由のエフェメラルセッションを使用することで、リフレッシュトークン不要、クライアント側セッションハック不要、かつバックエンドで完全に制御された、安全でモダンな「Keep Me Signed In」フローを実装できます。
このソリューションは、次を重視するお客様に最適です:
-
ゼロトラストを前提としたブラウザセッション処理
-
最小限のセッション永続化
-
信頼済みデバイスによる上書き設定
1. Universal Login ページを設定し、カスタムプロンプトを追加する
任意: Universal Login ページテンプレートを有効にする
この手順は、テナントに Universal Login テンプレートが構成されていない場合にのみ必要です。
auth0 universal-login templates update
<!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>
Do you want to save the template? Yes
▸ Successfully updated the template for the New Universal Login Experience!
2. Auth0 CLI を使用して「サインインしたままにする」チェックボックスを追加する
- テナントの設定に応じて、login-id プロンプトまたは login プロンプトのカスタマイズエディターを開きます。
auth0 universal-login customize -p login-id
- レンダリングモードは standard を選択します
カスタマイズエディタがローカルアドレスで起動します。
自身のテナントで login と login-id のどちらが使われているか分からない場合は、Auth0 の プロンプトのカスタマイズ を参照してください。
-
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>
ログイン画面には、ログインしたままにする チェックボックスがあります。
3. Auth0 CLI を使用して Post-Login Action を作成する
set-session-persistence.js という名前の新しいファイルを作成し、次のコードを追加します。
exports.onExecutePostLogin = async (event, api) => {
// パラメータが利用可能な場合のみ変更を適用
if (event.request.body['ulp-remember-me']) {
api.session.setCookieMode('persistent');
}
};
set-session-persistence.js ファイルを使って Post-Login Action を作成または更新します。
auth0 actions create --name kmsi --trigger post-login --code "$(cat set-session-persistence.js)"
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>
任意 - 信頼済みデバイスのセッション期間を設定する
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");
}
};
-
テナントログで、イベントタイプが
s または ssa のものを検索し、
-
cookie: { mode: "non-persistent" }
-
cookie: { mode: "persistent" }
-
Actions 内で
event.session.cookie.mode を検索します
