diff --git a/Common/wwwroot/scripts/common/index.js b/Common/wwwroot/scripts/common/index.js index 94304fb1..8ec87c40 100644 --- a/Common/wwwroot/scripts/common/index.js +++ b/Common/wwwroot/scripts/common/index.js @@ -1347,14 +1347,75 @@ window.getUserAgent = function () { // Session based AI tokens for users async function fingerPrint() { try { - // Import FingerprintJS and load the agent - const FingerprintJS = await import('https://openfpcdn.io/fingerprintjs/v4'); - const fp = await FingerprintJS.load(); + var canvas = document.body.appendChild(document.createElement('canvas')); + canvas.width = 600; + canvas.height = 300; + canvas.style.display = "none"; + const ctx = canvas.getContext("2d"); + const size = 24; + const diamondSize = 28; + const gap = 4; + const startX = 30; + const startY = 30; + const blue = "#1A3276"; + const orange = "#F28C00"; + const colorMap = [ + ["blue", "blue", "diamond"], + ["blue", "orange", "blue"], + ["blue", "blue", "blue"] + ]; + function drawSquare(x, y, color) { + ctx.fillStyle = color; + ctx.fillRect(x, y, size, size); + } + function drawDiamond(centerX, centerY, size, color) { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(centerX, centerY - size / 2); + ctx.lineTo(centerX + size / 2, centerY); + ctx.lineTo(centerX, centerY + size / 2); + ctx.lineTo(centerX - size / 2, centerY); + ctx.closePath(); + ctx.fill(); + } + for (let row = 0; row < 3; row++) { + for (let col = 0; col < 3; col++) { + const type = colorMap[row][col]; + const x = startX + col * (size + gap); + const y = startY + row * (size + gap); + if (type === "blue") drawSquare(x, y, blue); + else if (type === "orange") drawSquare(x, y, orange); + else if (type === "diamond") drawDiamond(x + size / 2, y + size / 2, diamondSize, orange); + } + } + ctx.font = "20px Arial"; + ctx.fillStyle = blue; + ctx.textBaseline = "middle"; + ctx.fillText("Syncfusion", startX + 3 * (size + gap) + 20, startY + size + gap); + ctx.globalCompositeOperation = "multiply"; + ctx.fillStyle = "rgb(255,0,255)"; + ctx.beginPath(); ctx.arc(50, 200, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(0,255,255)"; + ctx.beginPath(); ctx.arc(100, 200, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(255,255,0)"; + ctx.beginPath(); ctx.arc(75, 250, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(255,0,255)"; + ctx.beginPath(); + ctx.arc(200, 200, 75, 0, Math.PI * 2, true); + ctx.arc(200, 200, 25, 0, Math.PI * 2, true); + ctx.fill("evenodd"); + const sha256 = async function (str) { + const encoder = new TextEncoder(); + const data = encoder.encode(str); + const hashBuffer = await crypto.subtle.digest('SHA-256', data); + const hashArray = Array.from(new Uint8Array(hashBuffer)); + return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); + }; - // Get the visitor identifier - const result = await fp.get(); - return result.visitorId; - } catch (error) { + const visitorID = sha256(canvas.toDataURL()); + return visitorID; + } + catch (error) { console.error(error); return null; }