Symfony Profiler

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome to FirstID Flex (PoC with no TCF){% endblock %}</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>
{# Axeptio TCF API #}
<script>
window.axeptioSettings = {
clientId: "6605abb04cb7eac815d52c91",
cookiesVersion: "first-id-fr-EU",
};
(function (d, s) {
var t = d.getElementsByTagName(s)[0],
e = d.createElement(s);
e.async = false;
e.src = "//static.axept.io/tcf/sdk.js";
e.type = "module";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
{# End Axeptio TCF API #}
</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>
<button id="deleteFingerprints" class="btn btn-danger ml-auto">Delete Fingerprints</button>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>First ID: <span id="firstid"></span></h3>
<div class="form-group mt-3">
<label for="flexSelect">Mode:</label>
<select class="form-control" id="flexSelect">
<option selected value="loader-latest-flex.js">Flex - loader latest</option>
<option value="loader-flex.js">Flex - loader</option>
<option value="loader-latest-flex-no-tcf.js">Flex - NoTcf - loader latest</option>
<option value="loader-flex-no-tcf.js">Flex - NoTcf - loader</option>
<option value="loader.js">NON FLEX - loader</option>
<option value="loader-latest.js">NON FLEX - loader latest</option>
<option value="loader-no-tcf.js">NON FLEX - NoTcf - loader</option>
<option value="loader-latest-no-tcf.js">NON FLEX - NoTcf - loader latest</option>
<option value="loader-latest-premium-lite.js">Premium Lite - loader latest</option>
<option value="loader-premium-lite.js">Premium Lite - loader</option>
<option value="loader-latest-premium-lite-no-tcf.js">Premium Lite - NoTcf - loader latest</option>
<option value="loader-premium-lite-no-tcf.js">Premium Lite - NoTcf - loader</option>
<option value="loader-adaptive.js">Adaptive - loader</option>
<option value="loader-adaptive-no-tcf.js">Adaptive - NoTcf</option>
</select>
</div>
</div>
</div>
<div class="mt-4 row">
<div class="col-md-6">
<h4>Client ID:</h4>
<input type="text" id="ClientIdInput" class="mb-2 form-control" placeholder="Enter Client ID (e.g., XXXX)">
</div>
<div class="col-md-6">
<h4>PwdId:</h4>
<input type="text" id="PwdidInput" class="mb-2 form-control" placeholder="Enter a PwdId">
</div>
<div class="col-md-6">
<h4>CxenseId:</h4>
<input type="text" id="CxenseIdInput" class="mb-2 form-control" placeholder="Enter CxenseId">
</div>
<div class="col-md-6">
<h4>Email hashé:</h4>
<input type="text" id="EmailInput" class="mb-2 form-control" placeholder="Enter Hashed Email">
</div>
</div>
<div class="mt-4 row">
<button id="loadSDK" class="btn btn-secondary m-4">(re)Load SDK with parameters</button>
<button id="loadCustomData" class="btn btn-secondary m-4">Only pass Pwdid and CxenseId (sdk must already be loaded)</button>
<button id="loadNewSDK" class="btn btn-secondary m-4">Load new SDK without unloading previous</button>
</div>
{% block body %}{% endblock %}
</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;
}
document.getElementById('loadCustomData').addEventListener('click', async function() {
if(!window.FIRSTID) {
console.error('FirstID SDK not loaded yet.');
alert('FirstID SDK not loaded yet.');
return
}
if(!window.FIRSTID.setCustomData) {
console.error('FirstID SDK does not support setCustomData method.');
alert('FirstID SDK does not support setCustomData method.');
return
}
console.log('Custom data setting...');
const pwdId = document.getElementById('PwdidInput').value;
const cxenseId = document.getElementById('CxenseIdInput').value;
if(pwdId || cxenseId) {
await window.FIRSTID.setCustomData({
pwdId: pwdId,
cxenseId: cxenseId
})
console.log('Custom data set.');
}
const emailHashed = document.getElementById('EmailInput').value;
if(emailHashed) {
await window.FIRSTID.setEmailHashed(emailHashed)
console.log('Email hashed set.');
}
});
const sdkScriptId = 'firstId-sdk-script';
function loadSDK({ cleanPreviousVersion = true, loadCustomData = true }) {
console.time("sdk:callback");
console.time("sdk:event");
const sdkVersion = document.getElementById('flexSelect').value;
const existingScript = document.getElementById(sdkScriptId);
if (existingScript && cleanPreviousVersion) {
existingScript.remove();
console.log('Existing SDK script removed.');
window.FIRSTID = undefined;
window.FIRSTID_LOADING = undefined;
window.FIRSTID_BY_TYPE = undefined;
}
window.firstId = {
callbacks: [],
debug: true,
cookieName: 'firstid',
xhrTimeoutInMs: 30000
};
if(loadCustomData) {
const clientId = document.getElementById('ClientIdInput').value;
const pwdId = document.getElementById('PwdidInput').value;
const cxenseId = document.getElementById('CxenseIdInput').value;
const emailHashed = document.getElementById('EmailInput').value;
if(clientId) {
window.firstId.clientId = clientId;
console.log('Client ID set to:', clientId);
}
if(pwdId || cxenseId) {
window.firstId.customData = {
pwdId: pwdId,
cxenseId: cxenseId
}
}
if(emailHashed) {
window.firstId.emailHashed = emailHashed;
}
}
window.firstId.callbacks.push(() => {
console.log('FirstID SDK (No TCF) loaded and initialized.');
console.timeEnd("sdk:callback");
// Additional FirstID SDK logic here
});
window.firstId.callbacks.push(() => {
console.log(FIRSTID.getId());
});
// FirstID SDK will be initialized automatically
var script = document.createElement('script');
script.id = sdkScriptId;
script.src = `https://cdn.preprod.first-id.fr/sdk/loader/${sdkVersion}?id=1234567890`;
script.defer = true;
document.head.appendChild(script);
}
document.getElementById('loadSDK').addEventListener('click', function() {
loadSDK({
loadCustomData: true
});
});
document.getElementById('loadNewSDK').addEventListener('click', function() {
loadSDK({
loadCustomData: true,
cleanPreviousVersion: false
});
});
let interval = undefined;
function updateFid() {
let fid = getCookieValueFromCookieName('firstid');
if (fid) {
$('#firstid').text(fid);
} else {
$('#firstid').text('No First ID cookie found.');
}
}
interval = setInterval(updateFid, 1000);
document.addEventListener('firstId:available', (event) => console.log('First id available:', event.detail.firstId));
document.addEventListener('firstId:new', (event) => console.log('New first id:', event.detail));
document.addEventListener('firstId:initialized', (event) => {
console.log('First id initialized:', event.detail)
console.timeEnd("sdk:event");
});
document.getElementById('deleteFingerprints').addEventListener('click', async function() {
const confirmDelete = confirm('Êtes-vous sûr de vouloir supprimer vos fingerprints dans la matrice ?');
if (!confirmDelete) {
return;
}
try {
const browserSignature = [
navigator?.userAgent ?? '',
navigator?.language ?? '',
screen?.width ?? 0,
screen?.height ?? 0,
navigator?.deviceMemory ?? 0,
navigator?.hardwareConcurrency ?? 0
].join("::");
const queryParams = new URLSearchParams({
bs: browserSignature,
});
const clientIdInput = document.getElementById('ClientIdInput').value;
if (clientIdInput) {
queryParams.append('clientId', clientIdInput);
}
const deleteUrl = `https://api-v4.preprod.first-id.fr/fg?${queryParams.toString()}`;
const deleteUrlipv6 = `https://api-v6.preprod.first-id.fr/fg?${queryParams.toString()}`;
console.log('Deleting fingerprints with URL:', deleteUrl);
console.log('Deleting fingerprints with URL:', deleteUrlipv6);
const [response, responseipv6] = await Promise.allSettled([
fetch(deleteUrl, {
method: 'DELETE',
credentials: 'include'
}),
fetch(deleteUrlipv6, {
method: 'DELETE',
credentials: 'include'
})
]);
const responseOk = response.status === 'fulfilled' && response.value.ok;
const responseIpv6Ok = responseipv6.status === 'fulfilled' && responseipv6.value.ok;
if (responseOk || responseIpv6Ok) {
console.log('Fingerprints deleted successfully');
alert('Fingerprints supprimés avec succès !');
} else {
const responseStatus = response.status === 'fulfilled'
? `${response.value.status} ${response.value.statusText}`
: `Erreur: ${response.reason}`;
const responseIpv6Status = responseipv6.status === 'fulfilled'
? `${responseipv6.value.status} ${responseipv6.value.statusText}`
: `Erreur: ${responseipv6.reason}`;
console.error('Error deleting fingerprints:', responseStatus, responseIpv6Status);
alert(`Erreur lors de la suppression :
${responseStatus}
${responseIpv6Status}`);
}
} catch (error) {
console.error('Error deleting fingerprints:', error);
alert('Erreur lors de la suppression des fingerprints');
}
});
</script>
</body>
</html>

templates/flex/flex-custom.html.twig line 1