1

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?

javamat
  • 89
  • 1
  • 7
  • Did you create custom email theme and override `password-reset.ftl`? – Vadim Ashikhman Aug 28 '19 at 13:11
  • Yes I did. I tried adding an image to theme/email/resources/img and reference to it by calling ${url.resourcePath}/img/myImage.jpg in img tag but still doesn't work – javamat Aug 29 '19 at 14:31

2 Answers2

4

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.xml and 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

  1. Locate your template file: /html/password-reset.ftl (e.g. base sample file)

    <html>
    <body>
    ${kcSanitize(msg("passwordResetBodyHtml",link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc}
    </body>
    </html>
  1. Replace with your code. E.g. 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>

  1. 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]

  2. Package and deploy your theme in Keycloak

  3. 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" />
Ariel Carrera
  • 4,987
  • 22
  • 36
2

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.

woocash
  • 36
  • 4