Embedded ID card signatures

Each national eID card, USB crypto token or other physical qualified signature creation device QSCD is using a bit different method to talk and interface with the token.

You can expect to have 2 different calls to the ID card.

1. Get public certificate
2. Create signature for the digest

To make it as easy as possible we have hidden all of this complexity to one iFrame that gives you always one API over PostMessage API and hides the technical implementation where browser is talking with the card.

iFrame can be loaded using https://id.eideasy.com/signatures/integration/{client_id}/{method}

You can find your “client_id” here: https://id.eideasy.com/admin/clientlist. “method” is the slug of the method you wish to use. For all available methods see: https://github.com/eideasy/eideasy-php/blob/master/src/EidEasyParams.php

For example, the iframe URL for Belgian id card signature would look something like this (when using the sandbox client_id) : https://test.eideasy.com/signatures/integration/2IaeiZXbcKzlP1KvjZH9ghty2IJKM8Lg/id-signature

Detect when the iframe has loaded and is ready to receive messages

window.addEventListener('message', async (e) => {
  if (e.origin !== target_origin) {
    return;
  }

  if (e.data.operation === "ready" && e.data.status === "OK") {
    // iframe is ready to receive messages
  }
}, false);

Read the public certificate from the eID card or USB crypto token

window.addEventListener('message', async (e) => {
  if (e.origin !== target_origin) {
    return;
  }

  if (e.data.operation === "getCertificate") {
    // Proceed to preparation of files and calculate digest to sign
    // {{url}}/api/signatures/start-signing
  }
}, false);

openedIframe.postMessage({
  operation: 'getCertificate'
}, 'https://id.eideasy.com')

Create signature on the eID card or USB crypto token

window.addEventListener('message', async (e) => {
  if (e.origin !== target_origin) {
    return;
  }

  if (e.data.operation === "getSignature") {
    // use e.data.signature_value
    // Continue to the finalizing the document, adding timestamp and OCSP responses
    // {{url}}/api/signatures/{{method}}/complete
  }
}, false);

openedIframe.postMessage({
  operation: 'getSignature',
  hexDigest: 'hexDigest received from start-signing API call'
}, 'https://id.eideasy.com')