This repository has been archived by the owner on May 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 264
/
index.html
123 lines (109 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!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>
$(function() {
$("#partyStarter").click(function(event) {
event.preventDefault();
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.protocol + "//" + 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) {
var statusEl = $("#oVerificationResponse > pre").empty();
var resp = jqXHR.responseText ?
JSON.stringify(JSON.parse(jqXHR.responseText), null, 4) : errorThrown;
statusEl.text(resp);
}
});
}
});
});
});
</script>
</html>