MBI : Erreurs courantes lors de l'intégration par iframe

1. URL du jeton Autoin de Marque Blanche vs jeton API Metricool

Vous pouvez distinguer deux types de jetons sur Metricool :

Le premier jeton est ajouté en tant que clé d'accès au lien autoin utilisé pour créer l'iframe dans le compte de votre client. Ce jeton est unique pour chaque marque créée pour votre intégration en Marque Blanche. Voici un exemple de la structure générale d'un lien autoin pour la création d'un iframe :

https://app.metricool.com/autoin/[WL_TOKEN]?redirect=/planner

Vous pouvez obtenir ce « Jeton de Marque Blanche » en accédant au Menu > Paramètres de la marque > Marque Blanche et en sélectionnant l'une des deux URL d'accès disponibles. Le jeton est unique et varie selon chaque marque créée. Vous pouvez également automatiser la création du lien autoin avec le jeton d'accès en effectuant une requête de type Get vers notre API (vous pouvez trouver la documentation ici). Voici un exemple :

https://app.metricool.com/api/admin/profile?blogId=&userId=&refreshBrandCache=false

Le second jeton est une clé d'accès générale à notre API, spécifiée pour votre compte Metricool, et non pour l'intégration en Marque Blanche. Ce jeton permet l'intégration de Metricool avec Looker Studio, Zapier, Make ou Canva, ainsi qu'avec de nombreux autres outils prenant en charge une connexion API et développés de votre côté. Vous le trouverez dans le Menu > Paramètres du compte > API.

Si vous utilisez ce dernier jeton comme clé d'accès dans le lien autoin, l'iframe ne s'affichera pas dans votre produit et une erreur de syntaxe apparaîtra dans votre console.

2. Erreurs : Referrer Policy ; Content-Security-Policy : frame ancestor

Une préoccupation courante concerne les politiques de sécurité du contenu (CSP) et l'attribut « frame-ancestors ». Cette erreur survient lorsque votre serveur web tente de charger une page ou un iframe qui enfreint vos politiques de sécurité. En vérifiant la console, vous trouverez une erreur comme celle-ci :

Pour corriger cela, ajoutez l'attribut Referrer Policy à votre iframe, avant la source (src). Voici un exemple :

<iframe referrerpolicy="origin" src="https://app.metricool.com/autoin/xxxxxxxxxxx"  …………></iframe>

3. Mélange de sessions

Si vous gardez à la fois le compte Metricool principal (celui que vous avez utilisé pour effectuer le paiement) et le compte de votre produit (où vous insérez votre iframe) ouverts dans le même navigateur, les informations des deux se mélangeront. De plus, vous pourriez rencontrer des erreurs de redirection. Pour éviter cela, assurez-vous de toujours ouvrir les deux comptes dans des navigateurs différents, ou ouvrez l'un des deux dans une fenêtre de navigation privée (incognito) de votre navigateur de travail.

Ressources supplémentaires