Autenticazione
La schermata di autenticazione viene presentata all’utente di default la prima volta che apre l’app. Per agevolare l’accesso evitando l’autenticazione Spid ad ogni apertura del servizio, alcune app possono predisporre un codice di sicurezza da otto cifre dopo aver fatto la prima autenticazione.
L’interfaccia di queste schermate corrisponde al servizio di autenticazione regionale IdPC
A - Selezione della modalità di autenticazione
B - Inserimento del codice di sicurezza
Accesso
Sceglie la modalità
Accedi con la tua identità digitale
Oppure utilizza altri metodi di accesso
Codice di sicurezza
Login veloce
Codice di Sicurezza
Inserisci il codice di sicurezza
Per il background utilizzare la classe css bg-device-white
.
<h5 class= "f-bold" > Accesso</h5>
<p> Sceglie la modalità</p>
<div class= "card-spid" >
<div class= "card-wrapper" >
<div class= "card" >
<div class= "card-body" >
<div class= "card-title" >
<span> Accedi con la tua identità digitale</span>
</div>
<div class= "card-text it25-btn" >
<button class= "btn btn-spid btn-icon btn-me" >
<div class= "spid me-2" >
<svg class= "icon" >
<use href= "/bootstrap-lombardia/dist/svg/sprites.svg#it-user" ></use>
</svg>
</div>
<span class= "enter" > Entra con SPID</span>
</button>
</div>
<div class= "card-text it25-img py-2" >
<img src= "/bootstrap-lombardia/dist/assets/img/agis-mobile.png" alt= "spid" />
</div>
<div class= "it25-divider" ></div>
<div class= "card-text it25-accesso-code" > Oppure utilizza altri metodi di accesso</div>
</div>
</div>
</div>
</div>
<h5 class= "f-bold" > Codice di sicurezza</h5>
<p> Login veloce</p>
<div class= "card-auth" >
<div class= "card-wrapper card-space" >
<div class= "card card-bg" >
<div class= "card-body" >
<h3 class= "card-title" >
<span> Codice di Sicurezza </span>
</h3>
<div class= "card-text it25-img py-2" >
<svg class= "icon icon-lg icon-white" >
<use href= "/bootstrap-lombardia/dist/svg/sprites.svg#it-telephone-key" ></use>
</svg>
</div>
<div class= "card-text it25-title py-3" > Inserisci il codice di sicurezza</div>
<div class= "card-input" >
<input type= "text" data-bs-input id= "inputNumber13" name= "inputNumber13" aria-label= "numero di codice" />
<a class= "simple-link" href= "#" > Vuoi reimpostare il codice? </a>
</div>
<div class= "it-card-footer" >
<a class= "btn btn-primary" href= "#" > Accedi</a>
</div>
</div>
</div>
</div>
</div>