-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
136 lines (115 loc) · 4.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Minimal Demo Verifier</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified Materialize JS/CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Credential Handler API Polyfill-->
<script src="https://unpkg.com/credential-handler-polyfill@3/dist/credential-handler-polyfill.min.js"></script>
<script src="config.js"></script>
</head>
<body>
<div class="container">
<div class="card-panel">
<h5>Credential Handler API (CHAPI) Demo Verifier</h5>
<p><a href="https://github.com/credential-handler/credential-handler-polyfill">Read more about CHAPI</a></p>
<p>
If you have not yet picked a wallet and registered it with your browser,
try out the
<a href="https://wallet.example.chapi.io/">Demo Wallet</a>.
</p>
<p>This is a minimal credential Verifier application that demonstrates
how an app would ask the user for a credential
(using CHAPI's <code>get()</code> under the hood).
</p>
<p>When you click the Request button, a Verifiable Credential will
be requested from your digital wallet.
</p>
<a class="waves-effect waves-light btn" id="requestButton">Present a Credential</a>
</div>
<div class="card-panel hide" id="resultsPanel">
<h6>Result of get() operation:</h6>
<pre><code id="getResults"></code></pre>
</div>
</div>
<script>
async function onClickRequest() {
// create Verifiable Presentation Request
const testVpr = {
query: [{
type: "QueryByExample",
credentialQuery: {
reason: "Please present your University Degree to continue the teacher application process.",
example: {
"@context": [
"https://w3id.org/credentials/v1",
"https://www.w3.org/2018/credentials/examples/v1"
],
type: ["UniversityDegreeCredential"],
credentialSubject: {
"id": "did:example:ebfeb1f712ebc6f1c276e12ec21"
}
}
}
}]
};
// fake OID4VP url
let oid4vpUrl;
{
const searchParams = new URLSearchParams();
searchParams.set('fake', JSON.stringify(testVpr));
oid4vpUrl = `https://test.example?${searchParams}`;
}
console.log('oid4vpUrl', oid4vpUrl);
// fake VC API url
let vcapiUrl;
{
const searchParams = new URLSearchParams();
searchParams.set('fakevpr', JSON.stringify(testVpr));
vcapiUrl = 'https://vcapi.example/exchangers/z123/exchanges/z456?' +
searchParams;
}
console.log('vcapiUrl', vcapiUrl);
// create Credential Interface Query
const credentialInterfaceQuery = {
web: {
VerifiablePresentation: testVpr,
/*recommendedHandlerOrigins: [
"https://wallet.example.chapi.io/"
],*/
protocols: {
OID4VP: oid4vpUrl,
vcapi: vcapiUrl
}
}
};
console.log('Requesting credential...');
document.getElementById('getResults').innerText = 'Requesting credential...';
const result = await navigator.credentials.get(credentialInterfaceQuery);
document.getElementById('resultsPanel').classList.remove('hide');
document.getElementById('getResults').innerText = JSON.stringify(result, null, 2);
console.log('Result of get() request:', JSON.stringify(result, null, 2));
}
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(() => {
document.getElementById('requestButton').addEventListener('click', onClickRequest);
console.log('Document ready.')
})
credentialHandlerPolyfill
.loadOnce(MEDIATOR)
.then(console.log('Polyfill loaded.'))
.catch(e => console.error('Error loading polyfill:', e));
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>