SPID SP ACCESS BUTTON - pagina di esempio

Versione GET

Versione POST

  • Maggiori informazioni
  • Non hai SPID?
  • Serve aiuto?
  • Codice di esempio

    Caricare gli stili e i javascript necessari nella sezione header
     1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
    <!DOCTYPE html>
        <html lang="it">
          <head>
            <meta charset="utf-8" />
            <!-- Load spid-button style and font -->
            <link rel="stylesheet" href="css/spid-sp-access-button.min.css" />
            <script type="text/javascript"src="js/jquery.min.js"></script>
            <script type="text/javascript"src="js/spid-sp-access-button.min.js"></script>
            <!-- Add only if you want load remotally the idps list -->
            <script src="./js/spid-idps.js"></script>
        

    Aggiungere lo SPID button (grandezza s - metodo GET)
     
         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
    
        <a href="#" class="italia-it-button italia-it-button-size-s button-spid" spid-idp-button="#spid-idp-button-small-get" aria-haspopup="true" aria-expanded="false">
        <span class="italia-it-button-icon">
            <img src="img/spid-ico-circle-bb.svg" onerror="this.src='img/spid-ico-circle-bb.png'; this.onerror=null;" alt=""/> 
        </span>
        <span class="italia-it-button-text"> Entra con SPID </span>
        </a>
        <div id="spid-idp-button-small-get" class="spid-idp-button spid-idp-button-tip spid-idp-button-relative">
            <ul id="spid-idp-list-small-root-get" class="spid-idp-button-menu" aria-labelledby="spid-idp" data-spid-remote>
                <li><a class="dropdown-item" href="https://www.spid.gov.it">Maggiori informazioni</a></li>
                <li><a class="dropdown-item" href="https://www.spid.gov.it/richiedi-spid">Non hai SPID?</a></li>
                <li><a class="dropdown-item" href="https://www.spid.gov.it/serve-aiuto">Serve aiuto?</a></li>
            </ul> 
        </div> 
        

    La presenza dell'attributo data-spid-remote nel tag ul, permette di ottenere la lista degli IDP da una URL remota
        1
            <ul id="spid-idp-list-small-root-get" class="spid-idp-button-menu" aria-labelledby="spid-idp" data-spid-remote>