在 Casdoor 中自定义登录页面：无需 Fork 即可对认证 UI 进行定制样式
是的，Casdoor 支持对其认证 UI 进行自定义样式设置，而且您不需要 Fork 前端代码即可实现。每个应用都有一个 UI Customization 选项卡，您可以在其中设置 Logo、Favicon、背景图片、桌面端和移动端的自定义 CSS、表单位置、侧边栏面板、页脚 HTML 以及主题。两个表格 Signin items 和 Signup items 决定了登录和注册页面显示哪些字段、以什么顺序显示、使用什么标签和占位符。所有这些配置都按应用存储在数据库中，因此一个 Casdoor 实例可以为多个不同品牌风格的登录页面提供服务，组织管理员也可以在安全限制范围内编辑他们自己的页面。
要修改的内容及修改位置
| 想要修改的内容 | 在 Casdoor 中的位置 | 文档 |
|---|---|---|
| 主色调、圆角半径、深色或紧凑风格 | 组织的 Theme，或者当关闭 Follow organization theme 时应用的 Theme | Customize the theme |
| 完整的现成外观 | Identity → Marketplace，登录主题 | Marketplace |
| Logo、深色 Logo、Favicon、页面标题 | 应用编辑页面 | Application settings |
| 背景图片（桌面端和手机端） | Background URL、Background URL Mobile | UI customization |
| 表单的外观 | Custom CSS、Custom CSS Mobile | UI customization |
| 表单位于左侧、居中或右侧，或位于面板旁边 | Form position、Side panel HTML | UI customization |
| 表单下方的文本 | Footer HTML | Application settings |
| 登录页面显示的字段、顺序、占位符 | Signin items | Sign-in items table |
| 密码、验证码、魔法链接、WebAuthn、LDAP 及其顺序 | Signin methods | Sign-in methods |
| 注册字段、必填标志、标签、正则表达式 | Signup items | Sign-up items table |
| 语言选择器 | Languages 登录项、组织的 Languages | Sign-in items table |
| 让用户选择或输入其组织 | Org choice mode | Specify login organization |
在中文控制台中，该选项卡称为“界面定制”，登录项表格称为“登录项”，因此如果您正在寻找如何更改应用的“登录界面”，请从这里开始。
主题：组织、应用和市场
最快的更改方式是调整主题。Casdoor 中的主题是一个小对象，包含样式（编辑器中有 Default、Dark、Document 或 Blossom）、主色、边框半径和紧凑模式开关。您可以将其设置在组织上，此时它适用于该组织成员的控制台以及所有跟随组织主题的应用程序的入口页面；或者通过关闭 Follow organization theme 将其设置在单个应用上。应用编辑页面有一个实时预览功能，因此您可以在保存之前查看结果。
如果您想要不仅仅是颜色的更改，Casdoor Marketplace 提供了登录主题。安装一个主题会写入一个应用的主题数据、表单位置、桌面端和移动端的表单 CSS、侧边栏面板 HTML、页脚 HTML 和背景 URL。casdoor-integrations 仓库目前包含 24 个主题，从 Midnight 和 Split 到 Terminal、Nord 和 Solarized。卸载主题会恢复应用之前的设置，因此尝试一个主题没有任何成本。请在 marketplace.casdoor.com 浏览它们。
品牌标识：Logo、Favicon 和背景
每个应用都有自己的 Logo、Favicon 和 Title，独立于组织。一个组织可以运行多个共享用户但显示不同 Logo 的产品。还有一个可选的 Logo dark，当页面处于深色模式时显示；如果没有设置，Casdoor 将继续使用普通 Logo。
Background URL 设置表单背后的图片。如果桌面端图片在手机上的裁剪效果不佳，也请设置 Background URL Mobile。URL 加载后预览会立即更新。
自定义 CSS 和表单布局
Custom CSS 接受普通的 CSS 规则；Casdoor 自己会将它们包装在一个 style 元素中，所以不要添加您自己的 style 元素。主要需要针对的容器是 .login-panel 和 .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 包含用于手机的规则，因此在常见情况下您不需要编写媒体查询。
Form position 将表单放置在左侧、居中或右侧。第四个选项 Enable side panel 将表单居中并在其旁边放置一个面板，其内容来自 Side panel HTML。该字段接受 HTML，因此在其内部使用 style 元素是没问题的。
Footer HTML 渲染在登录和注册表单下方。如果该应用是其组织的默认应用，其页脚也会在该组织用户的 admin console 中替换 "Powered by Casdoor"。
当您对预发布环境的设计满意时，应用编辑页面底部的 Export JSON 会将外观（Logo、Favicon、背景、CSS、表单位置、侧边栏、主题和自定义 HTML 字段）复制到剪贴板，而在另一个实例上的同一应用中执行 Import JSON 则会应用这些设置。导出内容不包含任何密钥或提供者信息。
字段、标签和顺序
Signin items 表列出了登录页面上的所有元素：Logo、用户名和密码字段、忘记密码链接、协议复选框、语言选择器、验证码、提供商按钮等。对于每一行，你可以设置 Visible（可见性）、自定义的 Placeholder（占位符）、每项的 Custom CSS（自定义 CSS）以及规则，并可以将其上移或下移。你还可以添加标签为 HTML 的自定义项。
以下是一些值得了解的规则：
- 隐藏 Forgot password?（忘记密码？）不仅会移除链接，还会在 API 中禁用密码重置功能。
- Captcha（验证码）规则用于在弹出式和嵌入式验证码之间切换。如果你正在选择验证码提供商，请参阅 CAPTCHA providers compared for login pages。
- Languages（语言）规则用于在地球图标和带标签的选择器之间切换。语言列表本身受限于组织的 Languages（语言），因此仅服务英语和日语用户的组织只会显示这两种语言。
登录方式（密码、验证码、魔法链接、WebAuthn、LDAP、Face ID 等）位于单独的表格 Signin methods（登录方式）中，具有自己的排序顺序和显示名称。
Signup items（注册项）表对注册页面执行类似的操作，包含 Required（必填）、Regex（正则表达式）验证、自定义 Label（标签）以及诸如电子邮件“无验证”之类的规则。POST /api/signup 还会清除每个隐藏项对应的字段，因此 API 客户端无法设置表单中未显示的字段。Prompted（提示）会在用户通过未提供某些信息（如电话号码）的提供商登录后，要求用户填写缺失的字段。
指定登录组织
如果多个组织共享一个 Casdoor，用户需要一种方法来到达正确的组织。在组织的默认应用（或 app-built-in）上的 Org choice mode（组织选择模式）会为 /login 添加一个组织步骤：Input（输入）显示文本字段，Select（选择）显示下拉菜单。用户选择后，Casdoor 会将他们发送到 /login/<organization>，该页面会显示该组织自己样式的页面。浏览器会在 localStorage 中记住最后一个组织，因此控制台会话过期的用户会再次跳转到他们自己的登录页面。
租户管理员可以安全更改的内容
让每个客户定制自己的登录页面引出了一个显而易见的问题：如何阻止组织管理员添加窃取密码的脚本，或通过后台图片请求泄露每个键入字符的 CSS 选择器？Casdoor 会在服务器端进行检查。当非全局管理员添加或保存应用时，每个发生更改的自定义 HTML 和 CSS 字段都会经过验证，如果其中任何字段违反规则，保存操作将被拒绝：
- HTML 只能使用布局和文本元素，例如
div、span、p、标题、列表、链接、图像、表格、style和基本 SVG 形状。script、form、input和iframe会被拒绝，on...事件处理程序、srcset、formaction、srcdoc及类似属性也会被拒绝。href仅允许用于具有相对路径、http、https、mailto或telURL 的链接。 - CSS 不得包含反斜杠、
<、image(、image-set(和其他一些函数。每个url()必须是相对路径、data:URL，或以允许的前缀开头：Google Fonts、jsDelivr 上的 Fontsource、Casdoor CDN、此 Casdoor 实例自身的源、全局存储提供商的域名，或formCssAllowedUrls中的条目。 @import仅允许从 Google Fonts 和 Fontsource 导入，因为导入的样式表本身不会经过检查。
若要允许租户从你自己的主机加载图像，请将其添加到 conf/app.conf（参见 Configuration）：
formCssAllowedUrls = "https://img.example.com/"
除了保存时的检查外，除非应用属于 built-in 组织或全局管理员为其开启了 Enable custom scripts（启用自定义脚本），否则登录页面在渲染前会对自定义 HTML 进行净化。只有全局管理员可以开启该开关，且在其开启期间，只有全局管理员可以更改该应用的 HTML。当租户安装 Marketplace 主题时，也适用相同的规则：违反这些规则的主题只能由全局管理员安装。
Signin HTML（登录 HTML）和 Signup HTML（注册 HTML）值得单独说明：它们会替换整个内置页面，包括表单。由于租户不能添加表单或脚本，这两个字段主要供全局管理员使用；对于品牌定制，CSS、侧边面板和页脚是更好的工具。
托管登录页面还是你自己的 UI？
你可以基于 Casdoor 的 API 构建自己的登录界面，但托管页面通常是更好的选择。使用 OAuth 2.0 或 OpenID Connect，用户只在 Casdoor 源上输入密码，你的应用接收授权码，绝不会接触凭据。验证码、MFA、社交和企业提供商、忘记密码、注册验证和组织选择器无需你编写代码即可正常工作，并且在你升级 Casdoor 时会持续获得修复。自定义 UI 必须重新实现这些流程中的每一个，并将密码经由你自己的服务器传输。将托管页面接入应用的指南：Spring Boot SSO with OIDC 和 Nginx SSO authentication。
其他托管提供商也面临同样的权衡。例如，Idura Verify 允许你在其仪表板中添加样式表 URL 及其登录框周围的自定义 HTML，这受到严格的内容安全策略 (CSP) 的限制，并为字体和图像明确列出了允许的样式来源。Casdoor 的 formCssAllowedUrls 起着相同的作用，不同之处在于 Casdoor 是开源且可自托管的，因此你可以控制该列表。