forked from DFE-Digital/samling
-
Notifications
You must be signed in to change notification settings - Fork 1
/
samling.html
347 lines (329 loc) · 17.1 KB
/
samling.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<html>
<head>
<title>Samling</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="public/css/bootstrap.css" rel="stylesheet">
<link href="public/css/samling.css" rel="stylesheet">
<script src="public/js/jquery.min.js"></script>
<script src="public/js/bootstrap.min.js"></script>
<script src="public/forge.bundle.js"></script>
<script src="public/bundle.js"></script>
<link rel="icon" type="image/png" href="public/images/logos-scorpion-48.png">
</head>
<body>
<nav class="navbar navbar-static-top samling-navbar">
<div class="container-fluid">
<span class="navbar-header ">
<img class="samling-brand-logo" src="https://johnson-yi.github.io/images/logos/logos-scorpion.svg" >
<span class="samling-brand">SAMLING <span class="samling-brand-subtitle">Serverless SAML IDP</span></span>
</span>
</div>
</nav>
<nav class="navbar navbar-left">
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked samling-nav-pills" id="navbarSamling" role="tablist">
<li role="presentation" class="active">
<a class="samling-nav-item" href="#samlPropertiesTab" aria-controls="samlPropertiesTab" role="tab"
data-toggle="pill">SAML Response Properties</a></li>
<li role="presentation" class="">
<a class="samling-nav-item" href="#samlResponseTab" aria-controls="samlResponseTab" role="tab"
data-toggle="pill">SAML
Response</a></li>
<li role="presentation" class="">
<a class="samling-nav-item" href="#userDetailsTab" aria-controls="userDetailsTab" role="tab"
data-toggle="pill">User Details</a></li>
<li role="presentation" class="">
<a class="samling-nav-item" href="#showMetadata" aria-controls="showMetadata" role="tab"
data-toggle="pill">IdP Metadata</a></li>
<li role="presentation" class="">
<a class="samling-nav-item" href="#whatsThisTab" aria-controls="whatsThisTab" role="tab"
data-toggle="pill">What is this?</a></li>
</ul>
</div>
</nav>
<div class="col-md-7 col-md-offset-1">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane samling-tab active" id="samlPropertiesTab">
<div class="row">
<div class="col-md-9">
<form id="samlProps">
<div class="row">
<div class="col-md-12">
<button id="createResponse" type="button" class="btn btn-lg pull-right">Next >
</button>
</div>
</div>
<div class="form-group" id="nameIdentifierControl">
<label class="control-label" for="nameIdentifier">Name Identifier *</label>
<input type="text" class="form-control" id="nameIdentifier">
</div>
<div class="form-group" id="callbackUrlControl">
<label class="control-label" for="callbackUrl">Assertion Consumer URL (Recipient) *</label>
<input type="text" class="form-control" id="callbackUrl">
</div>
<div class="form-group" id="slsUrlControl">
<label class="control-label" for="slsUrl">Single Logout URL</label>
<input type="text" class="form-control" id="slsUrl">
</div>
<div class="form-group" id="slsBindingTypeControl">
<label class="control-label" for="slsBindingType">Single Logout Binding Type</label>
<select type="text" class="form-control" id="slsBindingType">
<option value="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST">urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST</option>
<option value="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect">urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="nameIdentifierFormat">Name Identifier Format</label>
<input type="text" class="form-control" id="nameIdentifierFormat"
value="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">
</div>
<div class="form-group">
<label class="control-label" for="nameQualifierFormat">Name Qualifier Format</label>
<input type="text" class="form-control" id="nameQualifierFormat">
</div>
<div class="form-group">
<label class="control-label" for="authnContextClassRef">Authentication Context Class Ref</label>
<input type="text" class="form-control" id="authnContextClassRef"
value="urn:oasis:names:tc:SAML:2.0:ac:classes:unspecified">
</div>
<div class="form-group">
<label class="control-label" for="inResponseTo">In Reponse To</label>
<input type="text" class="form-control" id="inResponseTo" value="">
</div>
<div class="form-group">
<label class="control-label" for="audience">Audience</label>
<input type="text" class="form-control" id="audience" value="">
</div>
<div class="form-group">
<label class="control-label" for="issuer">Issuer</label>
<input type="text" class="form-control" id="issuer" value="https://johnson-yi.github.io/samling/samling.html">
</div>
<div class="form-group">
<label class="control-label" for="samlStatusCode">SAML Status Code</label>
<input type="text" class="form-control" id="samlStatusCode"
value="urn:oasis:names:tc:SAML:2.0:status:Success">
</div>
<div class="form-group">
<label class="control-label" for="lifetimeInSeconds">Assertion Lifetime (seconds)</label>
<input type="text" class="form-control" id="lifetimeInSeconds" value="600">
</div>
<div class="form-group">
<label class="control-label" for="samlStatusMessage">SAML Status Message</label>
<input type="text" class="form-control" id="samlStatusMessage">
</div>
<div class="form-group">
<label class="control-label" for="samlAttributes">SAML Attributes</label>
<small class="form-text text-muted">place each attribute on a separate line</small>
<textarea class="form-control" rows="3" id="samlAttributes" placeholder="attr1=value1 attr2=value2"></textarea>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-check" id="signResponseControl">
<input type="checkbox" class="form-check-input" id="signResponse">
<label class="form-check-label" for="signResponse">Sign Response (in addition to the assertion)</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" id="signatureKeyControl">
<label class="control-label" for="signatureKey">
Signature Private Key *
</label>
<button id="saveKeyAndCert" type="button" class="btn btn-default btn-xs pull-right">
Save
</button>
<button id="generateKeyAndCert" type="button" class="btn btn-default btn-xs pull-right">
New Pair
</button>
<textarea class="form-control" rows="14" id="signatureKey"
style="font-size: 8px; font-family: monospace; resize: none"></textarea>
</div>
<div class="form-group col-md-6" id="signatureCertControl">
<label class="control-label" for="signatureCert">Signature Certificate *</label>
<textarea class="form-control" rows="14" id="signatureCert"
style="font-size: 8px; font-family: monospace; resize: none"></textarea>
</div>
</div>
</form>
</div>
<div class="col-md-3 samling-sidebar" id="samlPropertiesHelp">
<div class="sidebar-module">
<dl>
<dt>Name Identifier</dt>
<dd>The user name that will appear in the assertion as logged-in.</dd>
<dt>Name Qualifier Format</dt>
<dd>NameFormat and SPNameFormat attributes for NameID node.</dd>
<dt>Assertion Consumer URL</dt>
<dd>The assertion consumer URL where the SAML Response will be posted back to.</dd>
<dt>Single Logout URL</dt>
<dd>The single logout URL where the SAML Request/Response for logout will be sent to.</dd>
<dt>Sign Response</dt>
<dd>If checked, the SAML response will be signed in addition to the assertion.</dd>
<dt>Signature Private Key</dt>
<dd>The private key that will be used to sign the SAML assertion.</dd>
<dt>Signature Certificate</dt>
<dd>The Signature certificate to embed into the SAML response to be used by the Service Provider
for verifying the signature.
</dd>
<dt>New Pair</dt>
<dd>Generate a new random private/public key pair.</dd>
<dt>Save</dt>
<dd>Save the private key and certificate to the local storage.</dd>
<dt>Next</dt>
<dd>Create the SAML Response based on the provided properties.
You will be transferred to the <b>SAML Response</b> section.
</dd>
</dl>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane samling-tab" id="samlResponseTab">
<div class="row">
<div class="col-md-9" role="main">
<form method="POST" id="samlResponseForm">
<div class="row">
<div class="col-md-12">
<button class="btn btn-lg pull-right" type="submit" id="postSAMLResponse">Post Response!
</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-12" id="samlResponseControl">
<div class="row">
<div class="col-md-4">
<div class="form-group" id="sessionDurationControl">
<label class="control-label" for="sessionDuration">Session Duration *</label>
<input type="text" class="form-control" id="sessionDuration" value="10">
</div>
</div>
<div class="col-md-8">
<div class="form-group" id="callbackUrlReadOnlyControl">
<label class="control-label" for="callbackUrlReadOnly">Callback URL</label>
<input type="text" class="form-control" id="callbackUrlReadOnly" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group" id="relayStateControl">
<label class="control-label" for="relayState">RelayState</label>
<input type="text" class="form-control" name="RelayState" id="relayState">
</div>
</div>
</div>
<label class="control-label" for="samlResponse">
SAML Response *
</label>
<button id="copyResponseToClipboard" type="button" class="btn btn-default btn-xs pull-right"
data-toggle="tooltip" title="Copied" data-trigger="manual" data-placement="top">
Copy to Clipboard
</button>
<textarea class="form-control" rows="28" name="SAMLResponse" id="samlResponse"
style="font-size: 12px; font-family: monospace; resize: none;overflow: auto"></textarea>
</div>
</div>
</form>
</div>
<div class="col-md-3 samling-sidebar">
<div class="sidebar-module">
<dl>
<dt>SAML Response</dt>
<dd>This is the saml response the will be posted to the <b>Assertion Consumer URL</b>.</dd>
<dt>Copy to Clipboard</dt>
<dd>Copy the SAML response XML to the clipboard.</dd>
<dt>Session Duration</dt>
<dd>The session duration in minutes. Specify "0" to create a session based cookie which means
that
the cookie will expire after closing the browser tab.
</dd>
<dt>Assertion Consumer URL</dt>
<dd>(readonly) The consumer URL where the SAML Response will be posted.</dd>
<dt>RelayState</dt>
<dd>The RelayState parameter that will posted back to the Assertion Consumer URL along with the SAML response.</dd>
</dl>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane samling-tab" id="userDetailsTab">
<div class="row">
<div class="col-md-9" role="main">
<div class="">
<h2 id="signedInUser"></h2>
<h5>You have signed in at: <b id="signedInAt">You have not signed in yet.</b></h5>
<div class="form-group">
<input type="checkbox" class="form-check-input" id="sendLogout">
<label class="form-check-label" for="sendLogout">Send logout request</label>
</div>
<div>
<button class="btn btn-default" href="#" role="button" id="signedInLogout">Logout</button>
</div>
</div>
</div>
<div class="col-md-3 samling-sidebar">
<div class="sidebar-module">
<p>The currently logged in user details. A user is considered <i>logged-in</i> if there is a
cookie present that was previously created in the <b>SAML Response</b> section by clicking on
<b>Post Response</b>.
</p>
<dl>
<dt>Send logout request</dt>
<dd>If checked, A SAML logout request will first be sent to the <b>Single Logout URL</b>.</dd>
<dt>Logout</dt>
<dd>Log the user out, erasing the cookie.</dd>
</dl>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane samling-tab" id="showMetadata">
<div class="row">
<div class="col-md-9" role="main">
<h2>SAMLING IdP Metadata</h2>
<p>
<pre id="idpMetadata" style="text-overflow: auto"></pre>
</p>
<p>
<a class="btn btn-primary pull-right" href="#" role="button" id="copyMetadata"
data-toggle="tooltip" title="Copied" data-trigger="manual" data-placement="top">Copy Metadata</a>
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane samling-tab" id="whatsThisTab">
<div class="row">
<div class="col-md-9" role="main">
<section>
<h2>What is SAMLING</h2>
<p>SAMLING is a Serverless (as-in client side only) SAML IdP for the purpose of testing SAML integrations.</p>
<p>It provides complete control over the SAML response properties that will be sent back to the Service Provider, including simulating errors and the session cookie
duration that tracks the logged-in user.</p>
<p>If there is a <strong>SAMLRequest</strong> query parameter present, SAMLING will auto populate some of the SAML Response Properties.</p>
<p>Generating a SAML Response requires the use of a private key and certificate for signing the SAML Assertion.
SAMLING enables to generate a random private/public key and to save them in the local storage so they are used in subsequent SAML responses.</p>
</section>
<section>
<h2>How to Use</h2>
<ol>
<li>Go to the <strong>SAML Response Properties</strong> section.</li>
<li>Fill in the required properties fields. Required fields are marked with an asterisks (*).</li>
<li>Click on <strong>Create Response</strong>. You will be be taken the <strong>SAML Response</strong> section.</li>
<li>Review the SAML Response then click on <strong>Post Response</strong>.</li>
</ol>
</section>
</div>
<div class="col-md-3 samling-sidebar">
<div class="sidebar-module">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>