I am fetching the users automatically from Okta. Okta doesn't have support for profile pictures and the catalog doesn't seem to have a way to edit my profile picture afterwards, how are the catalog profile images designed to work?
#How can I edit catalog's users profile picture if okta doesn't have them?
pallid dirge
warped wedge
Oh Interesting. I wrote a catalog provider for okta.. Are you using the the roadiehq one? I think its meant to set the profile picture on the user.
pallid dirge
I am using it yes, but the thing is that okta doesn't have profile pictures in my org and, as long as I know, it is not supported by okta but I may be wrong
@warped wedge do you know by any chance how does the plugin get the profile image from okta?
warped wedge
it calls the okta api.
ahh sorry I see.. okta doesnt have profile pictures... so I suppose you could add a catalog processor to get a profile picture from somewhere.
pallid dirge
yeah, my understading is correct then, ideally I would like for users to be able to edit their profile picture but this doesn't seem to be supported by backstage
warped wedge
Well I suppose with gravitar, each user could edit the image?
I have excited myself with the idea of using something like gravitar for this... please forgive me.
pallid dirge
no no, I get it, I can write the code for it but first I wanted to understand if backstage supports this out of the box
warped wedge
I just asked chatgpt to do it.
import { CatalogProcessor, processingResult } from '@backstage/plugin-catalog-backend';
import { Entity } from '@backstage/catalog-model';
export class GravatarProcessor implements CatalogProcessor {
async preProcessEntity(entity: Entity) {
// Only process User entities
if (entity.kind === 'User' && entity.spec?.profile?.email) {
const email = entity.spec.profile.email.trim().toLowerCase();
const hash = crypto.createHash('md5').update(email).digest('hex');
const gravatarUrl = `https://www.gravatar.com/avatar/${hash}`;
// Add the Gravatar URL to the spec.profile.picture
entity.spec.profile.picture = gravatarUrl;
}
// Return the possibly modified entity
return entity;
}
}
I created a plugin for that.. https://github.com/RoadieHQ/roadie-backstage-plugins/tree/main/plugins/backend/catalog-backend-module-gravatar
pallid dirge
haha, that was quick
how does gravatar work exactly, it generate an url and then each user can go to that url and modify the image?
warped wedge
Yeah basically, you go to gravitar, enter your email, it sends you a code to your email address, then you are logged in. You then upload an avatar for your email address. Then clients can generate an md5 of the email address and retrieve an image for the email address.
I am pretty sure that github uses it to render profile images. let me check.
pallid dirge
does that mean that, if we use github, we already should have a gravatar link for that email?
because that would be awesome if I can just pull images from github in that way
warped wedge
Not neccessarily. Basically github defaults to use gravitar if it is set.. i think if the user uploaded directly to github it woild not show up.