Keycloak 将公司标志添加到重置密码 email

Question

我试图在重置密码 email 中显示公司徽标。我已经检查过 keycloak 文档，发现他们不支持它。 我还尝试将图像编码为 base64，但 Gmail 不支持。 我怎样才能做到这一点？

Answer 1

您需要创建一个自定义主题。 检查 Keycloak 的文档第 3 章：文档

有五种类型的主题/页面：

账户 - 账户管理
管理员 - 管理控制台
电子邮件 - 电子邮件
登录 - 登录表单
欢迎 - 欢迎页面

您可以从检出此示例存储库kc 主题示例开始，编辑模板并将其部署在您的 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并通过添加以下内容注册主题模块：
 <theme> ... <modules> <module>org.keycloak.example.themes</module> </modules> </theme>

您可以复制其他主题或将其从基本模板复制扩展到您的自定义主题项目。

电子邮件基础模板：电子邮件模板

在签出项目和源之前，请注意选择相同的 Keycloak 版本。

将徽标添加到现有自定义主题内的电子邮件模板的步骤

找到您的模板文件：/html/password-reset.ftl（例如基本示例文件）

 <html> <body> ${kcSanitize(msg("passwordResetBodyHtml",link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc} </body> </html>

替换为您的代码。 例如，使用 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>

也更新您的纯文本模板（如果您需要，因为并非所有客户端都支持 html）。 您不能在此处添加图像，但如果是文本消息 [file text/password-reset.ftl]
在 Keycloak 中打包和部署您的主题
在 Realm Configuration 选项卡中选择您的电子邮件模板

正如您在DefaultEmailSenderProvider.java类中看到的那样，Keycloak 将尝试发送 HTML 电子邮件，如果您没有定义它，它将使用 text-plain（文件：text/password-reset.ftl

更新：

目前，某些电子邮件客户端存在一些限制。 我建议您阅读以下有关它的说明（请阅读我）。

正如它所说，许多 Web 客户端不显示包含多个嵌入 base64 图像（或没有图像）的电子邮件。

因此，使用 Keycloak 电子邮件的一个好策略是使用对从静态内容服务器提供的图像的引用（如果您没有其中一个，keycloak 是一个也可以配置为静态服务器的野蝇）。

因此，您可以实施的最佳解决方案是按如下方式添加图像：例如。

<img src = "https://static.myserver.com/static/logo.png" alt = "img" />

Answer 2

DefaultEmailSenderProvider类只允许 text 和 html 内容作为multipart/alternative 。 这不足以（在大多数邮件客户端中）嵌入徽标等图像。

html 部分应由multipart/related部分与图像包装在一起。 因此，似乎需要一些自定义的EmailSenderProvider 。 它应该为可以嵌入到 html 部分的内联图像公开另一个参数。 结果应该是类似于下面的结构。

- alternative
-- text
-- related
--- html
--- inline image 
--- inline image

由于我花了一些时间进行研究，但尚未带来任何结果，因此我计划向 keycloak 贡献者提出请求。

这里很好地解释了它如何与有趣的 Apache 项目的链接一起工作。

Answer 3

正如@Ariel Carrera 已经提到的，gmail 等客户端不能很好地支持图像的内联数据 uri src。

但是，您可以包含直接来自模板的图像，而不是将图像上传到外部某处以在模板中使用，如下所示：

<img src="${url.resourcesUrl}/img/MyCompany_Logo.png" title="MyCompany" alt="MyCompany Logo">

要使上述代码正常工作，您需要在主题的以下目录中有一个文件：

mytheme/email/resources/img/MyCompany_Logo.png

注意：email 客户端对 SVG 的支持也较少。 我会为您的 email 模板推荐 PNG 而不是 SVG

Answer 4

在 keycloak 的重置密码 email 中获取徽标 url 正确的一种简单方法是将link变量与 freemarker 的内置keep_before一起使用，有效地从重置密码链接中删除path部分，然后添加url.resourcesPath变量加上保存徽标的路径在 email 主题中：

<img src="${link?keep_before("/auth/realms/")}${url.resourcesPath}/images/logo.png" />

Keycloak 将公司标志添加到重置密码 email

问题描述

4 个解决方案

解决方案1
3 2019-08-28 14:20:50

更新：

解决方案2
2 2020-04-21 22:06:13

解决方案3
0 2022-07-28 11:32:00

解决方案4
0 2022-11-28 13:22:17

Keycloak 将公司标志添加到重置密码 email

问题描述

4 个解决方案

解决方案1 3 2019-08-28 14:20:50

更新：

解决方案2 2 2020-04-21 22:06:13

解决方案3 0 2022-07-28 11:32:00

解决方案4 0 2022-11-28 13:22:17

解决方案1
3 2019-08-28 14:20:50

解决方案2
2 2020-04-21 22:06:13

解决方案3
0 2022-07-28 11:32:00

解决方案4
0 2022-11-28 13:22:17