ProlongationENT : intégrer une application web sans iframe

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

ajouter layout.jsp dans votre uPortal (simple wrapper atour de layout.json permettant JSONP + l'authentification transparente sur CAS)
installer et configurer prolongation-ENT.js & prolongation-ENT.css

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

bandeau-ENT créé en 2012
était en production à Paris 1 jusqu'en 2015
utilise un fichier de configuration pour configurer le menu

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é.

ESUP-Days #20 23.09.2015 Paris