| Summary || Products || Cryptography || Fusion || KeeeX.Js || Verifier || KeeeX Chain || Digital Identity Management |
As part of its offering for developing an ecosystem centered around trusted files, KeeeX provides a web component that allows users to verify the integrity and authenticity of files that have been keeexed.
This component is designed to be easily integrated into any web application, providing a seamless experience for users to validate their files.
The main purpose is for user-initiated "checks", usually for files received from external sources.
The web component can also be embedded in an existing application to provide one-click client-side verification of a downloaded file to end-users.
This component is exactly the same as used on KeeeX's own website, available at KeeeX Verifier
The simplest use case is to expose the verifier on one's website, on a dedicated verification page, and include a link to this page in all authentic files that are distributed.
This way, users can easily verify the integrity and authenticity of the files they receive by dragging and dropping them onto this dedicated page.
Another potential use case is to integrate the verifier directly into an application that deals with file downloads.
This would allow users to verify the files they download directly within the application, without having to leave the application or navigate to a separate verification page.
This kind of setup may be better suited for using the KeeeX.Js library in the long term, but the availability of a readily available web component can be used for quick integration of such a feature.
As noted, this is a ready-to-use component and it has limited customization options.
For a full-fledged integration of the file verification process, the KeeeX.Js library should be used instead.
The component is provided as an archive containing all the files needed to embed it in a web page.
This archive also contains an example page, which serves as documentation.
It is provided to our customers through our file-sharing service.
The component, like our other libraries for web browsers, targets the last two versions of each major web browser at the time.
The same limitations that apply to the KeeeX.Js library also apply here.
The verifier is built with JavaScript and CSS stylesheet files, designed to not interfere with the parent page.
Once the archive is extracted, the files must be loaded into the HTML page.
Here is a minimal example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KeeeX File Verifier sample</title>
<link rel="stylesheet" href="css/keeexverifier.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js" integrity="sha512-M1OTu9xD1JPdXo2cOeJI+Z/f8P6E/pqK9ug3G8PRNLw1caUePewEmpFYKSYh4LEz483qnyB/UTlgX1Q4VCEsKg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js" integrity="sha512-v8+bPcpk4Sj7CKB11+gK/FnsbgQ15jTwZamnBf/xDmiQDcgOIYufBo6Acu1y30vrk8gg5su4x0CG3zfPaq5Fcg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/14.3.5/index.js" integrity="sha512-AjrmPZ9qNJZkt2H76ulah56qOnjV/ZoZ15M8Ceg6X195Vc1XWWSwXSe8uSRfmvNvPy5XF++b/6FekEMpJePF9g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg==" crossorigin="anonymous"></script>
<script src="js/verifier.js"></script>
<script>
const previewFile = (file) => {
// This receive the file instance that was dropped in the verifier
console.log(file);
}
const eventHandler = (eventType, data) => {
if (eventType === "readFile") {
previewFile(data);
}
}
window.addEventListener("load", () => {
window.verifier = keeexVerifier.loadKeeexVerifier({
locale: "fr",
domParent: document.getElementById("keeexVerifier"),
onVerifyEvent: eventHandler,
});
});
</script>
</head>
<body>
<div id="keeexVerifier"></div>
</body>
</html>
There is a set of options available to further customize the behavior of the verifier, such as limiting "valid" files to those containing reference addresses.
These options are intended for advanced uses.
The verifier component also provides feedback to the page, enabling actions such as displaying a visualization of the file or performing statistics on verifications.
As an alternative to serving the files on your own server, KeeeX provides an iframe version that can be embedded.
It provides some level of interaction with the parent page, such as events to notify the parent page that a file was dropped and its status.
Using the iframe is more limited than embedding the web component directly, but it is also easier for an initial integration phase.