Popolare un form con dati provenienti da API

Per utilizzare endpoint API esterni è necessario fare inizialmente riferimento a OpenCity Italia, in modo tale da sbloccare il CSP (Content Security Policy) nel caso in cui l'Ente intenda utilizzare API non protette da autenticazione sia API protette da autenticazione.

La funzione può essere utilizzata per recuperare, all'interno del modulo, dati provenienti da un'altra istanza.

Come admin puoi configurare alcuni campi (es. Select o Textfield) in modo tale che vengano compilati con dati presi dalle API.

Configurare una select con dati presi dalle API

Nella sezione "Data" del componente, configura la voce "Data source type" con l'opzione URL

Successivamente inserisci l'endpoin API da utilizzare alla voce "Data source url"

Alla voce "Storage type" indica il dato da riportare nella select (è consigliabile usare l'opzione "autotype", in modo da predere tutto l'oggetto restituito dall'API)

Infine, scegli il valore da mostrare alla voce "Item template".

È consigliabile compilare anche il campo "Limit" e indicare un numero massimo di item da visualizzare.

Più alto è il valore indicato più tempo la select ci metterà a caricare gli item; è quindi consigliabile indicare un massimo di 50

Configurare un text field con i dati presi da API

Nella sezione "Data" del componente, compila la voce "Calculated value" con un codice Json contentente l'URL API:

Qui trovi un codice di esempio in cui vengono richiamati i dati di un'utenza TARI basandoci sul codice fiscale del richiedente

async function get_data(url, token) {
    try {
        const response = await fetch(url, {
            method: 'GET', 
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`)
        }

        const data = await response.json() // Parse JSON response
        instance.setValue(data.contract_code)
    } catch (error) {
        instance.setValue("ERRORE")
        console.error('Error fetching data:', error)
        throw error // Optionally re-throw the error for further handling
    }
}

if (!value && data?.applicant?.data.fiscal_code?.data?.fiscal_code && data?.token) {
  get_data(`https://govway.comune.bugliano.pi.it/govway/Ente/TARI/v1/getContractCode.php?cf=${data.applicant.data.fiscal_code.data.fiscal_code}`, data.token)
}

API non protette da autenticazione

Per popolare un form, puoi utilizzare API non protette da autenticazione.

In questo caso, oltre allo sblocco di CSP da parte di OpenCity Italia, è necessario che le API utilizzate siano pubbliche e raggiungibili.

API protette da autenticazione

Dataset e micro servizi esterni alla piattaforma possono essere facilmente integrati tramite il flusso di autenticazione basato su JWT (JSON Web Token) e JWKS (JSON Web Key Set)

Diagramma del flusso di autenticazione con JWT e JWKS

Questo flusso di autenticazione prevede alcuni passaggi chiave e interazioni tra:

• client (browser dell'utente)

• area personale

• micro servizio esterno

Di seguito il processo punto per punto:

1. Il client richiede il token

Il client invia una richiesta all'area personale per ottenere un JWT, spesso includendo le credenziali dell'utente o altre forme di autorizzazione.

Come descritto nella sezione Single Sign-On è possibile per un utente autenticato richiedere un token di autenticazione per la propria sessione.

Questa operazione può essere effettuata facendo una chiamata alle API:

https://servizi.comune.bugliano.pi.it/lang/api/session-authservizi.comune.bugliano.pi.it

API per ottenere il token JWT come utente loggato

oppure come utente non autenticato effettuando una chiamata POST alle API

https://servizi.comune.bugliano.pi.it/lang/api/authservizi.comune.bugliano.pi.itservizi.comune.bugliano.pi.it

API per ottenere il token JWT passando le credenziali

curl --request POST \
  --url https://servizi.comune.bugliano.pi.it/lang/api/auth \
  --header 'Content-Type: application/json' \
  --data '{
	"username": "username",
	"password": "password"
}'

2. L'area personale rilascia il token

L'area personale autentica il client, genera un JWT e lo firma con una chiave privata.

Il token viene quindi restituito al client.

{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InNkYy1xYSJ9.eyJpYXQiO.c2VybmFtZSI6ImFkbWluIiwiaWQiOiI2ZmZkZWRkZi04NmZhLTRjYmEtODUzNC05YTBlNjZmZTNlYmYiLCJ0ZW[...]5hbnRfaWQiOiI2MGUzNWYwMi0xNTA5LTQwOGMtYjEwMS0zYjFhMjgxMDkzMjkifQ.lFe0MR-LAj[...]RjoVvqwk3OX23T642ETu8PUy8sFaVRf1oM1qAnPhLEpnOcrIQY65mpKw6mrJ1rzZM5OVvEeOc4xxmtgcBOfMEBJo_Dw1pMfZHOv2S1S50Zr9XNxk0LcfWjXGdC7wy81eF7UuF-3cX9W"
}

3. Il client richiede la risorsa al micro servizio esterno:

Il client invia una richiesta al micro servizio esterno per accedere a una risorsa protetta, includendo il JWT nell'intestazione Authorization.

curl --request GET \
  --url '{Url API micro servizio esterno}' \
  --header 'Authorization: Bearer {JWT Token}'

4. Il micro servizio esterno convalida il token

Per verificare la validità del token il micro servizio esterno deve:

• Estrarre il JWT dalla richiesta

• Recuperare il JWKS dall'area personale, il JWKS contiene le chiavi pubbliche necessarie per verificare la firma del JWT.

• Verificare la firma del JWT e convalidare le sue richieste

L'area personale espone il JWKS all'indirizzo:

https://api.stanzadelcittadino.it/.well-known/jwks.json

5. Accesso concesso/negato:

In base alla validità del JWT il micro servizio esterno concede o nega l'accesso alla risorsa richiesta.

Oltre alla validità del token si possono verificare le affermazioni in esso contenute.

Il payload del token prodotto dall'area personale presenta delle informazioni utili a capire se quello specifico utente oltre ad avere un token valido ha i permessi per ottenere la risorsa richiesta.

Di seguito un esempio di payload del token

{
  "iat": 1718278670,
  "exp": 1719142670,
  "roles": [
    "ROLE_CPS_USER",
    "ROLE_USER"
  ],
  "username": "BNRMHL75C06G702B",
  "id": "5b00796e-ef10-4c98-b9f5-b0f7ffd7a17d",
  "tenant_id": "60e35f02-1509-408c-b101-3b1a28109329"
}

Un esempio pratico

Qui trovi un esempio dettagliato di un'integrazione di un modulo Opencity Italia che attinge a una API protetta mediante l'API gateway opensource GovWay di Link.it

Esempio con GovWay | Sviluppatori e partner tecnologici | Opencity Italiadocs.opencityitalia.it