Verify

Implementation of a verification page on your website

The library can be downloaded here: {{ link }}

Full working example can be downloaded here: {{ link }}

This template require http protocol to work properly or you may get a CORS Policy error. To test locally, a server (wamp, node server etc) is required to access the index.html through http(s):// and not file:///C:/...

First, you need to create an html page and include the library call:

<script src="assets/js/signchain-signer.min.js"></script>

To init the library you need to do the following at the start of your javascript code:

let network = "T" // W for mainnet, T for testnet
let Signchain = new window.signchain(network)

HTML EXAMPLE

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Verification</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/bs.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row">

        <div class="col-lg-12 mt-4">
          <div class="mb-4">
            School address:<br/><strong class="address">3MvujUZTtoANRzrKYKzx99Vtb9TUh6VPCDm</strong>
          </div>
          <div class="wrapper mt-4">
            <h2>Verify</h2>
            <div class="mb-4">
              <input type="file" id="selectFileVerify" />
              <div id="fileInfosVerify" class="mt-2"></div>
            </div>
            <button id="verify" class="btn btn-primary">VERIFY</button>
            <!-- Result go in #resultVerify -->
            <div id="resultVerify" class="mt-2"></div>
          </div>
        </div>

      </div>
  </div>
  <script src="assets/js/signchain-signer.min.js"></script>
  <script src="assets/js/widget.js"></script>
  </body>
</html>

JAVASCRIPT EXAMPLE

let network = "T" // W for mainnet, T for testnet
let explorerHost = network == "T" ? "https://testnet.wavesexplorer.com" : "https://wavesexplorer.com"
let verifyAddress = "3MvujUZTtoANRzrKYKzx99Vtb9TUh6VPCDm"
let Signchain = new window.signchain(network)
let storeDataVerify = null

// ADD THE LISTENER TO YOUR VERIFY INPUT FIELD
document.getElementById("selectFileVerify").addEventListener("change", async function (event) {

  if(event.target.files[0]){

    let file = event.target.files[0]
    await Signchain.hash(file, function (res) {
      storeDataVerify = res;
      document.getElementById("fileInfosVerify").innerHTML = "Sha256 file hash: " + storeDataVerify.hash
    });

  }else{

    document.getElementById("fileInfosVerify").innerHTML = ""
    storeDataVerify = null;
    
  }

});

// ADD VERIFICATION CLICK EVENT ON VERIFY BUTTON
document.getElementById("verify").addEventListener("click", async function (e) {

  let template
  document.getElementById("resultVerify").innerHTML = ""
  let checkData = await Signchain.verify(storeDataVerify.hash, verifyAddress)
  
  if(checkData.valid){
    let certificationDate = JSON.parse(checkData.data[0].value).timestamp

    template = `
    <div class="p-4">
      <strong class="valid">Certification valid</strong>
      and certified on ${new Date(certificationDate)} 
      <a href="${explorerHost+'/tx/'+checkData.data[0].txid}" target="_blank">See on the Blockchain</a>
    </div>
    `

  }else{
    template = `<strong class="invalid">Certification not found</strong>`
  }

  document.getElementById("resultVerify").innerHTML = template;

})

There is 4 important elements in the HTML example:

<input type="file" id="selectFileVerify" />
<div id="fileInfosVerify" class="mt-2"></div>
<button id="verify" class="btn btn-primary">VERIFY</button>
<div id="resultVerify" class="mt-2"></div>

If you change the identifiants (css ids) of these elements, you will have to also change it in the javascript example.

EDIT THE RESULT

To edit the result, simply change the html of the variable "template" in the javascript example:

template = `
    <div class="p-4">
      <strong class="valid">Certification valid</strong>
      and certified on ${new Date(certificationDate)} 
      <a href="${explorerHost+'/tx/'+checkData.data[0].txid}" target="_blank">See on the Blockchain</a>
    </div>
    `

PreviousCertify NextContact-us

Last updated 3 years ago

Was this helpful?