import{j as e,M as r}from"./index-B3rt-ZPd.js";import{useMDXComponents as t}from"./index-D-2g2b7P.js";import{T as a}from"./custom-title-docs-6VQRM111.js";import"./iframe-BZhIBc13.js";import"./index-C__6K5js.js";import"./index-DrFu-skq.js";function o(n){const i={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Patterns/Header & Footer"}),`
`,e.jsx(a,{title:"Header & Footer",links:[{text:"Integrazione dei Microservizi Header e Footer",href:"#integrazione-dei-microservizi-header-e-footer"},{text:"Obiettivi e Componenti Principali",href:"#obiettivi-e-componenti-principali"},{text:"Tipologia di Endpoint",href:"#tipologia-di-endpoint"},{text:"Dettagli Tecnici",href:"#dettagli-tecnici"}]}),`
`,e.jsxs(i.p,{children:[e.jsx(i.em,{children:"(HEADER)"}),`
`,e.jsx(i.img,{src:"assets/Header.png",alt:""})]}),`
`,e.jsx(i.h2,{id:"integrazione-dei-microservizi-header-e-footer",children:"Integrazione dei Microservizi Header e Footer"}),`
`,e.jsx(i.p,{children:"Questo documento fornisce linee guida per l'integrazione dei microservizi Header e Footer all'interno delle applicazioni web sviluppate per il portale INAIL, sia in ambito Internet che Intranet. Questi microservizi permettono di centralizzare e standardizzare componenti come intestazioni, piè di pagina e risorse CSS/JS, adattando l'aspetto e il comportamento in base all'ambiente (Internet/Intranet) e al livello di autenticazione dell'utente."}),`
`,e.jsxs(i.p,{children:[e.jsx(i.em,{children:"(Footer)"}),`
`,e.jsx(i.img,{src:"assets/Footer.png",alt:""})]}),`
`,e.jsx(i.hr,{}),`
`,e.jsx(i.h2,{id:"obiettivi-e-componenti-principali",children:"Obiettivi e Componenti Principali"}),`
`,e.jsxs(i.p,{children:["L'obiettivo è semplificare l'integrazione dei servizi Header e Footer tramite un flusso che sfrutti l'",e.jsx(i.strong,{children:"API Gateway"})," di INAIL, consentendo un accesso sicuro e configurabile alle risorse. Questo approccio elimina la necessità di metodi di integrazione legacy, come ",e.jsx(i.strong,{children:"Taglib"}),", facilitando la migrazione verso soluzioni moderne basate su ",e.jsx(i.strong,{children:"REST API"}),"."]}),`
`,e.jsx(i.h2,{id:"tipologia-di-endpoint",children:"Tipologia di Endpoint"}),`
`,e.jsx(i.p,{children:"I microservizi HeaderFooter offrono sia endpoint pubblici, accessibili senza autenticazione, che endpoint protetti per contenuti autenticati. Gli endpoint restituiranno le porzioni HTML richieste, iniettate poi nelle applicazioni attraverso JavaScript."}),`
`,e.jsx(i.h3,{id:"modalità-di-integrazione-automatica-plugplay",children:"Modalità di Integrazione Automatica (Plug&Play)"}),`
`,e.jsxs(i.p,{children:["Per agevolare ulteriormente gli sviluppatori, è disponibile uno script ",e.jsx(i.strong,{children:"HeaderFooter Plug&Play"})," che consente di incorporare automaticamente gli elementi di Header e Footer, lasciando agli sviluppatori la possibilità di concentrarsi sullo sviluppo dell’applicazione principale. Questo script gestisce le chiamate API, identifica l’ambiente (Internet/Intranet), e carica in modo dinamico le risorse necessarie."]}),`
`,e.jsx(i.h2,{id:"dettagli-tecnici",children:"Dettagli Tecnici"}),`
`,e.jsx(i.h3,{id:"integrazione-dei-microservizi-header-e-footer-1",children:"Integrazione dei Microservizi Header e Footer"}),`
`,e.jsxs(i.p,{children:["L'integrazione dei microservizi ",e.jsx(i.strong,{children:"HeaderFooter"})," in INAIL si basa su endpoint REST pubblici e protetti. Questi endpoint forniscono le sezioni HTML per l'intestazione e il piè di pagina delle pagine web e variano in base al tipo di utente (autenticato o non autenticato) e all'ambiente (Internet o Intranet)."]}),`
`,e.jsxs(i.ol,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Endpoint Pubblici e Protetti"}),": Gli endpoint pubblici forniscono sezioni HTML per le pagine non autenticate (ad esempio, il footer visibile a tutti gli utenti), mentre quelli protetti richiedono autenticazione per accedere a sezioni riservate (ad esempio, il menu utente autenticato)."]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Output JSON"}),": Gli endpoint restituiscono una risposta in formato JSON che include il markup HTML per ogni sezione specifica (ad esempio, ",e.jsx(i.code,{children:"htmlHeader"}),", ",e.jsx(i.code,{children:"htmlFooter"}),", etc.), che può essere iniettata dinamicamente nell’applicazione."]}),`
`]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Autenticazione per Endpoint Protetti"}),": Sono supportate diverse modalità di autenticazione per gli endpoint protetti:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"SSO (Single Sign-On)"})," con il cookie di sessione ",e.jsx(i.code,{children:"SMSESSION"})," fornito da SiteMinder per le applicazioni nel dominio ",e.jsx(i.code,{children:"*.inail.it"}),"."]}),`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"OIDC (OpenID Connect)"})," con ",e.jsx(i.code,{children:"access_token"})," per le applicazioni fuori dal dominio ",e.jsx(i.code,{children:"*.inail.it"}),"."]}),`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"HPICO (OIDC ad alte prestazioni)"}),", che utilizza ",e.jsx(i.code,{children:"id_token"})," per un accesso più rapido, anch'esso destinato alle applicazioni fuori dal dominio principale INAIL."]}),`
`]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Registrazione dell’Applicazione"}),": Ogni applicazione che intende utilizzare questi endpoint deve essere censita nell'API Gateway di INAIL, ottenendo un ",e.jsx(i.code,{children:"ClientID"})," univoco per l’autenticazione delle richieste."]}),`
`]}),`
`]}),`
`,e.jsx(i.h3,{id:"modalità-di-integrazione-automatica-con-headerfooter-plugplay",children:"Modalità di Integrazione Automatica con HeaderFooter Plug&Play"}),`
`,e.jsxs(i.p,{children:["Lo script ",e.jsx(i.strong,{children:"headerfooter.js"}),` offre un'integrazione "Plug&Play" per semplificare l'inclusione degli elementi di Header e Footer:`]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Configurazione"}),": L'inclusione dello script nel documento HTML carica automaticamente header e footer. La configurazione richiede solo il ",e.jsx(i.code,{children:"client_id"})," e opzionalmente il parametro ",e.jsx(i.code,{children:"nomeApp"})," per le applicazioni Intranet."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Esempio di Codice"}),":"]}),`
`,e.jsx(i.pre,{children:e.jsx(i.code,{className:"language-html",children:`<script type="text/javascript" src="https://cdn.inailcloud.it/assets/app/header_footer/js/headerfooter.js" id="headerfooterjs"><\/script>
<script>
  window.HeaderFooterJS.configHeaderFooter({
      client_id: "appClientID",
      nomeApp: "NomeApplicazione",
      isHeadSimple: true,
    });
    window.HeaderFooterJS.onLoad(function () {
      window.InailUtils.initStyles();
    });
    window.HeaderFooterJS.initHeaderFooter();
<\/script>
`})}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Differenziazione per Ambiente"}),": Lo script ",e.jsx(i.code,{children:"headerfooter.js"})," è in grado di distinguere l’ambiente (collaudo, certificazione, produzione) in base all’URL corrente, facilitando l'adattamento automatico delle risorse da caricare."]}),`
`]}),`
`]}),`
`,e.jsx(i.h3,{id:"migrazione-dai-metodi-legacy",children:"Migrazione dai Metodi Legacy"}),`
`,e.jsx(i.p,{children:"Per integrare il Plug&Play, i metodi legacy di integrazione devono essere rimossi:"}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Chiamate REST Legacy"}),": Se l'applicazione faceva chiamate dirette agli endpoint REST, questi meccanismi dovranno essere eliminati in favore dell’uso di ",e.jsx(i.code,{children:"headerfooter.js"}),"."]}),`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Taglib"}),": Se l’applicazione utilizzava ",e.jsx(i.code,{children:"Taglib"}),", sarà necessario rimuovere i tag di integrazione precedenti come ",e.jsx(i.code,{children:'<pageCommon:header key="header_internet" />'})," e ",e.jsx(i.code,{children:'<pageCommon:footer key="footer" />'}),"."]}),`
`]}),`
`,e.jsx(i.h3,{id:"endpoint-principali",children:"Endpoint Principali"}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Header e Footer per Internet e Intranet"}),": Per ottenere l'header e il footer, è possibile utilizzare:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Internet"}),":"]}),`
`,e.jsx(i.pre,{children:e.jsx(i.code,{className:"language-html",children:`fetch('https://collportale.inail.it/api/hf/public/fullhtml_rw', {
  credentials: 'include',
  headers: { 'client_id': 'ClientHF_v3' }
})
.then(response => response.json())
.then(data => {
  // Iniettare htmlHeader, htmlFooter nell'applicazione
});
`})}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Intranet"}),": URL e metodi analoghi sono disponibili per le applicazioni interne, con endpoint specifici e configurazioni di autenticazione."]}),`
`]}),`
`]}),`
`]}),`
`]}),`
`,e.jsxs(i.blockquote,{children:[`
`,e.jsxs(i.p,{children:[`Per ulteriori dettagli e esempi completi, si consiglia di consultare il documento originale per garantire una corretta implementazione.
`,e.jsx(i.a,{href:"https://inail.sharepoint.com.mcas.ms/sites/GPS/Documenti%20condivisi/Forms/AllItems.aspx?id=%2Fsites%2FGPS%2FDocumenti%20condivisi%2F02.%20Realizzazione%2F09.%20Integrazione%2FDCOD_CONO_LGd_Integrazione%20web%20app%20nel%20portale%20unico%20_v6_1.pdf&parent=%2Fsites%2FGPS%2FDocumenti%20condivisi%2F02.%20Realizzazione%2F09.%20Integrazione",rel:"nofollow",children:"DCOD_CONO_LGd_Integrazione web app nel portale unico _v6"})]}),`
`]})]})}function m(n={}){const{wrapper:i}={...t(),...n.components};return i?e.jsx(i,{...n,children:e.jsx(o,{...n})}):o(n)}export{m as default};
