有没有办法为我的自定义 Keycloak 电子邮件主题添加样式？
Posted
技术标签:
【中文标题】有没有办法为我的自定义 Keycloak 电子邮件主题添加样式？【英文标题】：Is there a way to add styles to my custom Keycloak Email theme? 【发布时间】：2020-02-12 12:01:36 【问题描述】：标题说明了一切。
我尝试了多种方法，但似乎没有任何效果。
我尝试在我的 theme.properties 中导入样式表。 styles=css/styles.css
我尝试直接在我的 html 标签中做我的风格。 <h1 style="color:blue;">
我尝试在我的 ftl 文件中使用我的风格，如下所示：
<html>
<style type="text/css">
body
margin: 0;
font-family: 'Source Sans Pro';
font-weight: 400;
font-size: 16px;
.header
background-color: #B70E0C;
width: 100%;
height: 96px;
.footer
flex-shrink: 0;
width: 100%;
padding: 20px 0;
text-align: center;
font-size: 16px;
background-color: #2D2D2D;
z-index: 1;
position: absolute;
bottom: 0;
.footer a
color: white !important;
a:visited
color: initial;
.activate-btn
border-radius: 8px;
padding: 12px 28px;
background-color: #FDC300;
color: black;
border-style: hidden;
</style>
<body>
$kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName,
linkExpirationFormatter(linkExpiration)))?no_esc
</body>
</html>
【问题讨论】：
【参考方案1】：编写 html 电子邮件不像编写 html 网页那样简单，因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些人可能会忽略
使用zurb，您可以在浏览器中创建和调试电子邮件模板，就像来自 npm 世界的任何其他 UI 应用程序一样。然后，您可以将 Zurb 输出切片为 keycloak freemarker 模板。最后，您将获得主要的 freemarker 模板（带有通用标题、底部链接等），以及用于段落、链接的一堆 freemarker 宏...这些组件将封装所有丑陋的东西，如内联 css、表格等，因此您的业务模板将很简单，看起来很漂亮。这就是我得到的执行所需操作电子邮件
<#import "template.ftl" as layout>
<@layout.emailLayout title=msg('executeActionsSubject')?no_esc; section>
<#if section = "header">
<@layout.header text=msg("executeActionsSubject")?no_esc icon="status-icon-green%403x.png"/>
<#elseif section = "content">
<#outputformat "plainText">
<#assign requiredActionsText>
<#if requiredActions??>
<ul>
<#list requiredActions>
<#items as reqActionItem><li>$msg("requiredAction.$reqActionItem")</li></#items>
</#list>
</ul>
</#if>
</#assign>
</#outputformat>
<@layout.paragraph>
$msg("executeActionsBodyIntro", realmName)?no_esc
</@layout.paragraph>
<b>
$msg("executeActionsList", requiredActionsText)?no_esc
</b>
<@layout.paragraph>
$msg("executeActionsClickLinkNote")?no_esc
</@layout.paragraph>
<@layout.mainAction text=msg("executeActionsButtonText")?no_esc href=link/>
<@layout.secondaryText>
$kcSanitize(msg("expirationNote", linkExpirationFormatter(linkExpiration)))?no_esc
</@layout.secondaryText>
<@layout.secondaryText>
$msg("mistakeDeleteText")?no_esc
</@layout.secondaryText>
</#if>
</@layout.emailLayout>
UPD。还有其他用于撰写电子邮件的框架。例如 MJML。无论如何，任何这些框架的开发流程都是完全相同的，所以请随意使用其中任何一个。
【讨论】：
这看起来确实像要走的路，我只是不太确定“可以将 Zurb 输出切片到 keycloak freemarker 模板”部分。有没有办法自动做到这一点？ 不幸的是没有，但它并不像看起来那么难。刚开始创建布局并用Zurb测试它作为网页（注意Zurb也允许有通用的骨架模板，所以其他电子邮件布局可以继承它并只修改“业务内容”）。至于我，我只需要一个完整的工作日来为我公司的所有 keycloak 电子邮件创建 Zurb 布局。还有一天将它们移植到 freemarker 和调试。如果考虑到我不是前端人员，这还不错。 @solveMe 您是否使用给定的解决方案实现了正确的电子邮件模板，我还需要创建重置密码电子邮件模板？ 能否请您出示一下您的 template.ftl 文件，它是由 Zurb 创建的骨架吗？ @YachithaSandaruwan 我通过 zurb 创建了几个布局（zurb 还允许您为标题、徽标、底部链接创建基本模板）。然后我用浏览器对其进行了测试（查看 zurb 文档以运行测试/预览模式）。当我对结果感到满意时，我运行 Zurb build 并获得电子邮件的最终输出。下一步是从这个杂乱的输出中提取一些部分，并从中组成一个 template.ftl 和其他宏（例如段落）。关键提示：要在最终输出中检测结构元素的边界，您应该在使用 Zurb 标记时彻底注释它们。【参考方案2】：您可以使用此代码
body
margin: 0;
font-family: 'Source Sans Pro';
font-weight: 400;
font-size: 16px;
.header
background-color: #B70E0C;
width: 100%;
height: 96px;
.footer
flex-shrink: 0;
width: 100%;
padding: 20px 0;
text-align: center;
font-size: 16px;
background-color: #2D2D2D;
z-index: 1;
position: absolute;
bottom: 0;
.footer a
color: white !important;
a:visited
color: initial;
.activate-btn
border-radius: 8px;
padding: 12px 28px;
background-color: #FDC300;
color: black;
border-style: hidden;
<h1 style="color:blue;">lorem ipsum dolor</h1>
$kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc
<p style="color:red;">lorem ipsum dolor sit amet</p>【讨论】：
这仅适用于 kcSanitize 之外的内容。以上是关于有没有办法为我的自定义 Keycloak 电子邮件主题添加样式？的主要内容，如果未能解决你的问题，请参考以下文章
KeyCloak 中的自定义提供程序，可以根据用户名和密码进行身份验证