Anmeldeseiten mit Branding gestalten

Das Branding verändert das Aussehen der gehosteten Anmeldung, des Kontoportals und der E-Mails. Die Einstellungen werden in dieser Reihenfolge übernommen: Plattform-Standard, Umgebung, Anwendung, Organisation. Jedes Token übernimmt den Wert von der spezifischsten Ebene, die es definiert.

Was Sie festlegen können

Farben: color.primary, color.primary_contrast, color.background, color.surface, color.text, color.text_muted, color.border, color.link, color.focus_ring, color.error und color.success, als sRGB-Hex-Werte. Hell und Dunkel haben getrennte Werte, und mode ist light, dark oder system.
Schriften: font.body und font.heading aus der erlaubten Schriftliste oder eine hochgeladene Schrift; font.size_base von 14 bis 18 px.
Form: radius.card von 0 bis 24 px und radius.control von 0 bis 16 px.
Layout: center, split_left oder split_right.
Bilder: logo, logo_height (24 bis 80 px), favicon und background_image (nur mit einem split_*-Layout).

Organisationen können nur die Token logo und color.primary überschreiben. Das Branding einer Organisation wird nur angezeigt, wenn der Organisationskontext verifiziert ist, zum Beispiel durch eine gültige Einladung oder nach der Organisationsauswahl. Ein bloßer organization-Parameter ändert das Aussehen der Seite nicht.

Kontrastschutz

Beim Speichern prüft KeenAuth diese Paare, jeweils getrennt für Hell und Dunkel:

Paar	Mindestverhältnis
Text auf Hintergrund	4,5:1
`color.link` auf Hintergrund	4,5:1
`color.primary_contrast` auf `color.primary`	4,5:1
Rahmen der Steuerelemente auf Hintergrund	3:1
Fokusring (`color.focus_ring`) auf Hintergrund	3:1

Ein Paar unterhalb seines Mindestwerts wird von der Management API mit 422 brand_contrast_insufficient (RFC 9457) abgelehnt. Der Fehlerkörper nennt das Feld und schlägt die nächstliegende Farbe vor, die die Prüfung besteht; der Vorschlag behält Farbton und Chroma bei und verändert nur die Helligkeit. Das Dashboard bietet denselben Vorschlag mit einem Klick an. Ein fehlerhafter Wert kann nicht veröffentlicht werden. Das Format des Fehlers finden Sie unter Branding veröffentlichen.

Eigenes CSS (Startup-Tarif) kann den Kontrast verringern, und KeenAuth korrigiert dies nicht. Eine Vorschauprüfung meldet Probleme als Warnungen im Dashboard; die Konformität von Änderungen mit eigenem CSS liegt in Ihrer Verantwortung.

Assets

Bilder und Schriften laden Sie mit POST /v1/branding/assets hoch. Bilder dürfen höchstens 1 MB groß sein, Schriften höchstens 300 KB. Akzeptiert werden PNG, JPEG und WebP, ICO nur für Favicons und WOFF2 nur für Schriften. SVG wird abgelehnt. Bilder werden als PNG neu kodiert, auf höchstens 1024×1024 px verkleinert und von Metadaten bereinigt. Eine Umgebung kann 200 Dateien und 50 MB enthalten.

Eigenes CSS und Vorlagen

Ab dem Startup-Tarif können Sie eigenes CSS und eine Seitenvorlage hinzufügen. Die sicherheitskritischen Teile einer Seite werden in einer geschützten Ebene dargestellt, die Ihr CSS nicht verbergen oder überdecken kann: den Anwendungsnamen und die verifizierte Herkunft auf Zustimmungsbildschirmen, die Liste der angefragten Berechtigungen, die Schaltflächen zum Erlauben und Ablehnen, Sicherheitswarnungen, den Umgebungshinweis und die rechtlichen Links. Kundenseitiges JavaScript wird in keinem Tarif ausgeführt.

Verwenden Sie logische CSS-Eigenschaften (margin-inline-start, nicht margin-left); physische Eigenschaften werden abgelehnt, damit Ihre Stile auch in Sprachen mit Schreibrichtung von rechts nach links funktionieren. Siehe Sprachen und Schreibrichtung von rechts nach links.

KeenAuth-Kennzeichnung

Die gehostete Anmeldung, das Kontoportal und die E-Mails zeigen in der geschützten Ebene eine kleine Zeile „Secured by KeenAuth“. In den Tarifen Business und Enterprise sowie in Umgebungen vom Typ development wird sie nicht angezeigt. Der Tarif wird bei jeder Darstellung einer Seite oder E-Mail geprüft, sodass die Zeile wieder erscheint, wenn sich der Tarif ändert. Eigenes CSS und Textüberschreibungen können sie weder verbergen noch verändern.

Veröffentlichen

Änderungen werden als Entwurf gespeichert und gehen mit der Veröffentlichung live. Frühere Versionen können Sie auflisten und zurücksetzen. Die API-Seiten befinden sich unter /docs/api/management/branding/, beginnend mit Branding veröffentlichen.