Intégrer une solution dans une page web

www.altova.com Agrandir/Réduire tout Imprimer cette rubrique Page précédente Un niveau supérieur Page suivante

Accueil >  Solutions de page web intégrée >

Intégrer une solution dans une page web

Vous pouvez intégrer une ou plusieurs solutions MobileTogether dans une page web. Chaque solution est intégrée dans un élément HTML IFRAME. Pour ce faire, procéder comme suit :

 

1.Ajouter l'élément HTML IFRAME dans l'endroit de la page web où vous souhaitez afficher la solution (voir exemple ci-dessous)
2.Définir l'attribut src de IFRAME dans l'URL de la solution sur MobileTogether Server que vous souhaitez intégrer (voir liste ci-dessous)

 

<iframe src="http://localhost:8083/run?d=/public/my-mt-solution" frameborder="0"></iframe

 

 

Une fois que la page HTML est chargée, son IFRAME chargera la solution ciblée. Puisque l'IFrame accédera à MobileTogether Server, trois scénarios liés à l'authentification sont possibles :

 

Accès anonyme : si l'accès anonyme à la solution est activée sur MobileTogether Server, alors la solution sera affichée directement dans l'IFrame ; aucune authentification de l'utilisateur n'est exigée. Afin de définir un accès anonyme, le serveur doit (i) permettre un login anonyme (voir les configurations de serveur pour les ports client mobiles) et (ii) permettre l'utilisation anonyme de la solution (en définissant la permissions du conteneur du flux de travail en un minimum de container=read et workflow=read,use).
Login utilisateur : si le login d'utilisateur anonyme n'est pas activé sur le serveur, l'utilisateur sera invité à fournir des identifiants de login MobileTogether Server valides. Si 'utilisateur a la permission d'accéder à la solution ciblée, alors la solution sera téléchargée de  MobileTogether Server vers l'IFrame de la page web.
Authentification JWT : l'utilisateur est authentifié dans un système se trouvant en-dehors du système d'authentification MobileTogether Server, et les informations d'authentification sont passées à MobileTogether Server depuis JSON Web Tokens (JWT). L'authentification JWT permet de charger la solution ciblée sans qu'il soit nécessaire de procéder à une authentification spécifique à MobileTogether.

 

Exemple : page web simple contenant une solution intégrée

Le code HTML ci-dessous montre comment un élément IFRAME est utilisé pour intégrer une solution. En-dessous de la liste se trouve une capture d'écran de la page HTML contenant la solution intégrée (encadrée en vert). La solution utilisée dans cette liste est un échantillon appelé About qui est packagé avec MobileTogether Server ; elle se situe par défaut dans le conteneur public du serveur. Afin d'intégrer correctement cette solution, il faut configurer le serveur pour permettre un accès anonyme du flux de travail About. Vous pouvez essayer cette fonction en copiant le code HTML ci-dessous en l'enregistrant dans le fichier puis en ouvrant le fichier dans un navigateur.

 

<!DOCTYPE html>

<html>

  <head>

    <title>Webpage containing an embedded solution</title>

  </head>

  <body>

    <h1>Webpage containing an embedded solution</h1>

    <p>The embedded solution is loaded into an IFrame, which is located immediately below this paragraph.</p>

    <div class="resize">

      <iframe src="http://localhost:8083/run?d=/public/About" frameborder="0"></iframe> 

    </div>

  </body>

</html>

 

L'URL dans l'attribut src doit résoudre dans le motif suivant :

http://<serveraddress>:<serverport-for-client>/run?d=/<path-to-container>/<solution-name>

 

 

Click to expand/collapseListe complète (contenant des styles CSS pour redimensionner IFrame)

 

<!DOCTYPE html>

<html>

  <head>

    <title>Webpage containing an embedded solution</title>

    <style>

      .resize {

        position: relative;

        padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9/16 = 0.5625 or 56.25%) */

        padding-top: 30px;

        height: auto;           /* alternatively, try a value of 0 */

        overflow: hidden;

      }

 

      .resize iframe {

        position: absolute;

        top: 0; 

        left: 0;

        width: 100%;

        height: 100%;

      }                

    </style>

  </head>

  <body>

    <h1>Webpage containing an embedded solution</h1>

    <p>The embedded solution is loaded into an IFrame, which is located immediately below this paragraph. CSS style properties are used to resize the IFrame according to window dimensions so that the IFrame's aspect ratio is maintained at 16:9.</p>

    <div class="resize">

      <iframe src="http://localhost:8083/run?d=/public/About" frameborder="0"></iframe> 

    </div>

  </body>

</html>

 

MTDEWSEx01

 


© 2019 Altova GmbH