oidc-lib
Version:
A library for creating OIDC Service Providers
143 lines (114 loc) • 5.14 kB
HTML
<html lang="en">
<head>
<title>Minimal Dev Wallet - Wallet Store UI</title>
<meta charset="utf-8">
<!--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">
<script src="https://unpkg.com/credential-handler-polyfill@2.1.1/dist/credential-handler-polyfill.min.js"></script>
<script src="https://unpkg.com/web-credential-handler@1.0.1/dist/web-credential-handler.min.js"></script>
<script src="config.js"></script>
<script src="js-helpers.js"></script>
<script src="mock-user-management.js"></script>
<!--Simple cookie lib-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
</head>
<body>
<div class="container">
<h5>Wallet store() event</h5>
<div class="card-panel hide" id="logged-in">
<div id="confirm">
<p>Do you wish to store this credential?</p>
<p><strong>type:</strong> <span id="credentialType"></span></p>
<p><strong>issuer:</strong> <span id="credentialIssuer"></span></p>
<a class="waves-effect waves-light btn" id="confirmButton">Confirm</a>
<a class="waves-effect waves-light btn" id="cancelButton">Cancel</a>
</div>
<div id="userArea" class="hide">
<p><strong>Logged in:</strong> <span id="username"></span></p>
<a class="waves-effect waves-light btn-small" id="logoutButton">Reset and Logout</a>
<p><strong>Credential stored!</strong></p>
<h6>Wallet Contents:</h6>
<ol id="walletContents"></ol>
<a class="waves-effect waves-light btn center" id="doneButton">Done</a>
</div>
</div>
<div class="card-panel hide" id="logged-out">
<p>
In order to store a credential:
</p>
<ol>
<li>Register a wallet with your browser (for example,
the <a href="https://chapi-demo-wallet.digitalbazaar.com/">Demo Wallet</a>).</li>
<li>Click the <strong>Login</strong> button.</li>
</ol>
<a class="waves-effect waves-light btn" id="loginButton">Login</a>
</div>
</div>
<script>
/**
* Globals:
* * credentialHandlerPolyfill - from credential-handler-polyfill.min.js.
* This provides the get() and store() Credential Handler API calls.
*
* * WebCredentialHandler - from web-credential-handler.min.js.
* Utility/convenience library for the CHAPI polyfill, useful for wallet
* implementors.
*
* * Persistence and user management - ./mock-user-management.js
*/
async function handleStoreEvent() {
const event = await WebCredentialHandler.receiveCredentialEvent();
console.log('Store Credential Event:', event.type, event);
const credential = event.credential;
// document.getElementById('requestOrigin').innerHTML = event.credentialRequestOrigin;
// document.getElementById('hintKey').innerHTML = credential.hintKey || '';
// document.getElementById('credentialContents').innerHTML = JSON.stringify(credential.data, null, 2);
// Display the credential details, for confirmation
const vp = credential.data;
const vc = Array.isArray(vp.verifiableCredential)
? vp.verifiableCredential[0]
: vp.verifiableCredential;
document.getElementById('credentialType').innerHTML = getCredentialType(vc);
document.getElementById('credentialIssuer').innerHTML = vc.issuer;
// Set up the event handlers for the buttons
document.getElementById('cancelButton').addEventListener('click', () => {
returnToUser(event, null); // Do nothing, close the CHAPI window
});
document.getElementById('confirmButton').addEventListener('click', () => {
document.getElementById('userArea').classList.remove('hide');
document.getElementById('confirm').classList.add('hide');
storeInWallet(credential.data); // in mock-user-management.js
refreshUserArea();
});
document.getElementById('doneButton').addEventListener('click', () => {
returnToUser(event, vp);
});
}
/**
* @param storeEvent
* @param {VerifiablePresentation|null} data - Return (to client application)
* exactly what was stored, or a `null` if canceled by the user.
*/
function returnToUser(storeEvent, data) {
storeEvent.respondWith(new Promise(resolve => {
return data
? resolve({dataType: 'VerifiablePresentation', data})
: resolve(null);
}))
}
// from js-helpers.js
onDocumentReady(() => {
document.getElementById('loginButton').addEventListener('click', login);
document.getElementById('logoutButton').addEventListener('click', logout);
refreshUserArea();
})
credentialHandlerPolyfill
.loadOnce(MEDIATOR)
.then(handleStoreEvent);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>