-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
298 lines (287 loc) · 12.1 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
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
<!DOCTYPE html>
<html>
<head>
<title>Verifiable Credentials ReSpec Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
<script src="./dist/main.js" class="remove"></script>
<script type="text/javascript" class="remove">
var respecConfig = {
group: "vc",
specStatus: "ED",
shortName: "respec-vc-test",
subtitle: "Test of ReSpec VC",
doJsonLd: true,
includePermalinks: false,
edDraftURI: "https://respec-vc-test.example/",
editors: [
{ name: "Manu Sporny", url: "https://www.linkedin.com/in/manusporny/",
company: "Digital Bazaar", companyURL: "http://digitalbazaar.com/"}
],
authors:
[
{ name: "Manu Sporny", url: "http://digitalbazaar.com/",
company: "Digital Bazaar", companyURL: "http://digitalbazaar.com/"}
],
maxTocLevel: 2,
inlineCSS: true,
postProcess: [window.respecVc.createVcExamples]
};
</script>
<style>
pre .comment {
font-weight: bold;
color: SteelBlue;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
code {
color: rgb(199, 73, 0);
font-weight: bold;
}
</style>
</head>
<body>
<section id="abstract">
<p>Hello respec-vc!</p>
</section>
<section id="sotd">
<p>This is a test of the respec-vc plugin.</p>
</section>
<section>
<h1>Basic Example</h1>
<p>Here is a signing example</p>
<pre class="example nohighlight vc" title="A Verifiable Credential example">
{
<span class='comment'>// set the context, which establishes the special terms we will be using
// such as 'issuer' and 'alumniOf'.</span>
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
<span class='comment'>// specify the identifier for the credential</span>
"id": "http://example.edu/credentials/1872",
<span class='comment'>// the credential types, which declare what data to expect in the credential</span>
"type": ["VerifiableCredential", "ExampleAlumniCredential"],
<span class='comment'>// the entity that issued the credential</span>
"issuer": "https://example.edu/issuers/565049",
<span class='comment'>// when the credential was issued</span>
"validFrom": "2010-01-01T19:23:24Z",
<span class='comment'>// claims about the subjects of the credential</span>
"credentialSubject": {
<span class='comment'>// identifier for the only subject of the credential</span>
"id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
<span class='comment'>// assertion about the only subject of the credential</span>
"alumniOf": {
"id": "did:example:c276e12ec21ebfeb1f712ebc6f1",
"name": "Example University"
}
}
}
</pre>
</pre>
<pre class="example nohighlight vc" data-vc-tabs="jose sd-jwt cose" title="An example Verifiable Presentation with an EnvelopedVerifiableCredential">
{
<span class='comment'>// set the context, which establishes the special terms we will be using.</span>
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
<span class='comment'>// specify the identifier for the presentation</span>
"id": "http://example.edu/presentations/1872",
<span class='comment'>// the presentation type, which declares what data to expect in the presentation</span>
"type": "VerifiablePresentation",
<span class='comment'>// when the presentation was issued</span>
"validFrom": "2010-01-01T19:23:24Z",
<span class='comment'>// credentials in the presentation</span>
"verifiableCredential": [
{
"@context": "https://www.w3.org/ns/credentials/v2",
"id": "data:application/vc+cose;base64url,UXpWalYuLi5STWpV",
"type": "EnvelopedVerifiableCredential"
},
{
"@context": "https://www.w3.org/ns/credentials/v2",
"id": "data:application/vc+jwt;eyVjV...RMjU",
"type": "EnvelopedVerifiableCredential"
},
{
"@context": "https://www.w3.org/ns/credentials/v2",
"id": "data:application/vc+sd-jwt;eyVjV...RMjU",
"type": "EnvelopedVerifiableCredential"
}
]
}
</pre>
<pre class="example nohighlight vc" data-vc-tabs="jose sd-jwt cose" title="An example Verifiable Presentation with an EnvelopedVerifiablePresentation">
{
<span class='comment'>// set the context, which establishes the special terms we will be using.</span>
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
<span class='comment'>// specify the identifier for the presentation</span>
"id": "data:application/vp+jwt;eyJraWQiOiJFeEhrQk1XOWZtYmt2VjI2Nm1ScHVQMnNVWV9OX0VXSU4xbGFwVXpPOHJvIiwiYWxnIjoiRVMyNTYifQ .eyJAY29udGV4dCI6WyJodHRwczovL3d3dy53My5vcmcvbnMvY3JlZGVudGlhbHMvdjIiLCJodHRwczovL3d3dy53My5vcmcvbnMvY3JlZGVudGlhbHMvZXhhbXBsZXMvdjIiXSwiaWQiOiJodHRwOi8vZXhhbXBsZS5lZHUvcHJlc2VudGF0aW9ucy8xODcyIiwidHlwZSI6IlZlcmlmaWFibGVQcmVzZW50YXRpb24iLCJ2YWxpZEZyb20iOiIyMDEwLTAxLTAxVDE5OjIzOjI0WiIsInZlcmlmaWFibGVDcmVkZW50aWFsIjpbeyJAY29udGV4dCI6Imh0dHBzOi8vd3d3LnczLm9yZy9ucy9jcmVkZW50aWFscy92MiIsImlkIjoiZGF0YTphcHBsaWNhdGlvbi92Yytjb3NlO2Jhc2U2NHVybCxWVmh3VjJGc1dYVk1hVFZUVkZkd1ZnIiwidHlwZSI6IkVudmVsb3BlZFZlcmlmaWFibGVDcmVkZW50aWFsIn0seyJAY29udGV4dCI6Imh0dHBzOi8vd3d3LnczLm9yZy9ucy9jcmVkZW50aWFscy92MiIsImlkIjoiZGF0YTphcHBsaWNhdGlvbi92Yytqd3Q7ZXlWalYuLi5STWpVIiwidHlwZSI6IkVudmVsb3BlZFZlcmlmaWFibGVDcmVkZW50aWFsIn0seyJAY29udGV4dCI6Imh0dHBzOi8vd3d3LnczLm9yZy9ucy9jcmVkZW50aWFscy92MiIsImlkIjoiZGF0YTphcHBsaWNhdGlvbi92YytzZC1qd3Q7ZXlWalYuLi5STWpVIiwidHlwZSI6IkVudmVsb3BlZFZlcmlmaWFibGVDcmVkZW50aWFsIn1dfQ .BucCqG8MOovYQ-2ddOAVKeE66SEd7Tai3KxOP-09vzzwVaeCQa0Boyaor1NjZ5xWvbEo_duZSmRhiEkiZC_kIg",
<span class='comment'>// the presentation type, which declares what data to expect in the presentation</span>
"type": "EnvelopedVerifiablePresentation"
}
</pre>
</section>
<section>
<h1>Only Certain Tabs Example</h1>
<p>This example shows use of <code>data-vc-tabs</code> for filtering which
tabs are displayed.</p>
<pre class="example nohighlight vc" title="A Verifiable Credential example"
data-vc-vm='https://example.edu/issuers/565049/keys/1'
data-vc-tabs="bbs-2023 jose">
{
<span class='comment'>// set the context, which establishes the special terms we will be using
// such as 'issuer' and 'alumniOf'.</span>
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://www.w3.org/ns/credentials/examples/v2"
],
<span class='comment'>// specify the identifier for the credential</span>
"id": "http://example.edu/credentials/1872",
<span class='comment'>// the credential types, which declare what data to expect in the credential</span>
"type": ["VerifiableCredential", "ExampleAlumniCredential"],
<span class='comment'>// the entity that issued the credential</span>
"issuer": "https://example.edu/issuers/565049",
<span class='comment'>// when the credential was issued</span>
"validFrom": "2010-01-01T19:23:24Z",
<span class='comment'>// claims about the subjects of the credential</span>
"credentialSubject": {
<span class='comment'>// identifier for the only subject of the credential</span>
"id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
<span class='comment'>// assertion about the only subject of the credential</span>
"alumniOf": {
"id": "did:example:c276e12ec21ebfeb1f712ebc6f1",
"name": "Example University"
}
}
}
</pre>
</section>
<section>
<h1>QR Code Encoding Example</h1>
<p>This example shows use of <code>data-vc-tabs</code> to include VCs
encoded as QR Codes (and CBOR Diagnostic Output).</p>
<pre class="example nohighlight vc" title="A Verifiable Credential encoded as a QR Code"
data-vc-vm='https://example.edu/issuers/565049/keys/1'
data-vc-tabs="cbor-ld qr">
{
"@context": [
"https://www.w3.org/ns/credentials/v2",
"https://w3id.org/vdl/v2"
],
"type": [
"VerifiableCredential",
"Iso18013DriversLicenseCredential"
],
"issuer": "did:key:z6MkjxvA4FNrQUhr8f7xhdQuP1VPzErkcnfxsRaU5oFgy2E5",
"validFrom": "2023-11-15T10:00:00Z",
"validUntil": "2028-11-15T12:00:00Z",
"name": "Utopia Driver's License",
"image": "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...kSuQmCC",
"description": "A license granting driving privileges in Utopia.",
"credentialSubject": {
"id": "did:example:12347abcd",
"type": "LicensedDriver",
"driversLicense": {
"type": "Iso18013DriversLicense",
"document_number": "542426814",
"family_name": "TURNER",
"given_name": "SUSAN",
"portrait": "data:image/jpeg;base64,/9j/4AAQSkZJR...RSClooooP/2Q==",
"birth_date": "1998-08-28",
"issue_date": "2023-01-15T10:00:00Z",
"expiry_date": "2028-08-27T12:00:00Z",
"issuing_country": "UA",
"issuing_authority": "UADMV",
"un_distinguishing_sign": "UTA",
"sex": 2
}
}
}
</pre>
</section>
<section>
<h1>File Hash Examples</h1>
<p>
This section demonstrates the hashing of remote files. Hashes for
`https://www.w3.org/ns/credentials/v2` are provided below:
</p>
<ul>
<li>
raw (`openssl dgst -sha256`):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="openssl dgst -sha256" /></code>
</li>
<li>
digestSRI (sha2-256 base64pad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="sri sha2-256" /></code>
</li>
<li>
digestSRI (sha2-384 base64pad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="sri sha2-384" /></code>
</li>
<li>
digestMultibase (sha2-256 base16):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha2-256 base16" /></code>
</li>
<li>
digestMultibase (sha2-256 base58btc):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha2-256 base58btc" /></code>
</li>
<li>
digestMultibase (sha2-256 base64-url-nopad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha2-256" /></code>
</li>
<li>
digestMultibase (sha2-384 base64-url-nopad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha2-384" /></code>
</li>
<li>
digestMultibase (sha3-256 base64-url-nopad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha3-256" /></code>
</li>
<li>
digestMultibase (sha3-384 base64-url-nopad):
<code><span class="vc-hash" data-hash-url="https://www.w3.org/ns/credentials/v2"
data-hash-format="multihash sha3-384" /></code>
</li>
</ul>
</section>
<section>
<h1>DID Document Examples</h1>
<p>
This section demonstrates how you can generate DID Documents
</p>
<pre class="example nohighlight did-key"
title="An did:key DID Document expressing a P-256 public key useful with the ECDSA"
data-did='did:key:zDnaerx9CtbPJ1q36T5Ln5wYt3MQYeGRG5ehnPAmxcf5mDZpv'>
</pre>
<pre class="example nohighlight did-key"
title="An did:key DID Document expressing a P-384 public key useful with the ECDSA"
data-did='did:key:z82LkvCwHNreneWpsgPEbV3gu1C6NFJEBg4srfJ5gdxEsMGRJUz2sG9FE42shbn2xkZJh54'>
</pre>
<pre class="example nohighlight did-key"
title="An did:key DID Document expressing an Ed25519 public key useful with the EdDSA"
data-did='did:key:z6Mkf5rGMoatrSj1f4CyvuHBeXJELe9RPdzo2PKGNCKVtZxP'>
</pre>
<pre class="example nohighlight did-key"
title="An did:key DID Document expressing a BLS12-381 G2 group public key useful with the BBSDSA"
data-did='did:key:zUC7EK3ZakmukHhuncwkbySmomv3FmrkmS36E4Ks5rsb6VQSRpoCrx6Hb8e2Nk6UvJFSdyw9NK1scFXJp21gNNYFjVWNgaqyGnkyhtagagCpQb5B7tagJu3HDbjQ8h5ypoHjwBb'>
</pre>
</section>
</body>
</html>