Anpassung der Login-Seite in Casdoor: Individuelles Styling der Authentifizierungs-UI ohne Forking
Ja, Casdoor unterstützt das individuelle Styling seiner Authentifizierungs-UI, und Sie müssen das Frontend nicht forken. Jede Anwendung hat einen Reiter UI Customization, in dem Sie das Logo, Favicon, Hintergrundbild, benutzerdefiniertes CSS für Desktop und Mobilgeräte, die Position des Formulars, ein Seitenpanel, Footer-HTML und ein Theme festlegen können. Zwei Tabellen, Signin items und Signup items, bestimmen, welche Felder auf den Login- und Registrierungsseiten angezeigt werden, in welcher Reihenfolge, mit welchen Beschriftungen und Platzhaltern. All dies wird pro Anwendung in der Datenbank gespeichert, sodass eine Casdoor-Instanz viele unterschiedlich gebrandete Login-Seiten bedienen kann und Organisationsadministratoren ihre eigenen Seiten innerhalb sicherer Grenzen bearbeiten können.
Was geändert werden kann und wo
| Was Sie ändern möchten | Wo in Casdoor | Dokumentation |
|---|---|---|
| Primärfarbe, Eckenradius, dunkler oder kompakter Stil | Theme der Organisation oder der Anwendung, wenn Follow organization theme deaktiviert ist | Customize the theme |
| Ein vollständiges, fertiges Design | Identity → Marketplace, Sign-in themes | Marketplace |
| Logo, Dark Logo, Favicon, Seitentitel | Anwendungs-Bearbeitungsseite | Application settings |
| Hintergrundbild (Desktop und Mobil) | Background URL, Background URL Mobile | UI customization |
| Aussehen des Formulars | Custom CSS, Custom CSS Mobile | UI customization |
| Formular links, mittig oder rechts, oder neben einem Panel | Form position, Side panel HTML | UI customization |
| Text unterhalb des Formulars | Footer HTML | Application settings |
| Welche Felder die Login-Seite anzeigt, Reihenfolge, Platzhalter | Signin items | Sign-in items table |
| Passwort, Code, Magic Link, WebAuthn, LDAP und deren Reihenfolge | Signin methods | Sign-in methods |
| Registrierungsfelder, Pflichtfelder, Beschriftungen, Regex | Signup items | Sign-up items table |
| Sprachauswahl | Languages Sign-in item, Languages der Organisation | Sign-in items table |
| Benutzern erlauben, ihre Organisation auszuwählen oder einzugeben | Org choice mode | Specify login organization |
Im chinesischen Konsolen-Interface heißt der Reiter 界面定制 und die Anmeldetabelle 登录项. Wenn Sie also herausfinden möchten, wie Sie die 登录界面 einer Anwendung ändern, beginnen Sie dort.
Themes: Organisation, Anwendung und Marketplace
Die schnellste Änderung ist das Theme. Ein Theme in Casdoor ist ein kleines Objekt mit einem Stil (Default, Dark, Document oder Blossom im Editor), einer Primärfarbe, einem Rahmenradius und einem Schalter für den kompakten Modus. Sie können es auf der Organisationsebene festlegen, wo es für die Konsole ihrer Mitglieder und für die Einstiegsseiten aller Anwendungen gilt, die dem Organisations-Theme folgen, oder auf einer einzelnen Anwendung, indem Sie Follow organization theme deaktivieren. Die Bearbeitungsseite der Anwendung bietet eine Live-Vorschau, sodass Sie das Ergebnis sehen können, bevor Sie speichern.
Wenn Sie mehr als nur Farben wünschen, bietet der Casdoor Marketplace Sign-in Themes. Die Installation eines Themes schreibt die Theme-Daten, Formularposition, Formular-CSS für Desktop und Mobilgeräte, Seitenpanel-HTML, Footer-HTML und Hintergrund-URLs einer Anwendung. Das casdoor-integrations Repository enthält derzeit 24 Themes, von Midnight und Split bis Terminal, Nord und Solarized. Die Deinstallation eines Themes stellt den vorherigen Zustand der Anwendung wieder her, sodass das Testen eines Themes nichts kostet. Stöbern Sie unter marketplace.casdoor.com.
Branding: Logo, Favicon und Hintergrund
Jede Anwendung hat ihr eigenes Logo, Favicon und Titel, getrennt von der Organisation. Eine Organisation kann mehrere Produkte betreiben, die Benutzer teilen, aber unterschiedliche Logos anzeigen. Es gibt auch ein optionales Logo dark, das angezeigt wird, wenn sich die Seite im Dark Mode befindet; ohne dieses verwendet Casdoor weiterhin das normale Logo.
Background URL legt das Bild hinter dem Formular fest. Setzen Sie auch Background URL Mobile, falls das Desktop-Bild auf Mobilgeräten schlecht zugeschnitten wird. Die Vorschau aktualisiert sich, sobald die URL geladen ist.
Benutzerdefiniertes CSS und Formularlayout
Custom CSS akzeptiert einfache CSS-Regeln; Casdoor umschließt diese selbst in ein style-Element, fügen Sie also kein eigenes hinzu. Die wichtigsten Container, die Sie ansprechen sollten, sind .login-panel und .login-form:
.login-panel {
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.2);
}
Custom CSS Mobile enthält Regeln für Mobilgeräte, sodass Sie keine Media Queries für den häufigen Fall schreiben müssen.
Form position platziert das Formular links, mittig oder rechts. Die vierte Option, Enable side panel, zentriert das Formular und setzt ein Panel daneben, dessen Inhalt aus Side panel HTML stammt. Dieses Feld akzeptiert HTML, daher ist ein style-Element darin unproblematisch.
Footer HTML wird unterhalb der Login- und Registrierungsformulare gerendert. Wenn die Anwendung die Standardanwendung ihrer Organisation ist, ersetzt ihr Footer auch "Powered by Casdoor" in der Admin-Konsole für die Benutzer dieser Organisation.
Wenn Sie mit einem Design auf der Staging-Umgebung zufrieden sind, kopiert Export JSON am Ende der Anwendungs-Bearbeitungsseite das Aussehen (Logo, Favicon, Hintergründe, CSS, Formularposition, Seitenpanel, Theme und benutzerdefinierte HTML-Felder) in die Zwischenablage, und Import JSON auf derselben Anwendung auf einer anderen Instanz wendet es an. Der Export enthält keine Secrets oder Provider.
Felder, Beschriftungen und Reihenfolge
Die Tabelle Signin items listet jedes Element der Anmeldeseite auf: das Logo, die Felder für Benutzername und Passwort, den Link zum Vergessen des Passworts, das Zustimmungs-Checkbox-Feld, die Sprachauswahl, das Captcha, Provider-Schaltflächen usw. Für jede Zeile können Sie Visible festlegen, einen benutzerdefinierten Placeholder, ein element-spezifisches Custom CSS und eine Regel definieren sowie das Element nach oben oder unten verschieben. Sie können auch benutzerdefinierte Elemente hinzufügen, deren Beschriftung HTML ist.
Einige Regeln, die es zu beachten gilt:
- Das Ausblenden von Forgot password? deaktiviert auch das Zurücksetzen des Passworts in der API, nicht nur den Link.
- Die Captcha-Regel wechselt zwischen einem Popup-Captcha und einem Inline-Captcha. Wenn Sie einen Captcha-Provider auswählen, siehe Vergleich der CAPTCHA-Provider für Anmeldeseiten.
- Die Languages-Regel wechselt zwischen einem Globus-Symbol und einer beschrifteten Auswahlbox. Die Liste selbst ist auf die Languages der Organisation beschränkt, sodass eine Organisation, die nur englische und japanische Nutzer bedient, nur diese beiden anzeigt.
Die Anmeldeverfahren (Passwort, Bestätigungscode, Magic Link, WebAuthn, LDAP, Face ID u. a.) sind eine separate Tabelle, Signin methods, mit eigener Reihenfolge und Anzeigenamen.
Die Tabelle Signup items verhält sich analog für die Registrierung, mit Optionen wie Required, Regex-Validierung, benutzerdefiniertem Label und Regeln wie "No verification" für E-Mail. POST /api/signup leert außerdem jedes Feld, dessen Element ausgeblendet ist, damit API-Clients keine Felder setzen können, die Ihr Formular nicht anzeigt. Prompted fragt Benutzer nach fehlenden Feldern, z. B. einer Telefonnummer, nachdem sie sich über einen Provider angemeldet haben, der diese nicht bereitgestellt hat.
Anmeldungsorganisation angeben
Wenn mehrere Organisationen sich eine Casdoor-Instanz teilen, benötigen Benutzer einen Weg, zur richtigen Organisation zu gelangen. Der Org choice mode in der Standardanwendung einer Organisation (oder in app-built-in) fügt /login einen Organisations-Auswahlschritt hinzu: Input zeigt ein Textfeld, Select zeigt eine Dropdown-Liste. Nach der Auswahl leitet Casdoor den Benutzer zu /login/<organization>, was die eigene gestylte Seite dieser Organisation anzeigt. Der Browser merkt sich die letzte Organisation im localStorage, sodass ein Benutzer, dessen Konsolen-Sitzung abgelaufen ist, wieder auf seiner eigenen Anmeldeseite landet.
Was Tenant-Administratoren sicher ändern können
Jeden Kunden dazu zu bringen, ihre eigene Anmeldeseite zu stylen, wirft die offensichtliche Frage auf: Was hindert einen Organisationsadministrator daran, ein Skript hinzuzufügen, das Passwörter kopiert, oder einen CSS-Selektor, der jedes eingegebene Zeichen über Hintergrundbild-Anfragen leakt? Casdoor prüft dies serverseitig. Wenn ein Administrator, der kein globaler Administrator ist, eine Anwendung hinzufügt oder speichert, wird jedes geänderte benutzerdefinierte HTML- und CSS-Feld validiert, und der Speichervorgang wird abgelehnt, wenn eines davon gegen die Regeln verstößt:
- HTML darf nur Layout- und Textelemente wie
div,span,p, Überschriften, Listen, Links, Bilder, Tabellen,styleund grundlegende SVG-Formen verwenden.script,form,inputundiframewerden abgelehnt, ebenso wieon...-Ereignishandler,srcset,formaction,srcdocund ähnliche Attribute.hrefist nur bei Links mit relativen,http-,https-,mailto- odertel-URLs erlaubt. - CSS darf keine Backslashes,
<,image(,image-set(und einige andere Funktionen enthalten. Jedeurl()muss relativ sein, einedata:-URL oder mit einem erlaubten Präfix beginnen: Google Fonts, Fontsource auf jsDelivr, die Casdoor-CDNs, der Ursprung dieser Casdoor-Instanz, die Domains der globalen Storage-Provider oder ein Eintrag informCssAllowedUrls. @importist nur von Google Fonts und Fontsource erlaubt, da ein importiertes Stylesheet nicht selbst geprüft wird.
Um Tenants das Laden von Bildern von Ihrem eigenen Host zu ermöglichen, fügen Sie ihn zu conf/app.conf hinzu (siehe Konfiguration):
formCssAllowedUrls = "https://img.example.com/"
Zusätzlich zur Prüfung beim Speichern bereinigen die Anmeldeseiten benutzerdefiniertes HTML vor dem Rendern, es sei denn, die Anwendung gehört zur built-in-Organisation oder ein globaler Administrator hat Enable custom scripts dafür aktiviert. Nur ein globaler Administrator kann diesen Schalter aktivieren, und solange er aktiviert ist, kann nur ein globaler Administrator das HTML dieser Anwendung ändern. Dieselben Regeln gelten, wenn ein Tenant ein Marketplace-Theme installiert: Ein Theme, das diese Regeln verletzt, kann nur von einem globalen Administrator installiert werden.
Signin HTML und Signup HTML verdienen eine gesonderte Anmerkung: Sie ersetzen die gesamte integrierte Seite, einschließlich des Formulars. Da Tenants keine Formulare oder Skripte hinzufügen können, sind diese beiden Felder hauptsächlich für globale Administratoren gedacht; für Branding sind CSS, das Seitenpanel und der Footer die besseren Werkzeuge.
Gehostete Anmeldeseite oder eigene UI?
Sie können Ihren eigenen Anmeldebildschirm über die Casdoor-API erstellen, aber die gehostete Seite ist normalerweise die bessere Wahl. Mit OAuth 2.0 oder OpenID Connect geben Benutzer ihr Passwort nur auf der Casdoor-Domain ein, und Ihre Anwendung erhält einen Autorisierungscode, niemals die Zugangsdaten. Captcha, MFA, soziale und Enterprise-Provider, Passwort-Vergessen, Signup-Validierung und die Organisationsauswahl funktionieren ohne Code auf Ihrer Seite weiter und erhalten bei Upgrades von Casdoor weiterhin Korrekturen. Eine eigene UI muss jeden dieser Abläufe neu implementieren und führt Passwörter über Ihre eigenen Server. Anleitungen zur Integration der gehosteten Seite in eine App: Spring Boot SSO with OIDC und Nginx SSO authentication.
Andere gehostete Anbieter treffen denselben Kompromiss. Idura Verify ermöglicht beispielsweise das Hinzufügen einer Stylesheet-URL und benutzerdefiniertes HTML um seine Login-Box aus seinem Dashboard heraus, unter einer strengen Content Security Policy mit einer expliziten Liste von Style-Ursprüngen für Schriftarten und Bilder. Casdoors formCssAllowedUrls spielt dieselbe Rolle, mit dem Unterschied, dass Casdoor Open Source und self-hosted ist, sodass Sie die Liste kontrollieren.