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 :
...
Exemple en PHP :
Code Block | ||||
---|---|---|---|---|
| ||||
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 (user_id
uuid
ci-dessous).
Code Block | ||||
---|---|---|---|---|
| ||||
function getFormgetFormUrl($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"; $user_id = "test fns"; $host $callback = "https://www.fairandsmart.com"= $_SERVER['HTTP_HOST']; $iframe_event_target_origin$port = "http://localhost:8080"; $body$proto = isset($_SERVER['HTTPS']) ? "https" : "http"; $context = [ $body = $body . "userid=" . $user_id;=> $uuid, $body = $body . "&callback=" . $callback;country" => "FR", $body = $body . "&iframe-events-target-origin=" . $iframe_event_target_origin"language" => "fr", ]; $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 => $body, CURLOPT_HTTPHEADER => array( curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($context)); curl_setopt($curl, CURLOPT_HTTPHEADER, array("Authorization: Bearer $token", "Content-Type: application/x-www-form-urlencoded", ), 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 $url
contient 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 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 | ||||
---|---|---|---|---|
| ||||
<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 | ||||
---|---|---|---|---|
| ||||
<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” |
Code Block | ||||
---|---|---|---|---|
| ||||
<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) | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|