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

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{% block title %}Welcome to FirstID Flex (PoC with no TCF){% endblock %}</title>
  6.     <link rel="icon"
  7.           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>">
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
  9.           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  10.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  11.             integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  12.             crossorigin="anonymous"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
  14.             integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
  15.             crossorigin="anonymous"></script>
  16.     {# Axeptio TCF API #}
  17.     <script>
  18.         window.axeptioSettings = {
  19.             clientId: "66137db6ae83de5e566cfc53",
  20.             cookiesVersion: "first-id sandbox-fr-EU",
  21.         };
  23.         (function (d, s) {
  24.             var t = d.getElementsByTagName(s)[0],
  25.                 e = d.createElement(s);
  26.             e.async = false;
  27.             e.src = "//static.axept.io/tcf/sdk.js";
  28.             e.type = "module";
  29.             t.parentNode.insertBefore(e, t);
  30.         })(document, "script");
  31.     </script>
  32.     {# End Axeptio TCF API #}
  33. </head>
  34. <body>
  35. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  36.     <a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
  37.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  38.             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  39.         <span class="navbar-toggler-icon"></span>
  40.     </button>
  41.     <button id="deleteFingerprints" class="btn btn-danger ml-auto">Delete Fingerprints</button>
  42. </nav>
  43. <div class="container">
  44.     <div class="row">
  45.         <div class="col-md-12">
  46.             <h3>First ID: <span id="firstid"></span></h3>
  47.             <div class="form-group mt-3">
  48.                 <label for="flexSelect">Mode:</label>
  49.                 <select class="form-control" id="flexSelect">
  50.                     <option selected value="loader-latest-flex.js">Flex - loader latest</option>
  51.                     <option value="loader-flex.js">Flex - loader</option>
  53.                     <option value="loader-latest-flex-no-tcf.js">Flex - NoTcf - loader latest</option>
  54.                     <option value="loader-flex-no-tcf.js">Flex - NoTcf - loader</option>
  56.                     <option value="loader.js">NON FLEX - loader</option>
  57.                     <option value="loader-latest.js">NON FLEX - loader latest</option>
  58.                     <option value="loader-no-tcf.js">NON FLEX - NoTcf - loader</option>
  59.                     <option value="loader-latest-no-tcf.js">NON FLEX - NoTcf - loader latest</option>
  61.                     <option value="loader-latest-premium-lite.js">Premium Lite - loader latest</option>
  62.                     <option value="loader-premium-lite.js">Premium Lite - loader</option>
  63.                     <option value="loader-latest-premium-lite-no-tcf.js">Premium Lite - NoTcf - loader latest</option>
  64.                     <option value="loader-premium-lite-no-tcf.js">Premium Lite - NoTcf - loader</option>
  66.                     <option value="loader-adaptive.js">Adaptive - loader</option>
  67.                     <option value="loader-adaptive-no-tcf.js">Adaptive - NoTcf</option>
  68.                 </select>
  69.             </div>
  70.         </div>
  71.     </div>
  72.     
  73.     <div class="mt-4 row">
  74.         <div class="col-md-6">
  75.             <h4>Client ID:</h4>
  76.             <input type="text" id="ClientIdInput" class="mb-2 form-control" placeholder="Enter Client ID (e.g., XXXX)">
  77.         </div>
  78.         <div class="col-md-6">
  79.             <h4>PwdId:</h4>
  80.             <input type="text" id="PwdidInput" class="mb-2 form-control" placeholder="Enter a PwdId">
  81.         </div>
  82.         <div class="col-md-6">
  83.             <h4>CxenseId:</h4>
  84.             <input type="text" id="CxenseIdInput" class="mb-2 form-control" placeholder="Enter CxenseId">
  85.         </div>
  86.         <div class="col-md-6">
  87.             <h4>Email hashé:</h4>
  88.             <input type="text" id="EmailInput" class="mb-2 form-control" placeholder="Enter Hashed Email">
  89.         </div>
  90.     </div>
  91.     <div class="mt-4 row">
  92.         <button id="loadSDK" class="btn btn-secondary m-4">(re)Load SDK with parameters</button>
  93.         <button id="loadCustomData" class="btn btn-secondary m-4">Only pass Pwdid and CxenseId (sdk must already be loaded)</button>
  94.         <button id="loadNewSDK" class="btn btn-secondary m-4">Load new SDK without unloading previous</button>
  95.     </div>    
  96.     {% block body %}{% endblock %}
  97. </div>
  99. <script>
  100.     function getCookieValueFromCookieName(cookieName) {
  101.         let cookieArr = document.cookie.split(";");
  102.         for (let i = 0; i < cookieArr.length; i++) {
  103.             let cookiePair = cookieArr[i].split("=");
  104.             if (cookieName === cookiePair[0].trim()) {
  105.                 return decodeURIComponent(cookiePair[1]);
  106.             }
  107.         }
  108.         return null;
  109.     }
  112.     document.getElementById('loadCustomData').addEventListener('click', async function() {
  113.         if(!window.FIRSTID) { 
  114.             console.error('FirstID SDK not loaded yet.');
  115.             alert('FirstID SDK not loaded yet.');
  116.             return
  117.         }
  119.         if(!window.FIRSTID.setCustomData) {
  120.             console.error('FirstID SDK does not support setCustomData method.');
  121.             alert('FirstID SDK does not support setCustomData method.');
  122.             return
  123.         }
  125.         console.log('Custom data setting...');
  127.         const pwdId = document.getElementById('PwdidInput').value;
  128.         const cxenseId = document.getElementById('CxenseIdInput').value;
  130.         if(pwdId || cxenseId) {
  131.             await window.FIRSTID.setCustomData({
  132.                 pwdId: pwdId,
  133.                 cxenseId: cxenseId
  134.             })
  135.             console.log('Custom data set.');
  136.         }
  138.         const emailHashed = document.getElementById('EmailInput').value;
  139.         if(emailHashed) {
  140.             await window.FIRSTID.setEmailHashed(emailHashed)
  141.             console.log('Email hashed set.');
  142.         }
  143.     });
  144.     
  146.     const sdkScriptId = 'firstId-sdk-script';
  147.     function loadSDK({ cleanPreviousVersion = true, loadCustomData = true }) {
  148.         console.time("sdk:callback");
  149.         console.time("sdk:event");
  151.         const sdkVersion = document.getElementById('flexSelect').value;
  153.         const existingScript = document.getElementById(sdkScriptId);
  154.         if (existingScript && cleanPreviousVersion) {
  155.             existingScript.remove();
  156.             console.log('Existing SDK script removed.');
  157.             window.FIRSTID = undefined;
  158.             window.FIRSTID_LOADING = undefined;
  159.             window.FIRSTID_BY_TYPE = undefined;
  160.         }
  162.         window.firstId = {
  163.             callbacks: [],
  164.             debug: true,
  165.             cookieName: 'firstid',
  166.             xhrTimeoutInMs: 30000
  167.         };
  169.         if(loadCustomData) {
  170.             const clientId = document.getElementById('ClientIdInput').value;
  171.             const pwdId = document.getElementById('PwdidInput').value;
  172.             const cxenseId = document.getElementById('CxenseIdInput').value;
  173.             const emailHashed = document.getElementById('EmailInput').value;
  175.             if(clientId) {
  176.                 window.firstId.clientId = clientId;
  177.                 console.log('Client ID set to:', clientId);
  178.             }
  180.             if(pwdId || cxenseId) {
  181.                 window.firstId.customData = {
  182.                     pwdId: pwdId,
  183.                     cxenseId: cxenseId
  184.                 }
  185.             }
  187.             if(emailHashed) {
  188.                 window.firstId.emailHashed = emailHashed;
  189.             }
  190.         }
  192.         window.firstId.callbacks.push(() => {
  193.             console.log('FirstID SDK (No TCF) loaded and initialized.');
  194.             console.timeEnd("sdk:callback");
  195.             // Additional FirstID SDK logic here
  196.         });
  198.         window.firstId.callbacks.push(() => {
  199.             console.log(FIRSTID.getId());
  200.         });
  202.         // FirstID SDK will be initialized automatically
  203.         var script = document.createElement('script');
  204.         script.id = sdkScriptId;
  205.         script.src = `https://cdn.preprod.first-id.fr/sdk/loader/${sdkVersion}?id=1234567890`;
  206.         script.defer = true;
  207.         document.head.appendChild(script);
  208.     }
  210.     document.getElementById('loadSDK').addEventListener('click', function() {
  211.         loadSDK({
  212.             loadCustomData: true
  213.         });
  214.     });
  216.     document.getElementById('loadNewSDK').addEventListener('click', function() {
  217.         loadSDK({
  218.             loadCustomData: true,
  219.             cleanPreviousVersion: false
  220.         });
  221.     });
  223.     let interval = undefined;
  225.     function updateFid() {
  226.         let fid = getCookieValueFromCookieName('firstid');
  227.         if (fid) {
  228.             $('#firstid').text(fid);
  229.         } else {
  230.             $('#firstid').text('No First ID cookie found.');
  231.         }
  232.     }
  234.     interval = setInterval(updateFid, 1000);
  235.     
  236.     document.addEventListener('firstId:new', (event) => console.log('New first id:', event.detail));
  237.     document.addEventListener('firstId:initialized', (event) => {
  238.         console.log('First id initialized:', event.detail)
  239.         console.timeEnd("sdk:event");
  240.     });
  242.     document.getElementById('deleteFingerprints').addEventListener('click', async function() {
  243.         const confirmDelete = confirm('Êtes-vous sûr de vouloir supprimer vos fingerprints dans la matrice ?');
  244.         if (!confirmDelete) {
  245.             return;
  246.         }
  248.         try {
  249.             const browserSignature = [
  250.                 navigator?.userAgent ?? '', 
  251.                 navigator?.language ?? '', 
  252.                 screen?.width ?? 0, 
  253.                 screen?.height ?? 0,
  254.                 navigator?.deviceMemory ?? 0, 
  255.                 navigator?.hardwareConcurrency ?? 0
  256.             ].join("::");
  258.             const queryParams = new URLSearchParams({
  259.                 bs: browserSignature,
  260.             });
  262.             const clientIdInput = document.getElementById('ClientIdInput').value;
  263.             if (clientIdInput) {
  264.                 queryParams.append('clientId', clientIdInput);
  265.             }
  267.             const deleteUrl = `https://api-dual.preprod.first-id.fr/firstId?${queryParams.toString()}`;
  268.             
  269.             console.log('Deleting fingerprints with URL:', deleteUrl);
  271.             const response = await fetch(deleteUrl, {
  272.                 method: 'DELETE',
  273.                 credentials: 'include'
  274.             });
  276.             if (response.ok) {
  277.                 console.log('Fingerprints deleted successfully');
  278.                 alert('Fingerprints supprimés avec succès !');
  279.             } else {
  280.                 console.error('Error deleting fingerprints:', response.status, response.statusText);
  281.                 alert(`Erreur lors de la suppression : ${response.status} ${response.statusText}`);
  282.             }
  283.         } catch (error) {
  284.             console.error('Error deleting fingerprints:', error);
  285.             alert('Erreur lors de la suppression des fingerprints');
  286.         }
  287.     });
  288. </script>
  289. </body>
  290. </html>