Branding – Changing the Logo on the Cloud Foundry UAA Login Page

Let’s say that you just deployed your shiny new Cloud Foundry at work, and are showing it off to your friends. As you and your friends hover over the login page, Bill from Corporate Compliance happens to stop by – he cranes his neck, sees your monitor, and says "Hey, that’s great! Where’s our logo? Our logo should be on that login page." He whips out his phone and sends you the company standard 200 x 200 png file and says "Yeah, if you could get that logo updated by the end of the week, that’d be greeeat."

Your friends disperse, and like any good BOSH operator with a "can do" attitude, you go directly to the UAA Release and start looking at the UAA job’s specs file for any properties you can change.

Aha! You see it:

#Branding/Customization
login.branding.company_name:
  description: This name is used on the UAA Pages and in account management related communication in UAA
login.branding.product_logo:
    description: This is a base64 encoded PNG image which will be used as the logo on all UAA pages like Login, Sign Up etc.
login.branding.square_logo:
    description: This is a base64 encoded PNG image which will be used as the favicon for the UAA pages
login.branding.footer_legal_text:
    description: This text appears on the footer of all UAA pages
login.branding.footer_links:
    description: These links appear on the footer of all UAA pages. You may choose to add multiple urls for things like Support, Terms of Service etc.
    example:
      linkDisplayName: linkDisplayUrl

So you look at the image file. You look at your Cloud Foundry manifest. You look again at the spec. You look again at the image file.

"How do I cram this file into my manifest? Can I just paste in the contents of the file?" you wonder aloud. You type cat logo.png, hoping this will be a 5 minute copy/paste job. You frantically hit the mute button as your terminal starts beeping like R2D2 on caffeine pills. Nope!

I’ll spare you the rest of the narrative. As specified in the spec file, you need to provide a base64 encoded image in your manifest. To generate this, run the following command:

cat logo.png | base64 | tr -d '\n' > logo.png.base64

To break this down: the base64 command encodes the PNG file, but generates newline characters, which we do not want in our manifest – we want this all in 1 line. Therefore, the tr command trims these out.

Once you’ve done this, simply copy the one-liner from the resulting file and paste it into your manifest. If you do it in VIM, for example, it’ll look like this (ellipses added for readability):

...
  login:
    branding:
      company_name: Stark & Wayne
      product_logo: /9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAUDBAQE...

Once you paste your logo, if you arrow up a line, VIM will look like this due to the obscenely long line of text you have just pasted:

...
  login:
    asset_base_url: /resources/trustedanalytics
    branding:
      company_name: Stark & Wayne
@
@
@
@
@
@
@
...

Save your manifest and deploy. Your site is now compliant! For now.

Spread the word

twitter icon facebook icon linkedin icon