Gravatars (& Libravatars) in the SSO Portal


Save this as /usr/share/ssowat/portal/assets/themes/{YOUR_THEME}/custom_portal.js (or add it to that file if you already have one) and, assuming your theme doesn’t wildly deviate from the supplied ones then you will get a Gravatar in the SSO front end instead of the unchangeable little anonymous dude.


/* Config section
 * baseUrl should be one of:
 * '';
 * '';
 * or some self hosted libravatar equivalent.
 * defaultAvatar is an urlencoded address of a default image to use, e.g.
 * ...or one of the following:
 * 404  : return an HTTP 404 (File Not Found) response
 * mp   : (mystery-person) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
 * identicon    : a geometric pattern based on an email hash
 * monsterid    : a generated "monster" with different colors, faces, etc
 * wavatar  : generated faces with differing features and backgrounds
 * retro    : "awesome" generated, 8-bit arcade-style pixelated faces
 * robohash : a generated robot with different colors, faces, etc
 * blank    : (Gravatar only(?)) a transparent PNG image
 * pagan    : (Libravatar only) a weird little RPG guy
const baseUrl       = '';
const defaultAvatar = 'mp';

const userMail      = document.querySelector('.user-mail')
const email         = userMail !== null ? userMail.innerText : ''

async function getSha256(string) {
    const msgUint8    = new TextEncoder().encode(string);                               // encode as (utf-8) Uint8Array
    const hashBuffer  = await window.crypto.subtle.digest("SHA-256", msgUint8);         // hash it
    const hashArray   = Array.from(new Uint8Array(hashBuffer));                         // convert buffer to byte array
    const hashHex     = => b.toString(16).padStart(2, "0")).join(""); // convert bytes to hex string
    return hashHex;

if (email !== null) {
    getSha256(email).then((digestHex) => 
        document.styleSheets[0].insertRule(".user-container::before { \
            background: rgba(0,0,0,.5) url('"+baseUrl+"/avatar/"+digestHex+".jpg?d="+defaultAvatar+"') center !important; \
            content: '\\00a0\\00a0' !important; \
        }", 0)
1 Like

Love this; thanks for sharing! I changed the background CSS rule to include center on my server:

background: rgba(0,0,0,.5) url('"+digestHex+".jpg') center !important;

1 Like

Ah nice, i only tested it on me own off centre face. Let me edit that into the OP.

If anyone has any idea how to pre-check an avatar is set for an email, so that you don’t get the Gravatar logo, I’d love to hear it. I remembered about the option to default to identicon, etc.