Skip to main content

Embedding Verifiable Document into an HTML file

Note: This guide is currently for OA documents that are verifiable on verify.gov.sg. Do ensure your OA document can be verified on verify.gov.sg before continuing with this guide.

Since an OpenAttestation document (.OA) is not a native file extension automatically recognised by devices, the OA-embedded HTML solution was introduced. This approach helps to encapsulate an OA document so that end-users can be directed directly to the verifier (with their document) just by clicking on a button presented by a locally-rendered HTML page.

This is an optional procedure after creating an issued/signed OA document that is dependent on your use case (e.g. you want to make it more convenient for end-users who may not understand what to do with an OA document).

How it works​

In this guide, we will create a HTML file with a "Proceed" button to redirect the user to verify.gov.sg. The OA document will be embedded in the Verify URL for verification and rendering.

The steps are as follows:

  1. Create the Verify URL by encoding and embedding the OA document data at the back of the Verify URL

  2. Create the HTML file to be issued (we will be using a sample template)

  3. Modify the button in the HTML file to contain the Verify URL. This button will redirect the user to the Verify page where the OA document will be verified and rendered accordingly.

    Resultant HTML

Prerequisites​

Ensure that you have followed the documentation on how to issue an Ethereum OA document or DID OA document, and have a valid OA document which you want to use. If you do not have an OA document, you may want to use our sample HealthCert document to follow through the guide.

Create your Verify URL​

To get started, we will need to have an issued/signed OA document.

If you have your own OA document, you can use it as well.

Encoding the payload​

  1. Copy the sample document contents. If you are using your own OA document, open the file in a text editor and copy the file data.

    Copy document data

  2. Minify/Compress the OA document

    • We will be minifying/compressing the JSON data in the OA document to prevent additional characters from being encoded later in step (3)

    • You can use online tools like Code Beautify to help you

      Minify document data

    • Copy and paste the data, into a text editor (we will need it later)

  3. Encode your data using a URL Encoder

    • We will be encoding the data from step (2) so that it can be appended to the back of the Verify URL later on
    • You can use online tools like urlencoder.org to help you Encode document data
    • Copy and paste the encoded data into a text editor (we will need it later)

Create the Verify URL with OA Document Data​

  • Open a text editor of your choice
  • Add the encoded data, which you have copied from earlier, after the hash # symbol in https://www.verify.gov.sg/verify?m=uri-fragment#.
https://www.verify.gov.sg/verify?m=uri-fragment#<paste_your_encoded_data_here>

Creating the HTML file​

Sample HTML file​

To standardise the HTML files being issued, HealthCerts Providers are encouraged to use the sample HTML file.

For simplicity, we will be using the contents from the sample HTML file. Then we will embed the Verify URL into the "Proceed" button so that users will be redirected to the Verify page upon clicking.

  1. Copy the sample HTML file template and paste it into a text editor of your choice

  2. Replace the the URL on this line with your Verify URL from earlier

    <p>
      <!-- Replace the URL in the "href" value with your Verify URL -->
      <a
        id="oa-doc-link"
        class="btn-proceed"
        alt="Proceed to view and verify document"
        title="Proceed to view and verify document"
        href="https://www.verify.gov.sg/verify?m=uri-fragment#<paste_your_encoded_data_here>"
      >
        Proceed
      </a>
    </p>

  3. Open the HTML file in your browser

  4. Click on the "Proceed" button

  5. You should be redirected to the Verify page where your OA document is being verified and rendered on the screen.

🎉 Congratulations, you have successfully created a HTML file with an OA document embedded Verify URL that redirects to the Verify page for verification!