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.
les snippets sont volontairement gardés au plus simple (pas de contrôle d’erreur, de gestion des sessions etc … ).
Cinématique
Une fois l’intégration réalisée, la cinématique se déroule ainsi :
obtention d’un jeton d’authentification ;
obtention d’une URL de formulaire ;
présentation du formulaire ;
envoi du formulaire, à l’issu duquel :
optionnel : affichage du reçu de consentement ;
optionnel : envoi de message à la frame parente pour déclencher un rechargement du site ;
optionnel : redirection vers une nouvelle URL ;
Obtention d’un jeton d’authentification
L’obtention du jeton d’authentification peut se faire via une requête HTTP, bien qu’il soit conseillé d’utiliser un framework Oauth2 permettant un renouvellement automatique des jetons de session.
Exemple en 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($curl, CURLOPT_URL, $auth_url . "/realms/" . $auth_realm . "/protocol/openid-connect/token");
curl_setopt($curl, CURLOPT_POSTFIELDS, "grant_type=password&client_id=" . $auth_client_id . "&username=" . urlencode($auth_username) . "&password=" . urlencode($auth_password));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
return json_decode($response)->access_token;
}
À l’issue de ce snippet, la variable token contiendra le token d’authentification..
Obtention d’une URL de formulaire de consentement
L’obtention du formulaire se fait via une requête HTTP ; à l’issue de l’opération on obtient une URL de formulaire de consentement intégrable par exemple en snippet.
Il est nécessaire d’indiquer un identifiant qui permettra de relayer le formulaire à son utilisateur (userid ci-dessous).
function getFormUrl($token)
{
$api_url = "https://core.fairandsmart.com/api";
$organisation_id = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
$model_id_or_alias = "YYYYYYYY-YYYY-YYYY-YYYY-YYYYYYYYYYYY";
$host = $_SERVER['HTTP_HOST'];
$port = "";
$proto = isset($_SERVER['HTTPS']) ? "https" : "http";
$context = [
"userid" => $uuid,
"callback" => "?uuid=". $uuid . "&email=". $email . "&receipt=". $receipt . "&stage=2",
"country" => "FR",
"language" => "fr",
"optoutEmail" => $email != "" ? $email . "@fairandsmart.com" : null,
"receipt" => $receipt,
"iframe" => true,
"iframeEventsTargetOrigin" => $proto . "://" . $host . ($port ? ":" . $port : ""),
];
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $api_url . "/organisations/" . $organisation_id . "/consents/" . $model_id_or_alias . "/endpoint");
curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($context));
curl_setopt($curl, CURLOPT_HTTPHEADER, array("Authorization: Bearer $token", "Content-Type: application/json"));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
}
À la fin de ce snippet, la variable $urlcontient l’url du formulaire de consentement.
Cet exemple ne couvre pas les variantes de l’appel ; les champs suivants peuvent être renseignés selon l’usage souhaité :
callback: URL vers laquelle l’utilisateur sera redirigé à l’issue de la saisie ;optoutEmail: adresse email à laquelle une reçu de consentement sera transmis ;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 …).
Présentation du formulaire
Une fois l’URL obtenue, elle peut être présentée à l’utilisateur par exemple par redirection HTTP (HTTP 3xx) ou via une iframe.
Par exemple dans le cas d’une iframe :
<html>
<body>
<iframe width="700" height="500" src="<?php echo getForm(getToken()) ?>"></iframe>
</body>
</html>
Intégration avec iframeResizer
à partir de la version 19.11.01 (core 5.2.x)
iframeResizer est une librairie javascript permettant l’intégration sans couture d’une iframe au sein d’un site.
dans ce cas l’appel HTTP de génération de l’URL du formulaire doit contenir le paramètre “iframe” positionné à “true”.
<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 src="<?php echo getFormUrl(getToken()) ?>" width="100%" title="Consent iFrame" id="consent"></iframe>
</body>
</html>
Déclencher un rechargement de la frame parente
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.
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.
<html>
<body>
<script type="application/javascript">
window.addEventListener("message", messageListener, false);
function messageListener(event) {
if (event.data.search(/consent-callback/) >= 0) {
const urlback = event.data.replace(/.*consent-callback\/([^"]*).*/, '$1');
window.location.assign(urlback);
}
}
</script>
<iframe src="<?php echo getFormUrl(getToken()) ?>" width="100%" title="Consent iFrame" id="consent"></iframe>
</body>
</html>
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