ESUP-Days #20(23.09.2015 @Paris)

ESUP-Portail

ESUP-Days #20 23.09.2015 Paris

ProlongationENT : intégrer une application web sans iframe.

  • Pascal RIGAUX

Introduction

> que font les géants du Web ?

Le même bandeau dans toutes les applications :

Microsoft
Google

Introduction

> et dans le monde uPortal ?

Que font les principaux contributeurs :
  • Unicon : propose des portlets AngularJS
  • Wisconsin-Madison fait des Frame Apps :
    • une application AngularJS
    • utilisant un maven war overlay pour ajouter un header/sidebar/search AngularJS
➡ technologies très intégrées

Solution découplée comparable aux iframes : ProlongationENT

Présentation ProlongationENT

> identiques ?

iframe
ProlongationENT

Présentation ProlongationENT

> différences

iframe
ProlongationENT

Technologies

> Javascript !

  • ajout d'un <div> en entête des pages (et un <div> de pied de page pour les liens mentions légales)
  • JSONP ou AJAX
  • cache navigateur ou sessionStorage pour éviter les clignotements

Comparaison iframe

Avantages

  • asynchrone => presque pas de SPOF
  • n'interfère pas avec la mise en signet
  • fonctionne en http, en cross-domain
  • plus léger (pas de fluid, jquery...)
  • les applications restent maître de leur viewport (mobile)
  • pour les applications javascript, pas de problème de double ascenseur

Inconvénients

  • une seule application par page (pas de dashboard)
  • parfois des ajustements CSS pour les applications full-page
  • les URLs sont visibles (gênant pour les applications multi-auth comme compilatio ou lemonde.fr)
  • interférences du CSS des applications avec celui du bandeau (nécessite beaucoup de !important)
  • bypass les stats esup-uportal (plus un pb avec Agimus)

Utilisation

À l'Université Paris 1

Utilisation dans les applications difficiles à mettre en iframe, puis généralisation progressive.
  • 2013 : Aleph et Metalib (ExLibris), GLPI, Nuxeo, DokuWiki, Grouper Lite UI
  • 2014 : Moodle, Intranet Typo3, Sifac
  • 2015 : Hyperplanning, IPweb, IAweb, Horde 5...

Ailleurs

Expérimentations à l'Université de Rennes 1, l'Université de Lorraine.

Comment intégrer une application ?

> basique

Ajouter les lignes suivantes : 

<script>  
  window.bandeau_ENT = { current: "moodle" };
</script>  
<script src="https://ent.univ.fr/ProlongationENT/loader.js"></script>
  • le fname ("moodle" dans l'exemple) permet d'afficher le nom de l'application et l'onglet actif

Comment intégrer une application ?

> via reverse proxy apache

Il est possible d'utiliser apache pour ajouter la prolongation ENT : 

RequestHeader unset  Accept-Encoding
AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|</head>| <script type=\"text/javascript\">window.bandeau_ENT = { current: \"moodle\"}; </script><script src=\"https://ent.univ.fr/ProlongationENT/loader.js\"></script> </head>|"
Nous utilisons cette technique pour nuxeo par exemple.

Comment intégrer une application ?

> avec bouton logout

Le bandeau a un bouton déconnexion.
Pour que le bouton déconnecte l'application, il suffit de donner un sélecteur CSS : 

<script>  
  window.bandeau_ENT = { current: "moodle", logout: ".logoutButton" };
</script>  
<script src="https://ent.univ.fr/ProlongationENT/loader.js"></script>

Comment intégrer une application ?

> avec déshabillage

Pour cacher le bandeau ou le bouton déconnexion dans l'application, utilisez une feuille de style : 

<script>  
  window.cssToLoadIfInsideIframe = "https://.../xxx.css";
  window.bandeau_ENT = { current: "moodle" };
</script>  
<script src="https://ent.univ.fr/ProlongationENT/loader.js"></script>

Comment intégrer une application ?

> shibbolethisée

  • Pour une application d'établissement, la prolongation ENT casifiée apparaît pour les utilisateurs de l'établissement.
  • Il est aussi possible de charger la prolongation ENT casifiée de l'établissement.
    ➡ parfait pour des applications nationales. Exemple : notre Filex utilise un proxy shib pour charger la prolongation de l'établissement ou utiliser l'API uPortal4 de l'établissement (nécessite l'ajout d'une jsp). prototype avec compte CRU.
  • Il est possible d'avoir une prolongation shibbolethisée. (bandeau-ENT le permet)

Mettre en place une ProlongationENT

> avec uPortal 4

Limitations :

  • layout.json ne renvoit pas les applications cachées dans la "vue" mobile
  • prolongation-ENT.js est un prototype simple de démonstration

Mettre en place une ProlongationENT

> bandeau-ENT

Mettre en place une ProlongationENT

> avec uPortal 3

En 2015 nous avons porté bandeau-ENT dans uPortal 3 ou 4, et passé en production.
  • limitation : droits des DLMs non gérés (droits gérés par canaux)
  • nous allons remanier le code pour fournir un layout.json comme dans uPortal 4

Conclusion

N'hésitez pas à me contacter ou à en discuter sur la liste esup-utilisateurs.

Je remercie Aymar Anli pour ses conseils et sa disponibilité.

Questions ?

Copyright 2015 ©