Integrating the CDDC JavaScript for Modern UI
- 21 Oct 2024
- 1 Minute to read
- DarkLight
Integrating the CDDC JavaScript for Modern UI
- Updated on 21 Oct 2024
- 1 Minute to read
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
The CDDC JavaScript file is available in the CDDC JavaScript for modern UI package on the Risk Analytics resource download page. The script is available as an ESM module (cddc.esm.js), as well as an UMD module (cddc.umd.js).
If the solution in which you want to integrate CDDC JavaScript uses the Webpack or RollUp module bundler, use the ESM module.
Example of using cddc.esm.js with the React and Webpack / RollUp module bundler:
//Retrieve raw fingerprint and store it into React state variable
import React,{ Component } from 'react';
//including reference to CDDC JavaScript
import { getJSON } from '../lib/cddc.esm';
class Test extends Component {
constructor(props){
super(props);
this.state = {
fingerprint: ''
};
}
componentDidMount() {
//Retrieve browser fingerprint, without viewport information
const fingerprint = getJSON(false);
this.setState({
fingerprint: fingerprint
});
}
}
export default Test
If the solution uses older module loaders like AMD, RequireJS, or CommonJS, or does not use any module loader or bundler, use the UMD module.
Example of using the cddc.umd.js script with the RequireJS module loader:
<!-- index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script data-main='index.js' src='node_modules/requirejs/require.js'></script>
</body>
</html>//index.js
requirejs(['./lib/cddc.umd.js'],function(cddc){
var fingerprint = cddc.getJSON();
var fingerprintHash= cddc.getHASH();
console.log('fingerprint is ' + fingerprint);
console.log('hashed fingerprint is ' + fingerprintHash);
});
You can also integrate the UMD module in a simple web page:
<!-- index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script src='./lib/cddc.umd.js'></script>
<script type='text/javascript'>
var fingerprint = window.cddc.getJSON();
var fingerprintHash = window.cddc.getHASH();
console.log('fingerprint is ' + fingerprint);
console.log('fingerprint hash is ' + fingerprintHash);
</script>
</body>
</html>Was this article helpful?