|
| 1 | +# Discovery Page - Selezione identità digitale |
| 2 | + |
| 3 | +Pagina ufficiale di *discovery* per la selezione del metodo di autenticazione (identità digitale), basata sulla libreria [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) e conforme all'identità visiva del Sistema IT-Wallet. |
| 4 | + |
| 5 | +## Descrizione |
| 6 | + |
| 7 | +`disco.html` è la pagina con cui l'utente sceglie il metodo di autenticazione (IT-Wallet, CIE, SPID, eIDAS, CNS, IDEM, ...). I metodi e i relativi testi sono caricati dinamicamente a runtime dai file in `locales/` tramite [i18next](https://www.i18next.com/), quindi è possibile aggiungere, rimuovere o tradurre le card senza modificare l'HTML. |
| 8 | + |
| 9 | +Questo pacchetto condivide con le altre pagine HTML ufficiali gli asset in `../shared-ui/` (CSS, JavaScript comuni, font, sprite SVG, favicon e loghi condivisi). Nella cartella `discovery-page/` restano solo i file specifici della discovery (HTML, loader, localizzazione, asset SPID/CIE/IT-Wallet). |
| 10 | + |
| 11 | +## Caratteristiche |
| 12 | + |
| 13 | +- **Conforme alle linee guida PA**: basata su Bootstrap Italia |
| 14 | +- **Multilingua**: italiano e inglese tramite i file in `locales/` (i18next) |
| 15 | +- **Contenuti data-driven**: i metodi di autenticazione sono definiti nei file di localizzazione |
| 16 | +- **Accessibile**: skip-link, ruoli ARIA, gestione del focus e supporto da tastiera |
| 17 | +- **Responsive**: layout adattabile a diverse dimensioni di schermo |
| 18 | +- **Identità visiva**: utilizza i colori e lo stile ufficiali del Sistema IT-Wallet |
| 19 | + |
| 20 | +## Utilizzo |
| 21 | + |
| 22 | +Poiché la pagina carica i file di localizzazione via `fetch`, va servita tramite un server HTTP (l'apertura diretta con `file://` può essere bloccata dai browser per le richieste `fetch`). |
| 23 | + |
| 24 | +```bash |
| 25 | +# dalla cartella discovery-page/ |
| 26 | +python3 -m http.server 8000 |
| 27 | +# poi apri http://localhost:8000/disco.html |
| 28 | +``` |
| 29 | + |
| 30 | +### Personalizzazione dei metodi di autenticazione |
| 31 | + |
| 32 | +Modifica i file `locales/eid-it.json` e `locales/eid-en.json`. Ogni voce in `digital_id` e `alternative_id` definisce nome, logo, testo del pulsante, URL di login e testi di approfondimento. |
| 33 | + |
| 34 | +### Configurazione degli URL di login (placeholder `CAMBIAMI`) |
| 35 | + |
| 36 | +> ⚠️ **Importante**: gli URL di login (`login_url`) presenti nei file di localizzazione sono volutamente impostati al valore segnaposto `CAMBIAMI`. **Ogni `login_url` con valore `CAMBIAMI` DEVE essere sostituito** con l'endpoint reale del proprio ambiente prima di andare in produzione. |
| 37 | +
|
| 38 | +Per configurare, apri `locales/eid-it.json` e `locales/eid-en.json` e sostituisci ogni occorrenza di `"login_url": "CAMBIAMI"` con l'URL che avvia il flusso di autenticazione del relativo metodo. Puoi individuarle rapidamente cercando la stringa `CAMBIAMI`. |
| 39 | + |
| 40 | +Esempi del formato atteso (da adattare al proprio proxy/IdP): |
| 41 | + |
| 42 | +| Metodo | Esempio di `login_url` da impostare al posto di `CAMBIAMI` | |
| 43 | +| --- | --- | |
| 44 | +| CIE SAML2 | `/Saml2/disco?entityID=<ENTITY_ID_IDP_CIE>&return=<RETURN_URL>` | |
| 45 | +| CIE OpenID Connect | `/Saml2/disco?entityID=<ENTITY_ID_OP_CIE_OIDC>` | |
| 46 | +| eIDAS | `/Saml2/disco?entityID=<ENTITY_ID_EIDAS_NODE>&return=<RETURN_URL>` | |
| 47 | +| IDEM | `https://wayf.idem.garr.it/WAYF?entityID=<TUO_ENTITY_ID>&return=<RETURN_URL>` | |
| 48 | +| CNS / altri metodi | URL del rispettivo flusso di autenticazione | |
| 49 | + |
| 50 | +**Valori che NON vanno modificati** (non sono endpoint da configurare): |
| 51 | + |
| 52 | +- `"login_url": "it-wallet.html"` — navigazione interna verso la pagina di selezione del wallet inclusa in queste risorse. |
| 53 | +- `"login_url": "#spid-idp-button-xlarge-post"` — àncora dell'interfaccia che apre il menu dei gestori SPID (la lista dei gestori è gestita separatamente, vedi sotto). |
| 54 | + |
| 55 | +Gli altri URL informativi (`find_how_to_get_digital_id_url`, `learn_more_link`) puntano per default alle pagine pubbliche ufficiali e possono essere personalizzati opzionalmente. |
| 56 | + |
| 57 | +### Configurazione dei gestori (IdP) SPID |
| 58 | + |
| 59 | +I pulsanti dei gestori SPID NON sono nei file di localizzazione: vengono iniettati a runtime dalla classe `Ita` (`js/ita.min.js`) nel menu `[data-spid-remote]` a partire dall'elenco locale `js/spid-idps-default.json`. Ogni voce ha la forma: |
| 60 | + |
| 61 | +```json |
| 62 | +{ "organization_name": "Nome Gestore", "entity_id": "https://idp.example.it", "logo_uri": "img/spid-idp-esempio.svg" } |
| 63 | +``` |
| 64 | + |
| 65 | +Per personalizzare l'elenco: |
| 66 | + |
| 67 | +- modifica `js/spid-idps-default.json` (aggiungi/rimuovi gestori, allineandoli a `https://registry.spid.gov.it/entities-idp`); |
| 68 | +- inserisci i relativi loghi in `img/` e referenziali con un percorso relativo in `logo_uri` (se `logo_uri` è vuoto viene mostrato il nome testuale del gestore); |
| 69 | +- l'URL di login del singolo gestore è costruito automaticamente dalla funzione `href` in `js/ita.min.js` come `<return>?entityID=<entity_id>&return=<return>`. Adatta quella funzione al proprio flusso SAML/proxy se necessario. |
| 70 | + |
| 71 | +> Nota: per impostazione predefinita l'elenco è caricato dal file locale (`local = true` in `js/ita.min.js`). È possibile invece recuperarlo dal registro SPID remoto impostando `local = false`, ma in tal caso la richiesta a `registry.spid.gov.it` è soggetta alle policy CORS del browser. |
| 72 | +
|
| 73 | +### Dipendenze esterne (CDN) |
| 74 | + |
| 75 | +La libreria i18next è caricata da CDN (jsDelivr); è quindi richiesta una connessione di rete: |
| 76 | + |
| 77 | +```html |
| 78 | +<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script> |
| 79 | +<script src="https://cdn.jsdelivr.net/npm/i18next@25.5.2/i18next.min.js"></script> |
| 80 | +``` |
| 81 | + |
| 82 | +## Struttura File |
| 83 | + |
| 84 | +``` |
| 85 | +discovery-page/ |
| 86 | +├── README.md |
| 87 | +├── disco.html |
| 88 | +├── js/ |
| 89 | +│ ├── eid-cards-loader.js |
| 90 | +│ └── spid-idps-default.json |
| 91 | +├── locales/ |
| 92 | +│ ├── eid-it.json |
| 93 | +│ └── eid-en.json |
| 94 | +├── img/ # Loghi specifici (eIDAS, CNS, IDEM, gestori SPID) |
| 95 | +├── cie/cie_white.svg |
| 96 | +├── it-wallet/wallet_icon.svg |
| 97 | +└── spid/ # Pulsante e script SPID (favicon in ../shared-ui/spid/) |
| 98 | +
|
| 99 | +../shared-ui/ # Asset condivisi con selection e QR page (vedi README) |
| 100 | +``` |
| 101 | + |
| 102 | +## Libreria di Riferimento |
| 103 | + |
| 104 | +Questo template è basato su [Bootstrap Italia](https://italia.github.io/bootstrap-italia/), che fornisce componenti conformi alle linee guida di design per i servizi web della Pubblica Amministrazione italiana. |
| 105 | + |
| 106 | +## Accessibilità |
| 107 | + |
| 108 | +La pagina è progettata per rispettare gli standard WCAG 2.1 livello AA: contrasto adeguato, navigazione da tastiera, focus visibile, ruoli ARIA e annunci per screen reader. |
| 109 | + |
| 110 | +## Licenza |
| 111 | + |
| 112 | +Questo componente fa parte delle risorse ufficiali del Sistema IT-Wallet ed è distribuito secondo la licenza del progetto principale. |
0 commit comments