Getting Started with the Secure Web Viewer
Overview
One Creation supports an embeddable secure webviewer. This feature is utilized by an authorized data consumer to view the protected data in a secure form. The webviewer contains a QR code which uniquely identifies the authorized data consumer. This is to help identify the original data consumer in the event of data leak.
Utilizing the Web Viewer
To utilize our Web Viewer, you can click the "Open" button the data within a policy you're subscribed to. If you have a One Creation encrypted .enoc file, you can upload it directly to the viewer as well.
Demo
To see a demo of how to embed the Web Viewer please check out this repository for an example.
Embedding the Web Viewer
You may wish to embed our viewer into your own secure browser. In order to accomplish this you will need a *.js script in your project that wiil instantiate the class with an authorization token.
This *.js script will automate the process of automating the auto-generation of the iframe tag with the src.
To implement this in your project, you will need to provide an authorization token, the policy Id, and the contributionId of the file you wish to load in the viewer. You will also need to input the entry point for the iframe for where you wish to include the iframe.
Once you have provided all the required fields, the javascript library will create the iframe dynamically in your project and the iframe is the point where the viewer will be rendered.
The package.json file is:
{
"name": "oc-viewer",
"version": "1.0.1",
"description": "One Creation Viewer module",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/One-Creation/oc-viewer.git"
},
"homepage": "https://github.com/One-Creation/oc-viewer/blob/main/README.md",
"author": "[email protected]",
"license": "ISC"
}
To begin you will first need to run the install command:
npm install oc-viewer
Then you will need to leave a place for the iframe on the template:
<div id="oc-viewer"></div>
And instantitate the plugin with the require params:
const ocViewer = require("oc-viewer");
const viewer = new ocViewer({
entryPoint: "#oc-viewer",
contributionId: "your-contribution-id",
policyId: "your-policy-id",
authToken: "your-oc-token",
});
You can then use the script below:
/**
*
* @param {Object} config Mandatory Information
* @param {string} config.entryPoint CSS Selector where the iframe will be injected
* @param {string} config.authToken Authentication Token required to use OC API
* @param {string} config.policyId The ID of the Policy associated with the file
* @param {string} config.contribution The ID of the Contribution associated with the file
*/
module.exports = function ocViewer(config) {
let defaultConfig = {
entryPoint: null,
authToken: null,
contributionId: null,
policyId: null,
}
const errorMessages = {
policyId: 'Policy id is mandatory.',
entryPoint: 'No entry point has been provided.',
authToken: 'No authentication token has been provided.',
contributionId: 'No contribution id has been provided.',
}
config = {...defaultConfig, ...config};
const url = 'https://mvp.one-creation.com/oc-viewer';
let iframe = null;
let src = null;
let elem = null;
let meetRequirements = false;
this.setAuthToken = (token) => {
updateConfig({authToken: token});
updateIframeSrc();
return this;
}
this.setConfig = (newConfig) => {
config = {...config, ...newConfig};
updateIframeSrc();
return this;
}
this.setContributionId = (contributionId) => {
updateConfig({contributionId});
updateIframeSrc();
return this;
}
this.setEntryPoint = (entryPoint) => {
updateConfig({entryPoint});
updateIframeSrc();
return this;
}
this.setPolicyId = (policyId) => {
updateConfig({policyId});
updateIframeSrc();
return this;
}
const appendElement = () => {
elem.appendChild(iframe);
}
const checkRequirements = () => {
let label = '';
meetRequirements = true;
Object.keys(config).forEach(key => {
if(!config[key]) {
meetRequirements = false;
label = label ? `${label} \n ${errorMessages[key]}` : errorMessages[key];
}
});
if(!meetRequirements) {
console.warn(`Unable to append the iframe, the following propierties are mandatory: \n ${label}`);
}
}
const foundIframe = () => {
return elem ? elem.querySelector('iframe') : false;
}
const init = () => {
checkRequirements();
setSrc();
setIframe();
setElement();
if(meetRequirements) {
appendElement();
}
return this;
}
const setIframe = () => {
iframe = document.createElement('iframe');
iframe.setAttribute("style","height:100%;width:100%;");
iframe.setAttribute('src', src);
iframe.onload = function() {
window.frames[0].postMessage({'authToken': config.authToken}, this.src);
}
}
const setElement = () => {
elem = document.querySelector(config.entryPoint);
if(!elem) {
console.warn('No element has been found with the provided entry point.');
}
}
const setSrc = () => {
src = `${url}/${config.policyId}/${config.contributionId}`;
}
const updateConfig = (newConfig) => {
config = {...config, ...newConfig};
checkRequirements();
}
const updateIframeSrc = () => {
setSrc();
iframe.setAttribute('src', src);
if(meetRequirements && !foundIframe()) {
setElement();
appendElement();
}
}
init();
}