Documentation technique

Accès au middle-office

Après avoir demander la création de votre compte diffuseur, vous pouvez accéder à votre espace personnel en cliquant sur le bouton ci-dessous

Utilisez le couple identifiant / mot de passe reçu par email pour accéder à la plateforme.

C’est depuis ce dernier que vous pourrez créer des widgets et suivre votre abonnement.

Intégration en iFrame

Depuis le middle-office, rendez-vous sur l’onglet « Mes widgets » et cliquez sur le bouton « Ajouter un widget »

Une popup vous permet de saisir le contenu de votre widget, ce dernier est composé des champs suivants :

• Le nom de votre widget, qui vous permettra de le retrouver plus facilement si vous souhaitez en créer plusieurs.
• Les plages devant apparaitre dans votre widget.

Cliquez sur le bouton « enregistrer », vous aurez alors accès à votre widget.

Cliquez sur le bouton « intégrer le widget » pour voir votre widget et récupérer l’URL qui vous permettra de l’intégrer de la façon suivante :

.container {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  height: calc(100vh - 100px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

@media only screen and (max-width: 750px) {
  .container {
    height: 100vh;
    margin-top: 0px;
  }
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border:  none;
}

<div class="container">
    <iframe class=responsive-iframe src="https://peak.maplage.info/widget/[USER_ID]/[WIDGET_ID]"></iframe>
</div>

Vous pouvez passer le paramètre GET without_tide_weather_condition à l’URL de votre iFrame afin de ne pas faire apparaitre les informations concernant la marée et la météo des plages présentes sur votre widget. Ce paramètre peux prendre comme valeur « true » ou « false ».

Exemple

Intégration via client JavaScript

Téléchargement

Le client JavaScript MaPlage.info est accessible directement depuis le gestionnaire de paquets NPM.

Selon votre cas, installez la dépendance comme suit :

# Si vous utilisez NPM

npm install --save maplageinfo-sdk

# Si vous utilisez Yarn

yarn add maplageinfo-sdk

Utilisation

Une fois la dépendance installée, utilisez la comme ci-dessous :

import {
    getCommunities,
    getBeach,
    getBeaches,
    getBeachesByPostalCode,
    getBeachesByCommunity,
    getAlertsByBeachId,
    getAlertById,
    getAlerts
} from 'maplageinfo-sdk';


const params = {
    scope: 'openid',
    client_id: 'xxxxx', // Fourni par email
    grant_type: 'password',
    username: 'xxxxx', // Fourni par email
    password: 'xxxxx', // Fourni par email
};

( async(params) => {
    console.log(await getCommunities(params));  // Récupération de toutes les collectivités adhérentes
    console.log(await getBeach(params, 'xxxxx')); // Récupération d'une plage par son identifiant
    console.log(await getBeaches(params)); // Récupération de toutes les plages
    console.log(await getBeachesByPostalCode(params, 00000)); // Récupération des plages par code postal
    console.log(await getBeachesByInseeCode(params, 00000)); // Récupération des plages par code insee
    console.log(await getBeachesByCommunity(params, 'xxxxx')); // Récupération des plages par collectivité
    console.log(await getAlertsByBeachId(params, 'xxxxx')); // Récupération des alertes par plage
    console.log(await getAlertById(params, 'xxxxx')); // Récupération d'une alerte par son identifiant
    console.log(await getAlerts(params)); // Récupération de toutes les alertes
})(params);

Vous trouverez la documentation des objets récupérés en cliquant sur le bouton ci-dessous.

Intégration manuelle

Récupération d’un token

Afin de consommer les API MaPlage.info, vous aurez besoin d’un token d’identification que vous pourrez récupérer en vous connectant à notre SSO via l’URL suivante :

https://auth.maplage.info/auth/realms/dock/protocol/openid-connect/auth?client_id=iris-interactive&redirect_uri=[VOTRE_URL_DE_REDIRECTION]&response_type=code&scope=openid

Vous serez alors redirigé vers l’URL saisie derrière le paramètre « redirect_uri », récupérez le paramètre GET « code » que vous pourrez échanger par un token en envoyant la requête POST suivante :

curl --location --request POST 'https://auth.maplage.info/auth/realms/dock/protocol/openid-connect/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=authorization_code' \
--data-urlencode 'client_id=iris-interactive' \
--data-urlencode 'code=[CODE]' \
--data-urlencode 'redirect_uri=[VOTRE_URL_DE_REDIRECTION]'

Vous recevrez un objet JSON ressemblant à cela :

{
   "access_token":"...",
   "expires_in":...,
   "refresh_expires_in":...,
   "refresh_token":"...",
   "token_type":"Bearer",
   "id_token":"...",
   "not-before-policy":...,
   "session_state":"...",
   "scope":"openid profile email"
}

Rafraichissement d’un token

Votre token d’identification doit être rafraichi toutes les 5 minutes en envoyant la requête POST suivante :

curl --location --request POST 'https://auth.maplage.info/auth/realms/dock/protocol/openid-connect/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=refresh_token' \
--data-urlencode 'client_id=iris-interactive' \
--data-urlencode 'refresh_token=[VOTRE_REFRESH_TOKEN]'

Vous recevrez un objet JSON ressemblant à cela :

{
   "access_token":"...",
   "expires_in":...,
   "refresh_expires_in":...,
   "refresh_token":"...",
   "token_type":"Bearer",
   "id_token":"...",
   "not-before-policy":...,
   "session_state":"...",
   "scope":"openid profile email"
}

Interrogation des API’s

Vous pourrez consommer les API MaPlage.info en interrogeant l’API GraphQL accessible à l’URL suivante :

https://peak.maplage.info/graphql

Chaque appel aux API doit contenir un header d’autorisation de type bearer :

Authorization: Bearer [VOTRE_TOKEN_D_AUTHENTIFICATION]

Documentation des API’s

Vous trouverez la documentation des objets récupérés en cliquant sur le bouton ci-dessous.