rp/index2.html

<!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 - Specific Identity
</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.<br />
  <a id="tokenGetter" href="#">Click here to preauth</a>. <span id="token"></span><br />
  <a id="badpartyStarter" href="#">Click here to kick off the bad party</a>.<br />
  <a id="partyStarter" href="#">Click here to kick off the party</a>.<br />  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.getSpecificVerifiedEmail()</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">...waiting for party commencement...</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>
  function dumpObject(obj) {
    var htmlRep = "";
    for (var k in obj) {
      if (obj.hasOwnProperty(k) && typeof obj[k] === 'string') {
        htmlRep += "<b>" + k + ":</b> " + obj[k] + "<br/>";
      } else if (k === 'valid-until') {
        htmlRep += "<b>" + k + ":</b> " + (new Date(obj[k])).toString() + "<br/>";
      }

    }
    return htmlRep;
  }

  function start_the_party(email, token) {
      navigator.id.getSpecificVerifiedEmail(email, token, function(assertion) {
        // Now we'll send this assertion over to the verification server for validation
        $("#oAssertion").empty().html(dumpObject(assertion));

        var url = "http://browserid.org/verify?assertion=" + window.encodeURIComponent(assertion) +
                  "&audience=" + window.encodeURIComponent("rp.eyedee.me");
        $("#oVerificationRequest").empty().text(url);

        $.ajax({
          url: url,
          success: function(data, textStatus, jqXHR) {
            $("#oVerificationResponse").empty().text(JSON.stringify(data, null, 4));
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $("#oVerificationResponse").empty().text(jqXHR.responseText);
          }
        })
      }, function(code, msg) {
        alert("something very bad happened! ("+code+"): " + msg); 
      });
  }

  $(document).ready(function() {
    var GUID = null;
    $("#tokenGetter").click(function() {
      navigator.id.preauthEmail("ben@adida.net", function(guid) {      
        $('#token').html(guid);
        GUID=guid;
      });
    });

    $("#partyStarter").click(function() {
      start_the_party('ben@adida.net', GUID);
    });

    $("#badpartyStarter").click(function() {
      start_the_party('ben2@adida.net', GUID);
    });
  });
</script>

</html>