docs.sign-web.app
Search…
3rd Party Integration
You can easily integrate the File Certification feature into any web application or web site with our Javascript library.
The Javascript Library includes the following libraries:
This library aims to simplify the integration in any Web application or Web site, more libraries will be released in the future based on user needs.
HOW TO IMPLEMENT IT
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:/...
You needs a http server to be able to use it, to test locally, a local server is needed to access the example through http(s):// and not file:///C:/...
You needs a http server to be able to use it, to test locally, a local server is needed to access the example through http(s):// and not file:///C:/...
EXAMPLE OF THE HTML PART
Create your own simple html to allow users to connect with their Waves Account, select the file they want to certify and then certify the hash of this file using Waves Signer.
1
<!DOCTYPE html>
2
<head>
3
<meta charset="utf-8">
4
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5
<title>Sign signer</title>
6
<meta name="description" content="">
7
<meta name="viewport" content="width=device-width, initial-scale=1">
8
<link rel="stylesheet" href="assets/css/bs.css">
9
<link rel="stylesheet" href="assets/css/style.css">
10
</head>
11
<body>
12
<div class="container">
13
<div class="row">
14
<div id="userCredit" class="col-lg-12 mt-2"></div>
15
<div id="userBalance" class="col-lg-12"></div>
16
<div id="certificationCost" class="col-lg-12 mt-2"></div>
17
<div class="col-lg-12 mt-4">
18
<div class="mb-4">
19
<button id="login" class="btn btn-primary">SIGN IN</button>
20
<div id="userInfos" class="mt-2"></div>
21
</div>
22
<div class="mb-4">
23
<input type="file" id="selectFile" />
24
<div id="fileInfos" class="mt-2"></div>
25
</div>
26
<div class="mb-4">
27
<button id="certify" class="btn btn-primary">CERTIFY</button>
28
<div id="result" class="mt-2"></div>
29
</div>
30
</div>
31
</div>
32
</div>
33
<script src="assets/js/testnet-signchain-signer.min.js"></script>
34
<script src="assets/js/site.js"></script>
35
</body>
36
</html>
Copied!
This library includes three methods that allows you to retrieve a connected user's SIGN balance, his SIGN Certification credit if any as well as the current Certification Cost in SIGN Utility Tokens, this information is displayed in our template as #userCredit, #userBalance and #certificationCost
Then we have the #login button to allow users to log in with Waves Signer, followed by the #userInfos block that will receive Waves Signer data once connected (address and publicKey)
The #selectFile input field will allow file selection on the user's computer, once the file is selected, the hash will be calculated locally client side (files never go online during the hashing process) and then the #fileInfos block will receive the file details (file name and file hash in our example)
Finally, the #certify button once clicked will call the invoke() method of Waves Signer with the appropriate data and ask the user to confirm the transaction. Once confirmed, the block #result will receive the transaction ID.
At the bottom you need to include the two javascript files, the library first (here the testnet version) then your custom javascript.
EXAMPLE OF THE JAVASCRIPT PART
All you need to do is to create your different listener and call the appropriate methods of the library; here each listener associated to our example before we go into detail:
1
var storeData;
2
var userData;
3
​
4
document.getElementById("login").addEventListener("click", async function (e) {
5
e.preventDefault()
6
let login = await window.signchain.login();
7
userData = login;
8
document.getElementById("userInfos").innerHTML = "Address: " + userData.address + "<br>Public Key: " + userData.publicKey
9
getCredit();
10
getBalance();
11
});
12
​
13
document.getElementById("logout").addEventListener("click", async function (e) {
14
e.preventDefault()
15
await window.signchain.logout();
16
storeData = null;
17
userData = null;
18
document.getElementById("userInfos").innerHTML = ""
19
document.getElementById("userBalance").innerHTML = ""
20
document.getElementById("userCredit").innerHTML = "";
21
});
22
​
23
document.getElementById("selectFile").addEventListener("change", async function (event) {
24
await window.signchain.hash(event.target.files[0], function (res) {
25
storeData = res;
26
document.getElementById("fileInfos").innerHTML = "Title: " + storeData.title + "<br>Hash sha256: " + storeData.hash
27
});
28
});
29
​
30
document.getElementById("certify").addEventListener("click", async function (e) {
31
e.preventDefault();
32
document.getElementById("result").innerHTML = "Transaction processing... ";
33
let credit = await window.signchain.checkUserCredit(userData.address);
34
​
35
let useCredit = false
36
if(credit > 0){
37
useCredit = true
38
}
39
​
40
let certify = await window.signchain.certify(storeData, userData.publicKey, useCredit);
41
if(certify.id){
42
document.getElementById("result").innerHTML = "Transaction ID: <a href=\"https://wavesexplorer.com/testnet/tx/" + certify.id + "\" target=\"_blank\">"+certify.id+"</a>";
43
}else{
44
document.getElementById("result").innerHTML = "Something went wront: " + certify;
45
}
46
getCredit(userData.address);
47
});
48
​
49
document.addEventListener("hashingProgress", function (e) {
50
document.getElementById("fileInfos").innerHTML = e.detail + "%";
51
});
52
​
53
let getPrice = async function(){
54
let cost = await window.signchain.getCertificationFee();
55
document.getElementById("certificationCost").innerHTML = "Cost per certification: " + cost + " SIGN"
56
}
57
getPrice()
58
​
59
let getBalance = async function(){
60
let balance = await window.signchain.getUserBalance(userData.address);
61
let balanceDecimal = balance / Math.pow(10, 8);
62
document.getElementById("userBalance").innerHTML = "This account have: " + balanceDecimal + " SIGN Token(s)"
63
}
64
​
65
let getCredit = async function(){
66
let credit = await window.signchain.checkUserCredit(userData.address);
67
document.getElementById("userCredit").innerHTML = "This account have: " + credit + " Credit(s)"
68
}
Copied!
LOGIN
window.signchain.login()1
document.getElementById("login").addEventListener("click", async function (e) {
2
e.preventDefault()
3
let login = await window.signchain.login();
4
userData = login;
5
document.getElementById("userInfos").innerHTML = "Address: " + userData.address + "<br>Public Key: " + userData.publicKey
6
getCredit();
7
getBalance();
8
});
Copied!
This calls Waves Signer login() method, once logged in, the data (address and publicKey are stored in a userData variable, this information is displayed in the page and we call it the getCredit() and getBalance() methods we will define later
LOGOUT
window.signchain.logout()1
document.getElementById("logout").addEventListener("click", async function (e) {
2
e.preventDefault()
3
await window.signchain.logout();
4
storeData = null;
5
userData = null;
6
document.getElementById("userInfos").innerHTML = ""
7
document.getElementById("userBalance").innerHTML = ""
8
document.getElementById("userCredit").innerHTML = "";
9
});
Copied!
HASH FILE
window.signchain.hash()1
document.getElementById("selectFile").addEventListener("change", async function (event) {
2
await window.signchain.hash(event.target.files[0], function (res) {
3
storeData = res;
4
document.getElementById("fileInfos").innerHTML = "Title: " + storeData.title + "<br>Hash sha256: " + storeData.hash
5
});
6
});
Copied!
This listener listens to any changes on our input file field and calls the hash method from the signchain library, the response object will include the title, the hash and the file in byteArray if the file is under 10Mb or null for bigger file (at the moment we limitate IPFS upload at 10Mb), this data is stored in a storeData object and the title and hash are displayed on the page
CERTIFY THE FILE
window.signchain.certify(data: object, pubKey: string, credit: boolean)1
document.getElementById("certify").addEventListener("click", async function (e) {
2
e.preventDefault();
3
document.getElementById("result").innerHTML = "Transaction processing... ";
4
let credit = await window.signchain.checkUserCredit(userData.address);
5
​
6
let useCredit = false
7
if(credit > 0){
8
useCredit = true
9
}
10
​
11
let certify = await window.signchain.certify(storeData, userData.publicKey, useCredit);
12
if(certify.id){
13
document.getElementById("result").innerHTML = "Transaction ID: <a href=\"https://wavesexplorer.com/testnet/tx/" + certify.id + "\" target=\"_blank\">"+certify.id+"</a>";
14
}else{
15
document.getElementById("result").innerHTML = "Something went wront: " + certify;
16
}
17
getCredit(userData.address);
18
});
Copied!
After clicking on the #certify button, the certify() method is called with the storeData object (which includes the result from the hashing function), the public key of the connected account and a boolean to use credits or tokens as parameters.
In this example we'll first check if the Certification Credit balance of the user is superior to 0, if so, we use credit, if not, we use SIGN's Utility token as payment.
storeData structure
{
buffer: ArrayBuffer(98093) {},
hash: "788ce1b308d265efad63373183ce563e6b90b2364a978cbfdb948314a72ac8f8",
index: "a6049a50-a259-11ea-b11c-6d336bf17b27",
title: "Send_Curl_Commands_Online.png"
}userData structure
{
address: "3MsG6jPNCrVJUtYB7XJBxS7utWsXAf4n9Vp",
publicKey: "CqbpJxfYeagkaT7sXQpxsfJXS1ZPxjM1Giw94n3y4Tp5"
}
HASHING PROGRESS LISTENER
hashingProgress: event
During the file hashing process, which can take some time if the size of the file is big, the library emits an event called hashingProgress and you can use it as followed to display progress1
document.addEventListener("hashingProgress", function (e) {
2
document.getElementById("fileInfos").innerHTML = e.detail+"%";
3
});
Copied!
GET THE CERTIFICATION PRICE
window.signchain.getCertificationFee()1
let getPrice = async function(){
2
let cost = await window.signchain.getCertificationFee();
3
document.getElementById("certificationCost").innerHTML = "Cost per certification: " + cost + " SIGN"
4
}
Copied!
GET THE USER SIGN TOKEN BALANCE
window.signchain.getUserBalance(address: string)1
let getBalance = async function(){
2
let balance = await window.signchain.getUserBalance(userData.address);
3
let balanceDecimal = balance / Math.pow(10, 8);
4
document.getElementById("userBalance").innerHTML = "This account have: " + balanceDecimal + " SIGN Token(s)"
5
}
Copied!
GET THE USER CERTIFICATION CREDIT BALANCE
window.signchain.checkUserCredit(address: string)1
let getCredit = async function(){
2
let credit = await window.signchain.checkUserCredit(userData.address);
3
document.getElementById("userCredit").innerHTML = "This account have: " + credit + " Credit(s)"
4
}
Copied!
Last modified 1yr ago
Copy link
Contents
HOW TO IMPLEMENT IT