Page Comparison

Les modèles de consentement peuvent être intégrés comme iframe à tout site HTML, de manière à réaliser un intégration sans couture.

Note
les snippets sont volontairement gardés au plus simple (pas de contrôle d’erreur, de gestion des sessions etc … ).

Contenu de cette documentation :

Table of Contents

maxLevel	3

Cinématique

Une fois l’intégration réalisée, la cinématique se déroule ainsi :

...

Exemple en PHP :

Code Block

breakoutMode	wide
language	php

function getToken()
{
    $auth_url = "https://auth.fairandsmart.com/auth";
    $auth_client_id = "fsorg";
    $auth_username = "mysecretidentity@example.com";
    $auth_password = "MySecretPassword";
    $token = "";

    $curl = curl_init();

    curl_setopt_array($curl, array(
        CURLOPT_URL, => $auth_url . "/realms/FairAndSmart" . $auth_realm . "/protocol/openid-connect/token",);
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "POST",
        CURLOPT_POSTFIELDS => "curl_setopt($curl, CURLOPT_POSTFIELDS, "grant_type=password&client_id=" . $auth_client_id . "&username=" . urlencode($auth_username) . "&password=" . urlencode($auth_password,));
        CURLOPT_HTTPHEADER => array(
            "Content-Type: application/x-www-form-urlencoded",
            "cache-control: no-cache",
        ),
    ))curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
     $response = curl_exec($curl);
    $err = curl_error($curl);

    curl_close($curl);

    if ($err) {
        echo "cURL Error #:" . $err;
    } else {
        $token = return json_decode($response)->access_token;

   }

    return $token;
}

À l’issue de ce snippet, la variable token contiendra le token d’authentification..

...

Il est nécessaire d’indiquer un identifiant qui permettra de relayer le formulaire à son utilisateur (userid uuid ci-dessous).

Code Block

breakoutMode	wide
language	php

function getFormUrl($uuid, $token)
{
    $api_url = "https://core.fairandsmart.com/api";
    $organisation_id = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
    $model_id_or_alias = "YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY";
    $context
= [   $host = $_SERVER['HTTP_HOST'];
       "userid" =>$port = "test fns",;
    $proto = isset($_SERVER['HTTPS']) ?     "callbackhttps" => "https://www.fairandsmart.com",             // "country" => "FR","http";

             "language" => "fr",$context = [
            // "optoutEmail"userid" => "foo@bar.com",
   $uuid,
        // "receiptcountry" => true,
            "iframe" => true,
 "FR",
          "iframeEventsTargetOriginlanguage" => "http://localhost:8080fr",
    ];

    $curl = curl_init();

    curl_setopt_array($curl, array(
        CURLOPT_URL, => $api_url . "/organisations/" . $organisation_id . "/consents/" . $model_id_or_alias . "/endpoint",);
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "POST",
        CURLOPT_POSTFIELDS => curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($context),);
        curl_setopt($curl, CURLOPT_HTTPHEADER, => array(
            "Authorization: Bearer $token",
            "Content-Type: application/json",
        ),
    ));


   $response = curl_execsetopt($curl, CURLOPT_RETURNTRANSFER, true);
    $err$response = curl_errorexec($curl);
     curl_close($curl);

    if ($err) {
        echo "cURL Error #:" . $err;
    } else {
        $url = json_decode($response)->endpoint;

   }

    return $url;
}

À la fin de ce snippet, la variable $urlcontient l’url du formulaire de consentement.

...

callback : URL vers laquelle l’utilisateur sera redirigé à l’issue de la saisie ;
optoutEmail : adresse email à laquelle une reçu un lien de modification du consentement sera transmis ;
optoutEmailLink : lien de modification présent dans l’email envoyé ;
receipt : booléen indiquant si un reçu de consentement doit être présenté à l’issue de la saisie ;
iframe : autorise l’injection de la librairie iframe-resizer dans le formulaire .;
iframeEventsTargetOrigin : active la transmission d'évènements entre l’iframe et la frame parente et indique quelle doit être l'origine de cette dernière (voir Déclencher un rechargement de la frame parente) .;

Se reporter à https://core.fairandsmart.com/doc/api.html#operation/getConsentEndointJson pour plus d’information et une liste exhaustive des paramètres possibles (langue du formulaire, pays de résidence etc …).

...

Par exemple dans le cas d’une iframe :

Code Block

breakoutMode	wide
language	html

<html>
    <body>
        <iframe width="700" height="500" src="<?php echo getForm(getToken()) ?>"></iframe>
    </body>
</html>

Intégration avec iframeResizer

à partir de la version 19.04.02 (core 3.7.x)

iframeResizer est une librairie javascript permettant l’intégration sans couture d’une iframe au sein d’un site.

Note
dans ce cas l’appel HTTP de génération de l’URL du formulaire doit contenir le paramètre “iframe” positionné à “true”.

Code Block

breakoutMode	wide
language	html

<html>
    <body>
        <style>iframe { width: 1px; min-width: 100%; }</style>
        <script src="http://url-du-script/iframeResizer.min.js"/>
        <script>iFrameResize({ log: true }, '#myIframe');</script>
        <iframe id="myIframe" src="<?php echo getFormgetFormUrl(getToken()) ?>" width="100%" title="Consent iFrame" id="consent"></iframe>
    </body>
</html>

Déclencher un rechargement de la frame parente

à partir de la version 19.09.01 (core 5.1.x)

Dans le cas d’une intégration par iframe, il peut être souhaité de déclencher un événement de rechargement de la frame parente.

Note
dans ce cas l’appel HTTP de génération de l’URL du formulaire doit contenir le paramètre `callback` positionné à l’URL à appeler ainsi que `iframeEventsTargetOrigin` positionné à l’origine de la frame parente.

Code Block

breakoutMode	wide
language	html

<html>
    <body>
        <script type="application/javascript">
            window.addEventListener("message", messageListener, false);
            function messageListener(event) {
                console.log(event);
                if (event.data.startsWithsearch('/consent-callback/') >= 0) {
                    const urlback = event.data.replace('/.*consent-callback/'\/([^"]*).*/, '$1');
                    window.location.assign(urlback);
                }
            }
        </script>   
         <iframe width="700" height="500" src="<?php echo getFormgetFormUrl(getToken()) ?>" width="100%" title="Consent iFrame" id="consent"></iframe>
    </body>
</html>

Code source

Retrouvez une version plus complète de ce code sur github : https://github.com/fairandsmart/consent-iframe-integration-test

Références

documentation de l’API : https://core.fairandsmart.com/doc/api.html
iframeresizer : https://github.com/davidjbradshaw/iframe-resizer
communication inter-domaine : https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage

Pour aller plus loin

Filter by label (Content by label)

showLabels	false
max	5
spaces	com.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@10041
sort	modified
showSpace	false
reverse	true
type	page
cql	label in ( "modèles" , "consentements" , "configuration" ) and type = "page" and space = "BDC"
labels	consentements modèles configuration

Versions Compared

Old Version 5

New Version Current

Key

Cinématique

Intégration avec iframeResizer

Déclencher un rechargement de la frame parente

Code source

Références

Pour aller plus loin