SPID access button integrated in Keycloak theme
After copying over the official SPID button resources to your theme
- Images https://github.com/italia/spid-sp-access-button/tree/master/src/production/img
- CSS https://github.com/italia/spid-sp-access-button/tree/master/src/production/css
- Fonts https://github.com/italia/spid-sp-access-button/tree/master/src/production/fonts
- JS https://github.com/italia/spid-sp-access-button/tree/master/src/production/js
in your customized Keycloak theme themes/<yourtheme>/login/login.ftl this code will make sure that
- only enabled SPID IdPs are shown
- if no SPID IdP is enabled, the SPID button is not shown at all
<#elseif section = "socialProviders" >
<#if realm.password && social.providers??>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
<hr/>
<h4>${msg("identity-provider-login-label")}</h4>
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<#if p.providerId != "spid-saml" && p.providerId != "cieid-saml">
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
<#else>
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
</#if>
</a>
</#if>
</#list>
</ul>
<#list social.providers as p>
<#if p.providerId = "cieid-saml">
<a href="${p.loginUrl}" class="italia-it-button italia-it-button-size-m button-spid" aria-haspopup="true" aria-expanded="false">
<img src="${url.resourcesPath}/img/entra_con_cie.svg" alt="" />
</a>
</#if>
</#list>
<div id="spidWrapper">
<a href="#" class="italia-it-button italia-it-button-size-m button-spid" spid-idp-button="#spid-idp-button-xlarge-get" aria-haspopup="true" aria-expanded="false">
<span class="italia-it-button-icon"><img src="${url.resourcesPath}/img/spid-ico-circle-bb.svg" onerror="this.src='${url.resourcesPath}/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-xlarge-get" class="spid-idp-button spid-idp-button-tip spid-idp-button-relative">
<ul id="spid-idp-list-xlarge-root-get" class="spid-idp-button-menu" aria-labelledby="spid-idp">
<li class="spid-idp-button-link" data-idp="spid-aruba">
<a href="#"><span class="spid-sr-only">Aruba ID</span><img src="${url.resourcesPath}/img/spid-idp-arubaid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-arubaid.png'; this.onerror=null;" alt="Aruba ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-infocert">
<a href="#"><span class="spid-sr-only">Infocert ID</span><img src="${url.resourcesPath}/img/spid-idp-infocertid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-infocertid.png'; this.onerror=null;" alt="Infocert ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-intesa">
<a href="#"><span class="spid-sr-only">Intesa ID</span><img src="${url.resourcesPath}/img/spid-idp-intesaid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-intesaid.png'; this.onerror=null;" alt="Intesa ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-lepida">
<a href="#"><span class="spid-sr-only">Lepida ID</span><img src="${url.resourcesPath}/img/spid-idp-lepidaid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-lepidaid.png'; this.onerror=null;" alt="Lepida ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-namirial">
<a href="#"><span class="spid-sr-only">Namirial ID</span><img src="${url.resourcesPath}/img/spid-idp-namirialid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-namirialid.png'; this.onerror=null;" alt="Namirial ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-poste">
<a href="#"><span class="spid-sr-only">Poste ID</span><img src="${url.resourcesPath}/img/spid-idp-posteid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-posteid.png'; this.onerror=null;" alt="Poste ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-sielte">
<a href="#"><span class="spid-sr-only">Sielte ID</span><img src="${url.resourcesPath}/img/spid-idp-sielteid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-sielteid.png'; this.onerror=null;" alt="Sielte ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-register.it">
<a href="#"><span class="spid-sr-only">SPIDItalia Register.it</span><img src="${url.resourcesPath}/img/spid-idp-spiditalia.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-spiditalia.png'; this.onerror=null;" alt="SpidItalia" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-teamsystem">
<a href="#"><span class="spid-sr-only">TeamSystem ID</span><img src="${url.resourcesPath}/img/spid-idp-teamsystemid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-teamsystemid.png'; this.onerror=null;" alt="TeamSystem ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-tim">
<a href="#"><span class="spid-sr-only">Tim ID</span><img src="${url.resourcesPath}/img/spid-idp-timid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-timid.png'; this.onerror=null;" alt="Tim ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-etnahitech">
<a href="#"><span class="spid-sr-only">Etna ID</span><img src="${url.resourcesPath}/img/spid-idp-etnaid.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-etnaid.png'; this.onerror=null;" alt="Etna ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-infocamere">
<a href="#"><span class="spid-sr-only">InfoCamere</span><img src="${url.resourcesPath}/img/spid-idp-infocamere.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-infocamere.png'; this.onerror=null;" alt="InfoCamere ID" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-intesi-group">
<a href="#"><span class="spid-sr-only">Intesi Group</span><img src="${url.resourcesPath}/img/spid-idp-intesi-group.svg" onerror="this.src='${url.resourcesPath}/img/spid-idp-intesi-group.png'; this.onerror=null;" alt="Intesi Group" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-validator">
<a href="#"><span class="spid-sr-only">SPID Validator</span><img src="" alt="SPID Validator" /></a>
</li>
<li class="spid-idp-button-link" data-idp="spid-demo">
<a href="#"><span class="spid-sr-only">SPID Demo</span><img src="" alt="SPID Demo" /></a>
</li>
<li class="spid-idp-support-link" data-spidlink="info">
<a href="https://www.spid.gov.it">Maggiori informazioni</a>
</li>
<li class="spid-idp-support-link" data-spidlink="rich">
<a href="https://www.spid.gov.it/richiedi-spid">Non hai SPID?</a>
</li>
<li class="spid-idp-support-link" data-spidlink="help">
<a href="https://www.spid.gov.it/serve-aiuto">Serve aiuto?</a>
</li>
</ul>
</div>
<script src="${url.resourcesPath}/js/jquery.min.js"></script>
<script src="${url.resourcesPath}/js/spid-sp-access-button.min.js"></script>
<script>
var SPID_KEYCLOAK = {
spidproviders: {
<#list social.providers as p>
<#if p.providerId = "spid-saml">
"${p.alias}": "${p.loginUrl?no_esc}",
</#if>
</#list>
},
randomizeSpidLinks: function() {
var rootList = $("#spid-idp-list-xlarge-root-get");
var idpList = rootList.children(".spid-idp-button-link");
var lnkList = rootList.children(".spid-idp-support-link");
while (idpList.length) {
rootList.append(idpList.splice(Math.floor(Math.random() * idpList.length), 1)[0]);
}
rootList.append(lnkList);
},
updateSpidLinks: function() {
if (SPID_KEYCLOAK.spidproviders.length == 0) {
$('#spidWrapper').remove();
return;
}
var countIdp = 0;
$('li.spid-idp-button-link a').each(function(i, item) {
var link = $(item);
var idpId = link.parent().attr('data-idp');
if (undefined != SPID_KEYCLOAK.spidproviders[idpId]) {
link.attr('href', SPID_KEYCLOAK.spidproviders[idpId]);
countIdp++;
} else {
link.parent().remove();
}
});
if (countIdp == 0) {
$('#spidWrapper').remove();
}
}
};
$(document).ready(function(){
SPID_KEYCLOAK.randomizeSpidLinks();
SPID_KEYCLOAK.updateSpidLinks();
});
</script>
</div>
<p class="text-center">SPID è il sistema di accesso che consente di utilizzare, con un'identità digitale unica, i servizi online della Pubblica Amministrazione e dei privati accreditati. Se sei già in possesso di un'identità digitale, accedi con le credenziali del tuo gestore. Se non hai ancora un'identità digitale, richiedila ad uno dei gestori.</p>
</div>
</#if>
</#if>also remember to include CSS in themes/<yourtheme>/login/theme.properties
styles=css/login.css css/tile.css css/spid-sp-access-button.min.css