ログインページのブランディング
ブランディングは、ホスト型ログイン、アカウントポータル、メールの見た目を変更します。設定は次の順序で継承されます: プラットフォームの既定値、環境、アプリケーション、組織。各トークンは、その値を定義している最も具体的なレベルの値を使用します。
設定できる項目
- 色:
color.primary、color.primary_contrast、color.background、color.surface、color.text、color.text_muted、color.border、color.link、color.focus_ring、color.error、color.success。いずれも sRGB の 16 進数で指定します。ライトとダークには別々の値を設定でき、modeはlight、darkまたはsystemです。 - フォント: 許可されたフォントの一覧から選ぶ
font.bodyとfont.heading、またはアップロードしたフォント。font.size_baseは 14 から 18 px です。 - 形状:
radius.cardは 0 から 24 px、radius.controlは 0 から 16 px です。 - レイアウト:
center、split_left、split_right。 - 画像:
logo、logo_height(24 から 80 px)、favicon、background_image(split_*レイアウトの場合のみ)。
組織が上書きできるのは logo と color.primary のトークンのみです。組織のブランドは、組織のコンテキストが検証された場合にのみ表示されます。たとえば、有効な招待や組織ピッカーの後などです。単独の organization パラメータではページの見た目は変わりません。
コントラストの保護
保存時に KeenAuth は、ライトとダークそれぞれについて次の組み合わせを確認します。
| 組み合わせ | 最小比率 |
|---|---|
| 背景上のテキスト | 4.5:1 |
背景上の color.link |
4.5:1 |
color.primary 上の color.primary_contrast |
4.5:1 |
| 背景上のコントロールの境界線 | 3:1 |
背景上のフォーカスリング(color.focus_ring) |
3:1 |
最小値を下回る組み合わせは、Management API により 422 brand_contrast_insufficient(RFC 9457)で拒否されます。エラーの本文には該当フィールドが示され、基準を満たす最も近い色が提案されます。提案では色相と彩度は維持され、明度のみが変更されます。ダッシュボードでも同じ提案をワンクリックで適用できます。基準を満たさない値は公開できません。エラー形式の詳細は ブランディングを公開する を参照してください。
カスタム CSS(Startup プラン)はコントラストを下げる可能性がありますが、KeenAuth はそれを修正しません。プレビューのスキャンでは問題がダッシュボードに警告として表示されます。カスタム CSS による変更の適合性はお客様の責任となります。
アセット
画像とフォントは POST /v1/branding/assets でアップロードします。画像は 1 MB 以下、フォントは 300 KB 以下です。PNG、JPEG、WebP を受け付けます。ICO はファビコンのみ、WOFF2 はフォントのみで受け付けます。SVG は拒否されます。画像は PNG として再エンコードされ、最大 1024×1024 px に縮小され、メタデータは削除されます。環境ごとに 200 ファイル、合計 50 MB まで保存できます。
カスタム CSS とテンプレート
Startup プラン以上では、カスタム CSS とページテンプレートを追加できます。ページのセキュリティ上重要な部分は保護されたレイヤーに描画され、お客様の CSS で非表示にしたり覆ったりすることはできません。対象は、同意画面のアプリケーション名と検証済みのオリジン、要求された権限の一覧、許可と拒否のボタン、セキュリティ警告、環境バナー、法的リンクです。顧客の JavaScript は、どのプランでも実行されません。
論理 CSS プロパティ(margin-inline-start、margin-left ではない)を使用してください。物理プロパティは拒否されるため、スタイルは右から左に書く言語でも機能します。詳細は 言語と右から左への表示 を参照してください。
KeenAuth のマーク
ホスト型ログイン、アカウントポータル、メールには、保護されたレイヤーに「Secured by KeenAuth」という小さな行が表示されます。Business および Enterprise プランと、development 環境では表示されません。プランはページやメールを描画するたびに確認されるため、プランが変更された場合は再び表示されます。カスタム CSS やテキストの上書きで、この表示を隠したり変更したりすることはできません。
公開
変更は下書きとして保存され、公開すると反映されます。以前のバージョンは一覧表示でき、ロールバックもできます。API のページは /docs/api/management/branding/ 配下にあり、最初のページは ブランディングを公開する です。