<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FirstID SDK Email Test</title>
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>
<script src="https://cdn.preprod.first-id.fr/sdk/loader/loader-latest-flex-no-tcf.js" defer></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<h1>FirstID SDK Email Test</h1>
<p>Current FirstID: <span id="firstid" class="font-weight-bold">Not set</span></p>
<p>Current Email: <span id="email" class="font-weight-bold">Not set</span></p>
<div class="form-group">
<input type="email" id="emailInput" class="form-control" placeholder="Enter your email">
</div>
<button onclick="setEmail()" class="btn btn-primary">Set Email</button>
</div>
</div>
</div>
<script>
function getCookieValueFromCookieName(cookieName) {
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if (cookieName === cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
function updateFid() {
let fid = getCookieValueFromCookieName('firstid');
document.getElementById('firstid').textContent = fid || 'Not set';
}
async function setEmail() {
const email = document.getElementById('emailInput').value;
const hashEmailInSHA256 = val =>
crypto.subtle
.digest('SHA-256', new TextEncoder('utf-8').encode(val))
.then(h => {
let hexes = [],
view = new DataView(h);
for (let i = 0; i < view.byteLength; i += 4)
hexes.push(('00000000' + view.getUint32(i).toString(16)).slice(-8));
return hexes.join('');
});
if (email && window.FIRSTID) {
window.FIRSTID.setEmailHashed(await hashEmailInSHA256(email));
document.getElementById('email').textContent = email;
console.log('Email set:', email);
} else {
console.error('Email not set. Make sure the SDK is loaded and the email is valid.');
}
}
setInterval(updateFid, 1000);
</script>
</body>
</html>