font-family:'lucida console',monaco,'andale mono','bitstream vera sans mono',consolas,monospace;
word-wrap:break-word;
border:3pxsolid#666;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
padding:.5em;
margin:.5em;
color:#ccc;
background-color:#333;
white-space:pre;
font-size:.9em;
}
#sitetitle{
font-size:2em;
color:#fff;
font-weight:bold;
margin-left:-2em;
margin-top:-200px;
padding-bottom:200px;
}
</style>
</head>
<body>
<divclass="title">
Example BrowserID Relying Party
</div>
<divclass="intro">
This is the simplest possible (stateless, static, client-only) BrowserID Relying Party. It
demonstrates the steps required to use BrowserID to verify the identity of a user.
<aid="partyStarter"href="#">Click here to kick off the party</a>. Here's what will happen:
</div>
a{
color:#fff;
}
<divclass="step">
<divclass="number">1.</div>
<divclass="desc">Upon clicking the link above, the webpage will call `navigator.id.getVerifiedEmail()` to indicate to the browser that it would like an identity for the user</div>
</div>
#logininstructions{
width:300px;
margin:auto;
}
<divclass="step">
<divclass="number">2.</div>
<divclass="desc">The browser will spawn a dialog that the user can interact with the select what identity they want to provide to the site </div>
</div>
.content{
display:none;
}
<divclass="step">
<divclass="number">3.</div>
<divclass="desc">Upon selection of an identity, an <i>assertion</i> will be returned to the webpage via a callback, it looks like this: </div>
<divclass="output"id="oAssertion">...waiting for party commencement...</div>
</div>
</style>
</head>
<divclass="step">
<divclass="number">4.</div>
<divclass="desc">This site can then send that assertion up to a <i>verification server</i> which cryptographically checks that the identity embedded in the verification actually belongs to browser in use by the monkey at the keyboard. The request looks like </div>
<divclass="output"id="oVerificationRequest">...waiting for party commencement...</div>
</div>
</style>
</head>
<body>
<divid="appcontainer">
<divid="sitetitle">All My Words</div>
<pclass="content">
This is a simple tool that lets your 5 year old collect all of the
words they know on the computer. Its an introduction to task driven
computer usage for little ones. It's <i>also</i> (uh, and primarily)
an example app that uses Mozilla ID for an awesome login experience.
</p>
<divclass="step">
<divclass="number">5.</div>
<divclass="desc"><b>Verification Response</b>: The verification server responds to the site to tell it whether or not the verification blob is valid:</div>
<divclass="output"id="oVerificationResponse">...waiting for party commencement...</div>
</div>
<pclass="content"id="logininstructions">
To get started, <ahref="#"id="login">log in</a>.
</p>
<divclass="step">
<divclass="number">6.</div>
<divclass="desc"><b>All Done!</b> The site can now create an account keyed on the users identity (email address), set cookies, etc! Logging in again is just re-running these same steps.</div>
