templates/gate/gate-sdk.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!{% 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>
  17.     {# Axeptio TCF API #}
  18.     <script>
  19.         window.axeptioSettings = {
  20.             clientId: "66137db6ae83de5e566cfc53",
  21.             cookiesVersion: "first-id sandbox-fr-EU",
  22.         };
  24.         (function (d, s) {
  25.             var t = d.getElementsByTagName(s)[0],
  26.                 e = d.createElement(s);
  27.             e.async = false;
  28.             e.src = "//static.axept.io/tcf/sdk.js";
  29.             e.type = "module";
  30.             t.parentNode.insertBefore(e, t);
  31.         })(document, "script");
  32.     </script>
  33.     {# End Axeptio TCF API #}
  34. </head>
  35. <body>
  36. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  37.     <a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
  38.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  39.             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  40.         <span class="navbar-toggler-icon"></span>
  41.     </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>
  48.     </div>
  49.     <div class="row mt-4">
  50.         <div class="col-md-12">
  51.             <h4>DeviceId:</h4>
  52.             <input type="text" id="deviceIdInput" class="mb-2 form-control" disabled>
  53.             <button id="generateDeviceId" class="btn btn-secondary">Get device id</button>
  54.         </div>
  55.     </div>
  56.     <div class="row mt-4">
  57.         <div class="col-md-12">
  58.             {% if not hasFirstId %}
  59.                 <button id="redirectButton" class="btn btn-primary">Get First ID</button>
  60.             {% else %}
  61.                 <p>You already have a First ID.</p>
  62.             {% endif %}
  63.         </div>
  64.     </div>
  65.     {% block body %}{% endblock %}
  66. </div>
  68. <script>
  69.     const FIRSTID_VENDOR_ID = 1178;
  71.     function listenForTCFConsent(callback) {
  72.         console.debug('Listening for TCF consent...');
  73.         if (!window.__tcfapi) return;
  75.         window.__tcfapi('addEventListener', 2, (tcData, success) => {
  76.             if (success && tcData.gdprApplies) {
  77.                 if (tcData.vendor.consents[FIRSTID_VENDOR_ID] && tcData.eventStatus === 'useractioncomplete') {
  78.                     console.log('User consented to the flex feature.');
  79.                     callback();
  80.                 } else {
  81.                     console.log('User did not consent to the flex feature.');
  82.                 }
  83.             } else {
  84.                 console.log('__tcfapi failed to load or is not applicable.');
  85.             }
  86.         });
  87.     }
  89.     listenForTCFConsent(window.location.reload)
  91.     function getCookieValueFromCookieName(cookieName) {
  92.         let cookieArr = document.cookie.split(";");
  93.         for (let i = 0; i < cookieArr.length; i++) {
  94.             let cookiePair = cookieArr[i].split("=");
  95.             if (cookieName === cookiePair[0].trim()) {
  96.                 return decodeURIComponent(cookiePair[1]);
  97.             }
  98.         }
  99.         return null;
  100.     }
  102.     function checkFirstidCookie() {
  103.         let firstidCookieValue = getCookieValueFromCookieName("firstid");
  104.         if (firstidCookieValue) {
  105.             console.log(`First ID : ${firstidCookieValue}`)
  106.         } else {
  107.             console.log('No First ID cookie found.')
  108.         }
  109.     }
  111.     function loadFirstIdSdk() {
  112.         console.time("sdk:callback");
  113.         console.time("sdk:event");
  114.         var script = document.createElement('script');
  115.         script.src = "https://cdn.preprod.first-id.fr/sdk/loader/loader.min.js";
  116.         script.defer = true;
  117.         document.head.appendChild(script);
  119.         script.onload = function () {
  120.             window.firstId = window.firstId || {
  121.                 callbacks: [],
  122.                 debug: true,
  123.                 cookieName: 'firstid'
  124.             };
  126.             window.firstId.callbacks.push(() => {
  127.                 console.log('FirstID SDK loaded and initialized after user consent.');
  128.                 console.timeEnd("sdk:callback");
  129.             });
  131.             window.firstId.callbacks.push(() => {
  132.                 console.log(FIRSTID.get)
  133.             });
  134.         };
  135.     }
  137.     function checkConsentAndLoadSdk() {
  138.         let consent = getCookieValueFromCookieName('consent');
  139.         if (consent === 'yes') {
  140.             loadFirstIdSdk();
  141.         }
  142.     }
  144.     checkConsentAndLoadSdk();
  145.     checkFirstidCookie();
  146.     loadFirstIdSdk()
  148.     let fid = getCookieValueFromCookieName('firstid')
  149.     if (fid) {
  150.         $('#firstid').text(fid)
  151.     } else {
  152.         $('#firstid').text('No First ID cookie found.')
  153.     }
  155.     document.getElementById('redirectButton')?.addEventListener('click', function() {
  156.         window.location.href = "{{ path('app_gate_sdk_redirect') }}";
  157.     });
  159.     document.addEventListener('firstId:new', (event) => console.log('New first id:', event.detail));
  160.     document.addEventListener('firstId:initialized', (event) => {
  161.         console.log('First id initialized:', event.detail)
  162.         console.timeEnd("sdk:event");
  163.     });
  165.     document.getElementById('generateDeviceId').addEventListener('click', function() {
  166.         if(!window.FIRSTID) {
  167.             console.error('FirstID SDK not loaded yet.');
  168.             return;
  169.         }
  170.         if(!window.FIRSTID.getDeviceId) {
  171.             console.error('FirstID SDK does not have getDeviceId method.');
  172.             return;
  173.         }
  175.         FIRSTID.getDeviceId()
  176.             .then(id => {
  177.                 document.getElementById('deviceIdInput').value = id;
  178.             })
  179.             .catch(error => {
  180.                 console.error('Error:', error);
  181.             });
  182.     });
  183. </script>
  184. </body>
  185. </html>