Identity at Mozilla

Home of the Mozilla Identity team

  1. New Feature: Adding Your Website’s Name and Logo to the Persona Login

    Jul 13, 2012 — by warnermoz

    One of the features we’ve added to Persona’s new Observer API is the ability for websites that use Persona (“Relying Parties”) to add their name and logo to the login screen. To do this, just add a siteName and/or siteLogo property to your navigator.id.request() call.

    The default login screen only shows the website’s domain name, as illustrated below:

    By adding siteName, you can put additional text in the right-hand RP area:

    navigator.id.request({ siteName: "Tahoe LAFS" }); 

    Or you can use siteLogo to add an image:

    navigator.id.request({ siteLogo: "/logo.png" }); 

    You can also use both, in which case the name will appear below the logo.

    In all cases, the website’s domain name is displayed below the siteName and siteLogo, so the user knows for sure which site is going to receive their email address.

    Restrictions (Use SSL!)

    There are a few restrictions to be aware of:

    • siteName must be plain text: no markup is allowed. Unicode and whitespace is ok, but keep it short or the dialog box may clip.
    • siteLogo must be a site-relative URL with an absolute path (i.e. it must start with a ‘/’ slash). In the future, we’ll probably relax this requirement and enable absolute URLs and even data: URIs. Images larger than 100*100 pixels will be scaled down to fit.
    • siteLogo requires SSL. The login dialog is served over HTTPS, so the logo image must also be served over HTTPS (to avoid mixed-content warnings), which means your login page (the one that calls navigator.id.request()) must be served over HTTPS too. If you try to use siteLogo from an HTTP-served page, your users will actually get an “improper usage of API” error from the Persona code. But, as a respectable RP who cares about your user’s privacy, your whole site is already being served with HTTPS, right? Right?

    Support for siteName and siteLogo rolled to production yesterday, so take a look at the docs and give it a spin. And let us know how it works for you, through our mailing list, the #identity IRC channel on irc.mozilla.org, or on Twitter with “#browserid”.