我正在尝试在重置密码电子邮件中显示公司徽标。我已经检查了keycloak文档，发现他们不支持它。我也试过把图片编码成base64格式，但Gmail不支持。我该怎么做？
wbgh16ku1#
您需要创建一个自定义主题。查看Keycloak的文档第3章：文档有五种类型的主题/页面：
您可以从 checkout 这个示例存储库kc themes sample开始，编辑模板并在keycloak中部署它。就像链接说的……要部署它：
复制
部署主题的最简单方法是将src/main/resources/theme/* 复制到themes/。
模块
或者，您可以部署为模块。这可以通过首先运行：mvn clean install $KEYCLOAK_HOME/bin/jboss-cli.sh --command="module add --name=org.keycloak.example.themes --resources=target/keycloak-example-themes.jar"然后打开standalone/configuration/standalone.xml并通过添加以下内容注册主题模块：
mvn clean install $KEYCLOAK_HOME/bin/jboss-cli.sh --command="module add --name=org.keycloak.example.themes --resources=target/keycloak-example-themes.jar"
standalone/configuration/standalone.xml
<theme> ... <modules> <module>org.keycloak.example.themes</module> </modules> </theme>
您可以复制其他主题或扩展它从base templates复制到您的自定义主题项目。电子邮件基本模板：email templates注意在 checkout 项目和源代码之前选择相同的Keycloak版本。
在现有自定义主题中添加logo到邮件模板的步骤
1.找到模板文件：/html/password-reset.ftl（例如base sample file）
<html> <body> ${kcSanitize(msg("passwordResetBodyHtml",link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc} </body> </html>
1.替换为代码。例如，使用base64图像或链接到您的图像文件的引用（https://static.myserver.com/image.png等）
<html> <body> <div> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red Logo"> </div> <div> ${kcSanitize(msg("passwordResetBodyHtml",link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc} </div> </body> </html>
1.更新你的纯文本模板（如果你需要的话，因为不是所有的客户端都支持html）。您不能在此处添加图像，但如果文本消息[file text/password-reset.ftl]1.在Keycloak中打包并部署您的主题1.在“领域配置”选项卡中选择电子邮件模板正如你在课上看到的DefaultEmailSenderProvider.javaKeycloak将尝试发送一封HTML电子邮件，如果你没有定义它，它将使用text-plain（file：text/password-reset.ftl
目前，一些电子邮件客户端存在一些限制。我建议你阅读下面关于它的注解（read me）。正如它所说的，许多web客户端不显示包含base64嵌入式图像的电子邮件（或者不显示）。因此，使用Keycloak电子邮件的一个好策略是使用从静态内容服务器提供的图像的引用（如果您没有其中之一，keycloak是在一个也可以配置为静态服务器的wildfly上）。因此，您可以实现的最佳解决方案是按如下方式添加映像：例
<img src = "https://static.myserver.com/static/logo.png" alt = "img" />
eagi6jfj2#
DefaultEmailSenderProvider类只允许文本和html内容作为multipart/alternative。这是不够的，有工作良好（在大多数邮件客户端）嵌入式图像，如徽标等。html部分应该与multipart/related部分的图像 Package 在一起。因此，似乎需要一些自定义的EmailSenderProvider。它应该为内联图像暴露另一个参数，其中一个可以嵌入在html部分。结果应该是与下面类似的结构。
DefaultEmailSenderProvider
multipart/alternative
multipart/related
EmailSenderProvider
- alternative -- text -- related --- html --- inline image --- inline image
由于我花了一些时间在研究上，但还没有带来任何结果，我计划向keycloak贡献者提出请求。Here是一个很好的解释它是如何工作的链接到有趣的Apache项目。
du7egjpx3#
正如@Ariel Carrera已经提到的，图像的内联数据uri src不受gmail等客户端的良好支持。但是，您可以包含直接来自模板的图像，而不是将图像上传到外部的某个地方以在模板中使用它，就像这样：
<img src="${url.resourcesUrl}/img/MyCompany_Logo.png" title="MyCompany" alt="MyCompany Logo">
要使上面的代码工作，您需要在主题的以下目录中有一个文件：mytheme/email/resources/img/MyCompany_Logo.png注意：SVG也不太支持电子邮件客户端。我建议你的电子邮件模板使用PNG格式，而不是SVG格式
mytheme/email/resources/img/MyCompany_Logo.png
注：
我已经在v18.x.x keycloak上实现了这个，而不是v18.x.x-legacy。对于遗留版本，我不知道是否可能得到相同的结果，因为返回的url.resourcesUrl路径存在差异
url.resourcesUrl
hgb9j2n64#
在keycloak的重置密码电子邮件中获得徽标url正确的一个简单方法是使用link变量和freemarker的内置keep_before，有效地从重置密码链接中删除path部分，然后添加url.resourcesPath变量以及保存在电子邮件主题中的徽标路径：
link
keep_before
path
url.resourcesPath
<img src="${link?keep_before("/auth/realms/")}${url.resourcesPath}/images/logo.png" />
t9aqgxwy5#
以下是我对Keycloak 21.x的解决方案，希望能帮助一些人保存更多的时间。
**1.**第一步是将我们的徽标添加到主题中：
themes/{THEME_NAME}/email/resources/images/logo.png
2.然后我们需要在Keycloak中访问我们的主机名。我在K8s环境中使用Keycloak，所以对我来说很容易。我可以使用KC_HOSTNAME_URL继续。然后，我们需要在主题中访问这个变量。所以我们需要在我们的theme.properties中定义一个变量（如果它不存在，则创建此文件）。我可以把这个步骤分成两个步骤：**2.1.**theme.properties在邮箱目录中创建www.example.com（如果不存在）
/themes/{THEME_NAME}/email/theme.properties
**2.2.**添加变量设置env。变量
hostnameUrl=${env.KC_HOSTNAME_URL}
**3.**现在，您可以在logo图片的src中使用此变量：
src="${properties.hostnameUrl!}${url.resourcesPath}/images/logo.png"
PS：不要忘记设置***KC_HOSTNAME_URL***（或任何环境。变量），同时运行Keycloak。
5条答案
按热度按时间wbgh16ku1#
您需要创建一个自定义主题。查看Keycloak的文档第3章：文档
有五种类型的主题/页面：
*电子邮件-电子邮件
您可以从 checkout 这个示例存储库kc themes sample开始，编辑模板并在keycloak中部署它。
就像链接说的……要部署它：
复制
部署主题的最简单方法是将src/main/resources/theme/* 复制到themes/。
模块
或者，您可以部署为模块。这可以通过首先运行：
mvn clean install $KEYCLOAK_HOME/bin/jboss-cli.sh --command="module add --name=org.keycloak.example.themes --resources=target/keycloak-example-themes.jar"然后打开
standalone/configuration/standalone.xml并通过添加以下内容注册主题模块：您可以复制其他主题或扩展它从base templates复制到您的自定义主题项目。
电子邮件基本模板：email templates
注意在 checkout 项目和源代码之前选择相同的Keycloak版本。
在现有自定义主题中添加logo到邮件模板的步骤
1.找到模板文件：/html/password-reset.ftl（例如base sample file）
1.替换为代码。例如，使用base64图像或链接到您的图像文件的引用（https://static.myserver.com/image.png等）
1.更新你的纯文本模板（如果你需要的话，因为不是所有的客户端都支持html）。您不能在此处添加图像，但如果文本消息[file text/password-reset.ftl]
1.在Keycloak中打包并部署您的主题
1.在“领域配置”选项卡中选择电子邮件模板
正如你在课上看到的DefaultEmailSenderProvider.javaKeycloak将尝试发送一封HTML电子邮件，如果你没有定义它，它将使用text-plain（file：text/password-reset.ftl
更新：
目前，一些电子邮件客户端存在一些限制。我建议你阅读下面关于它的注解（read me）。
正如它所说的，许多web客户端不显示包含base64嵌入式图像的电子邮件（或者不显示）。
因此，使用Keycloak电子邮件的一个好策略是使用从静态内容服务器提供的图像的引用（如果您没有其中之一，keycloak是在一个也可以配置为静态服务器的wildfly上）。
因此，您可以实现的最佳解决方案是按如下方式添加映像：例
eagi6jfj2#
DefaultEmailSenderProvider类只允许文本和html内容作为multipart/alternative。这是不够的，有工作良好（在大多数邮件客户端）嵌入式图像，如徽标等。html部分应该与
multipart/related部分的图像 Package 在一起。因此，似乎需要一些自定义的EmailSenderProvider。它应该为内联图像暴露另一个参数，其中一个可以嵌入在html部分。结果应该是与下面类似的结构。由于我花了一些时间在研究上，但还没有带来任何结果，我计划向keycloak贡献者提出请求。
Here是一个很好的解释它是如何工作的链接到有趣的Apache项目。
du7egjpx3#
正如@Ariel Carrera已经提到的，图像的内联数据uri src不受gmail等客户端的良好支持。
但是，您可以包含直接来自模板的图像，而不是将图像上传到外部的某个地方以在模板中使用它，就像这样：
要使上面的代码工作，您需要在主题的以下目录中有一个文件：
mytheme/email/resources/img/MyCompany_Logo.png注意：SVG也不太支持电子邮件客户端。我建议你的电子邮件模板使用PNG格式，而不是SVG格式
注：
我已经在v18.x.x keycloak上实现了这个，而不是v18.x.x-legacy。
对于遗留版本，我不知道是否可能得到相同的结果，因为返回的
url.resourcesUrl路径存在差异hgb9j2n64#
在keycloak的重置密码电子邮件中获得徽标url正确的一个简单方法是使用
link变量和freemarker的内置keep_before，有效地从重置密码链接中删除path部分，然后添加url.resourcesPath变量以及保存在电子邮件主题中的徽标路径：t9aqgxwy5#
以下是我对Keycloak 21.x的解决方案，希望能帮助一些人保存更多的时间。
**1.**第一步是将我们的徽标添加到主题中：
2.然后我们需要在Keycloak中访问我们的主机名。我在K8s环境中使用Keycloak，所以对我来说很容易。我可以使用KC_HOSTNAME_URL继续。然后，我们需要在主题中访问这个变量。所以我们需要在我们的theme.properties中定义一个变量（如果它不存在，则创建此文件）。我可以把这个步骤分成两个步骤：
**2.1.**theme.properties在邮箱目录中创建www.example.com（如果不存在）
**2.2.**添加变量设置env。变量
**3.**现在，您可以在logo图片的src中使用此变量：
PS：不要忘记设置***KC_HOSTNAME_URL***（或任何环境。变量），同时运行Keycloak。