LacunaWebPKI: Show certificate details Example

by Lacuna Software

HTML

<script src="https://cdn.lacunasoftware.com/libs/web-pki/lacuna-web-pki-2.16.1.min.js"></script>

<h2>Web PKI - Show certificate details Example</h2>
<p>Select a certificate:</p>
<select id="certificateSelect"></select>
<button id="refreshCertificates" type="button">Refresh Certificates</button>
<h3>Certificate Details</h3>
<div id="certDetails"></div>
<h3>Logs</h3>
<div id="logPanel" class="info"></div>

CSS

body {
  margin: 20px;
  font-family: sans-serif;
}

.label {
  font-family: monospace;
  font-weight: bold;
}

.info {
  font-family: monospace;
}

#logPanel {
  font-family: monospace;
}

JavaScript

// ------------------------------------------------------------------------------------------

var pki = new LacunaWebPKI('AiEAKi5sYWN1bmFzb2Z0d2FyZS5jb20sanNmaWRkbGUubmV0AAADAFBybwgAABg/D+l74AgAAVP0dSRjd5vjlQ8EFzCfN2tOR/S2ENB6x1vRXssle+wxvbEeT3/vmzm7eKDMWr8kgl2W/BfUqYCOC0PnLOVKS8Em0OXtYD+F3WI1+3zQcvI2W34ppGVx1zizoRfyq+Q4KZ9rZPtFYyoBmr1SR5ZyWPqXWNY7p5XWFkxvFmQU11jho5Cd8VX6cv2OuOEw4eBptN5whzV+9XPHEmPav+TJB0hsYbw0TzwLC253i8WhJEQyIVenNGNNHT3foxsFmDTvXqF/HgjOwqgyJJ1hL0wIqsN0pB5weYhjGLwlRt1FqLV1xTScs5nP3xWTK/CPBpq3NDdTobQMsc7PEF46RT1qXbg=');

var certificates = {};

function start() {
    log('Initializing component ...');
    pki.init({ ready: onWebPkiReady });
}

function onWebPkiReady () {
    log('Component ready, listing certificates ...');
    refreshCertificates();
}

function refreshCertificates() {
    pki.listCertificates({
        selectId: 'certificateSelect'
    }).success(function (certs) {
    		certificates = certs;
        log('Certificates found: ' + certificates.length);
        onCertificateSelectChange();
    });
}

function onCertificateSelectChange() {
	var id = $('#certificateSelect').val();
  showCertDetails(id);
}

function showCertDetails(thumbprint) {
	console.log('selected: ' + thumbprint);
  var detailsDiv = $('#certDetails');
  detailsDiv.empty();
  
	var cert = certificates.find(function(c) { return c.thumbprint === thumbprint;});
  if (!cert) {
  	return;
  }
  
  var mainList = detailsDiv.append('<ul>');
  mainList.append(createDetail('Thumbprint', cert.thumbprint));
  mainList.append(createDetail('SubjectName', cert.subjectName));
  mainList.append(createDetail('IssuerName', cert.issuerName));
  if (cert.email) { mainList.append(createDetail('Email', cert.email)); }
  
  // ICP-Brasil Fields -----------------------------------
  if (cert.pkiBrazil.cpf) {
  	var icpBrItem = mainList.append(createDetail('ICP-Brasil', ''));
    var brList = $('<ul>');
    
    if...