Central accountchooser.com demo

Eric wants to access the Internet on a device he has never used before.  It might be a new phone, a new PC, an Internet cafe, etc.  He wants to start by checking his email, so he logs into that email provider.  Here is an example of such a login screen on a mobile device

After being authenticated he sees a new screen asking him to consent to adding this account to his computer.

After confirming the account, he sees his inbox

 

While browsing the Internet he follows a link to an ecommerce site, though he cannot remember if he has created an account there in the past.

He clicks the Sign in button, already getting annoyed about the process he expects he will need to go through to try to figure out if he has an account, and how to login to it, or worse, he might have to create a new account with all the steps that involves.  However what he sees next is:

This is much better then he expected, so he goes ahead and clicks the entry for his account.  He then finds he is logged in.

He was so happy by the simple experience, that he mentions the site to his wife.  Imagine this device as a new PC, and later his wife wanted to check out that site.  When she went there, her husband would still be logged in, so she would try to sign out.

However she notices the Switch account option, and chooses that instead.  She then sees the account list.  It does not have an entry for her, so she chooses the option to add another account.

She sees some options for different accounts types, as well as the option to just type her email address directly.  She happens to use Yahoo so clicks that choice.

She is presented with the Yahoo login screen.

Then she is asked to confirm she wants to add that account to this computer.

After doing that, she is now logged into the ecommerce site.

Eric and his wife Sara are happy users who look forward to seeing this sign in experience on other sites.

If you would like to try this yourself, visit the demo instructions.


But what happened behind the scenes to make this work?

The first difference is the screen shown after the user Eric logged into his mailbox:

Note that this page is served by accountchooser.com [ignore the appsport part, that is just for testing].  This is a central domain run by the OpenIDFoundation that has no servers, but just serves up an HTML5 app which keeps a list of accounts in the user’s browser.  However it will only add an entry if the user consents.  Any website on the Internet can redirect the user to this domain with an account to add.  For example the user’s wife saw the page below to consent to add her account.

Here is another example of a user adding an account from a social network:

On an advanced note, if the device has a native login system, and the user added an account to that login system, then the OS/browser can push an entry directly into this domain.

The second difference was the page shown after clicking signin on the ecommerce site.  In that case the user was again redirected to accountchooser.com, and they are shown a list of accounts they consented to include on this machine.

Here is another example of a user selecting an account from a social network:

When the user clicks an entry, the information in that entry (photo, name, email, IDP domain) is sent back to the website.  That is all the central account chooser does.  Note that the user only needs to add their account to the accountchooser.com list once per browser.  From that point on, all they need to do is click their picture.

It is then up to the website to decide how to handle that email address.  In most cases the website will first see if it has a registered account for that email.  If so, it can then ask the user to login, or redirect them to an identity provider.  If an identity provider is used, and the person has previously consented to be automatically logged into this site, then the end user is just immediately logged in.  If the site cannot find a registered account for that email, it can either ask the user to create one, or redirect the user to an identity provider to help bootstrap the registration process.  For best practices on handling this logic, see the Guide to Running a User Account System.