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