Keycloak add company logo to the reset password email
Question
I'm trying to display the company logo in the reset password email. I've already checked keycloak docs and found out it's not supported by them. I also tried encoding an image into base64 but Gmail doesn't support that. How can i do that?
4 answers
solution1
3 2019-08-28 14:20:50
You need to create a custom theme. Check Keycloak's docs chapter 3: docs
There are five types of themes/pages:
- Account - Account management
- Admin - Admin console
- Email - Emails
- Login - Login forms
- Welcome - Welcome page
You can start with a checkout of this sample repository kc themes sample , edit templates and deploy it in your keycloak.
Like the link says... to deploy it:
Copy
Simplest way to deploy the themes is to copy src/main/resources/theme/* to themes/.
Module
Alternatively you can deploy as modules. This can be done by first running:
mvn clean install $KEYCLOAK_HOME/bin/jboss-cli.sh --command="module add --name=org.keycloak.example.themes --resources=target/keycloak-example-themes.jar"Then open
standalone/configuration/standalone.xmland register the theme module by adding:<theme> ... <modules> <module>org.keycloak.example.themes</module> </modules> </theme>
You can copy other themes or extend it copying from base templates to your custom themes project.
Email base templates: email templates
Take care to select same Keycloak version before checkout project and sources.
Steps to Add a logo to email template inside an existing custom theme
- Locate your template file: /html/password-reset.ftl (eg base sample file )
<html> <body> ${kcSanitize(msg("passwordResetBodyHtml",link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc} </body> </html>- Replace with your code. Eg with a base64 image or a linked reference to your image file ( https://static.myserver.com/image.png , etc ...)
<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>Update your plain-text template too (if you need because not all client support html). You cannot add the image here but if a text message [file text/password-reset.ftl]
Package and deploy your theme in Keycloak
Select your email template in Realm Configuration tab
As you can see in class DefaultEmailSenderProvider.java Keycloak will try to send a HTML email and if you don't define it uses text-plain (file: text/password-reset.ftl
Update:
There are currently some limitations imposed by some email clients. I advise you to read the following note about it ( read me ).
As it says, many web clients do not display emails that contain more than one image in base64 embedded (or none of them).
Therefore a good strategy with Keycloak emails is to use a reference to an image that is served from a static content server (if you do not have one of them, keycloak is over a wildfly that could also be configured as a static server).
So, the best solution you can implement is to add your image as follows: Eg.
<img src = "https://static.myserver.com/static/logo.png" alt = "img" />
solution2
2 2020-04-21 22:06:13
DefaultEmailSenderProvider class allows only for text and html content as multipart/alternative . This is not enough to have working well (in most mail clients) embedded image like logo or so.
The html part should be wrapped together with image(s) by the multipart/related section. Therefore, some custom EmailSenderProvider seems to be needed. It should expose another param for inline imagies which one could be embeded in html section. The result should be a structure similar to this below.
- alternative
-- text
-- related
--- html
--- inline image
--- inline image
As I have spent some time on research which haven't brought any result yet I plan to make a request to keycloak contributors.
Here is a good explenation of how it works with link to interesting Apache project.
solution3
0 2022-07-28 11:32:00
As @Ariel Carrera already mentioned, inline data uri src for images are not well-supported by clients such as gmail.
But instead of uploading your images somewhere externally to use it in the template, you can include an image that comes directly from your template, like so:
<img src="${url.resourcesUrl}/img/MyCompany_Logo.png" title="MyCompany" alt="MyCompany Logo">
For the above code to work, you need to have a file in the following directory of your theme:
mytheme/email/resources/img/MyCompany_Logo.png
Note: SVGs also have less support by email clients. I would recommend a PNG and not an SVG for your email template
solution4
0 2022-11-28 13:22:17
A simple way to get the logo url correct in keycloak's reset password email is to use the link variable together with freemarker's built-in keep_before , effectively removing path section from reset password link and then adding url.resourcesPath variable plus the path to your logo saved in email theme:
<img src="${link?keep_before("/auth/realms/")}${url.resourcesPath}/images/logo.png" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.