<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

<!-- Components -->
<script defer type="module" src="https://fortifyapp.com/external/webcomponent/build/peculiar.esm.js"></script>
<script defer nomodule src="https://fortifyapp.com/external/webcomponent/build/peculiar.js"></script>
<link rel="stylesheet" href="https://fortifyapp.com/external/webcomponent/build/peculiar.css">

<style>
  body {
    height: 100vh;
    background: #6D7D87;
  }

  peculiar-fortify-certificates {
    max-width: 660px;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
</style>

<script>
  var el = document.createElement('peculiar-fortify-certificates');
  // el.language = 'ru';
  el.debug = true;
  el.filters = {
    //   onlySmartcards: false,
    //   expired: false,
    //   onlyWithPrivateKey: true,
    //   subjectDNMatch: 'apple',
    //   subjectDNMatch: new RegExp(/apple/),
    //   issuerDNMatch: 'demo',
    //   issuerDNMatch: new RegExp(/demo/),
    //   providerNameMatch: 'MacOS',
    //   providerNameMatch: new RegExp(/MacOS/),
    //   keyUsage: ['digitalSignature'],
  };

  el.addEventListener('cancel', function () {
    alert('"cancel" callback');
  });

  el.addEventListener('continue', function (event) {
    alert('"continue" callback');
    alert('certificateId: ' + event.detail.certificateId);
    alert('providerId: ' + event.detail.providerId);
  });
  
  document.body.appendChild(el);
</script>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.