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 | ||
|---|---|---|
|
Cinématique
Une fois l’intégration réalisée, la cinématique se déroule ainsi :
...
Il est nécessaire d’indiquer un identifiant qui permettra de relayer le formulaire à son utilisateur (userid uuid ci-dessous).
| Code Block | ||||
|---|---|---|---|---|
| ||||
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"; $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); } |
...
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 …).
...
à partir de la version 19.1104.01 02 (core 53.27.x)
iframeResizer est une librairie javascript permettant l’intégration sans couture d’une iframe au sein d’un site.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
à 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.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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> |
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) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|