Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 838d0a7545
Fetching contributors…

Cannot retrieve contributors at this time

120 lines (105 sloc) 4.75 kb
<!DOCTYPE html>
<html>
<head>
<title>
BrowserID Relying Party
</title>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<style type="text/css">
body { margin: auto; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; }
a:link, a:visited { font-style: italic; text-decoration: none; color: #008; }
a:hover { border-bottom: 2px solid black ; }
.number { font-family: 'Permanent Marker', arial, serif; font-size: 4em; float: left; padding: 0; margin: 0; vertical-align: top; width: 1.3em}
.title { font-size: 2em; font-weight: bold; text-align: center; margin: 1.5em; }
.intro { font-size: 1.2em; width: 600px; margin: auto; }
.step { width: 600px; margin: auto; margin-top: 1em;}
.desc { padding-top: 1.5em; min-height: 4.5em;}
.output {
font-family: 'lucida console', monaco, 'andale mono', 'bitstream vera sans mono', consolas, monospace;
border: 3px solid #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;
width:600px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="title">
Example BrowserID Relying Party
</div>
<div class="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.
<a id="partyStarter" href="#">Click here to kick off the party</a>. Here's what will happen:
</div>
<div class="step">
<div class="number">1.</div>
<div class="desc"><b>Browser Interaction:</b> Upon clicking the link above, the webpage will call <tt>navigator.id.getVerifiedEmail()</tt> to indicate to the browser that it would like an identity for the user</div>
</div>
<div class="step">
<div class="number">2.</div>
<div class="desc"><b>User Interaction:</b> 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>
<div class="step">
<div class="number">3.</div>
<div class="desc"><b>Assertion Generation:</b> Upon selection of an identity, an <i>assertion</i> will be returned to the webpage via a callback, it looks like this: </div>
<div class="output" id="oAssertion">...waiting for party commencement...</div>
</div>
<div class="step">
<div class="number">4.</div>
<div class="desc"><b>Assertion Verification:</b> 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 the browser in use by the monkey at the keyboard. The request looks like </div>
<div class="output" id="oVerificationRequest">...waiting for party commencement...</div>
</div>
<div class="step">
<div class="number">5.</div>
<div class="desc"><b>Verification Response</b>: The verification server responds to the site to tell it whether or not the verification blob is valid:</div>
<div class="output" id="oVerificationResponse"><pre>...waiting for party commencement...</pre></div>
</div>
<div class="step">
<div class="number">6.</div>
<div class="desc"><b>All Done!</b> The site can now create an account keyed on the users identity (email address), set cookies, etc! Signing in again is just re-running these same steps.</div>
</div>
</body>
<script src="jquery-min.js"></script>
<script src="https://browserid.org/include.js"></script>
<script>
$(document).ready(function() {
$("#partyStarter").click(function() {
navigator.id.getVerifiedEmail(function(assertion) {
if (!assertion) {
alert("couldn't get the users email address!");
} else {
// Now we'll send this assertion over to the verification server for validation
$("#oAssertion").empty().text(assertion);
var url = "https://browserid.org/verify"
var data = {
assertion: assertion,
audience: window.location.host
};
$("#oVerificationRequest").empty().text("POST " + url + "\n" + JSON.stringify(data));
$.ajax({
url: "https://browserid.org/verify",
type: "POST",
dataType: "json",
data: data,
success: function(data, textStatus, jqXHR) {
$("#oVerificationResponse > pre").empty().text(JSON.stringify(data, null, 4));
},
error: function(jqXHR, textStatus, errorThrown) {
$("#oVerificationResponse > pre").empty().text(JSON.stringify(JSON.parse(jqXHR.responseText), null, 4));
}
});
}
});
});
});
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.