Ändringshistorik

Datum	Version	Kommentar
2018-11-28	1.0	Omgjord för webb
2018-12-10	1.1	Komplettering av publiceringinformaion

Kundanpassad GUI på IdP

Inledning

I produktion kan anpassning av inloggningssidan göras för varje SP. Om Kund ej önskar detta får man en defaultsida med bild/logotype.

Defaultsida: En bild i lämplig storlek i png-format för kunden läggs till vänsterjusterat högst upp.

Exempel på kundanpassad sida

Mall för Kundanpassad GUI

Här kan du ladda ner den mall som används för att anpassa Ert GUI:

CGI_standardprofil2023

Vad kan anpassas?

I princip kan samtliga sidor anpassas, dock behövs övergripande strukturen vara kvar. Ett antal script behöver kunna laddas samt vissa texter är dynamiska.

Detaljerad information

Grundstruktur

Följande grundstruktur finns i standardmallen för den grafiska profilen.

• css - katalog för css-filer
• css/eid.css - grundläggande css för profilen
• eid - katalog för sidor som hanterar NetID-baserade e-legitimationer (Ej NetID Access)
• eid/_efos_auth.html - sida för hantering av EFOS-legitimationer
• eid/_netid_auth.html - sida för hantering av Telia-legitimationer
• eid/_siths_auth.html - sida för hantering av SITHS-legitimationer
• eid/_eid_error.html - sida för presentation av felmeddelanden
• grp - katalog för sidor som hanterar övriga e-legitimationer
• grp/freja - katalog för sidor som berör Freja eID+
• grp/nias - katalog för sidor som berör NIAS (NetID Access)
• grp/_grp_enter_ssn.html - BankID, sida för att mata in personnummer
• grp/_grp_error.html - BankID, sida för presentation av felmeddelanden
• grp/_grp_poll.html - BankID, sida för att vänta på svar från klienten vid BankID på annan enhet
• grp/_grp_poll_same_device.html - BankID, sida för att autostarta klienten och vänta på svar vid BankID på samma enhet
• grp/pollinfo.json - behövs för skriptens funktion, modifiera ej
• images - katalog för bilder
• images/arrow.svg - pil för knappar
• images/lang-en.png - engelsk flagga för språkstöd
• images/lang-sv.png - svensk flagga för språkstöd
• include - katalog för inkluderade filer, se information nedan hur inkluderingar fungerar
• include/footer.html - sidfot för samtliga sidor
• include/header.html - sidhuvud för sidor som är tvåspråkiga
• include/header_nolang.html - sidhuvud för övriga sidor
• 403.html - felsida vid access denied, se felsidor nedan
• 500.html - felsida vid serverfel, se felsidor nedan
• _generic_error.html - felsida vid övriga fel, se felsidor nedan
• _logincancel.html - felsida vid avbruten autentisering, se felsidor nedan
• _loginfail.html - felsida vid misslyckad autentisering, se felsidor nedan
• _loginfailattribute.html - felsida vid saknad information i autentisering, används för väntrum
• _saml_redirect.html - sida som skickar svaret tillbaka till service provider
• contact_support-en.html - information om kontaktvägar till utgivare, på engelska
• contact_support-sv.html - information om kontaktvägar till utgivare, på svenska
• cookieinfo-en.html - information om kakor, på engelska
• cookieinfo-sv.html - information om kakor, på svenska
• index.html - sida för presentation av autentiseringsmetoder

Inkluderade filer

Den grafiska profilen är uppbyggd genom att inkludera header och footer på alla sidor för att utseendet enkelt ska se lika ut på alla sidor. Inkluderingar görs via ett speciellt nyckelord som heter PARM{include:}. Exempelvis så ser inkluderingen av footersidan ut såhär: PARM{include:/include/footer.html}.

Genom att använda inkluderingar på delar av de sidor som ser lika ut så minimeras förändringarna och risken att glömma ändra på någon sida försvinner. Normalt är det bara header och footer som inkluderas på det här sättet.

Felsidor

Det finns ett antal felsidor i den grafiska profilen som kan presenteras vid olika tillfällen. Det finns också möjlighet att göra konfiguration på för en SP att inte visa felsidor utan skicka ett svar tillbaka till service providern med en sk. AuthnFailed. I det fallet så kommer inte alla felsidor att visas utan användaren hamnar direkt tillbaka till sin service provider.

Exempel på fel

1. Fel vid autetisering med vald autentiseringsmetod -> Felsidan för resp. metod visas. Är det BankID visas _grp_error.html. Är det en NetID-baserad e-legitimation visas _eid_error.html
2. Användaren avbryter inloggning -> Sidan _authcancel.html visas om inte den aktuella service providern har konfiguration att avbryt ska skickas tillbaka, då skickas användaren med en SAML AuthnFailed till sin service provider
3. Användare använder bokmärke sparat på autentiseringssida eller alternativt trycker "bakåt" på fel ställe -> Sidan _generic_error.html visas. Denna sida kan dessutom komma från en annan grafisk profil då vi i det läget inte kan veta varifrån användaren kommer.

Skript

Många av sidorna i den grafiska profilen använder sig av javaskript. Dessa javaskript är till för att metoderna ska fungera korrekt. Det är mycket viktigt att skripten fungerar för att autentiseringen ska fungera. Vissa skript har även krav på innehåll i sidorna för funktioner som autostart och informationsförmedling.

Skriptkrav

Alla autentiseringmetoder behöver en html-tagg med id=infotext för att kunna presentera information om förloppet av en autentisering. De behöver också en tagg med id=nojavascript för att fungera som den ska.

Sidan för _grp_poll_same_device.html kräver också en tom iframe-tagg med id=appframe för att kunna autostarta BankID-appen.

Enklast är att titta på sidorna för respektive metod i mallen för att förstå hur det är tänkt att fungera.

Exempel på autentiseringsflöde

Autentisering via lista av metoder

1. En SP skickar användaren till autentiseringstjänsten, index.html laddas och visar listan med autentiseringsmetoder
2. Användaren klickar på "BankID på annan enhet" och då laddas sidan grp/_grp_enter_ssn.html där användaren kan ange sitt personnummer
3. Efter personnumret är angivet hamnar användaren på sidan grp/_grp_poll.html och uppmanas att starta sin BankID-app
4. Efter genomförd autentisering skickas användaren till _saml_redirect.html som skickar vidare SAML-biljetten till serviceprovidern

Autentisering direkt med metod (BankID på samma enhet)

1. En SP skickar användaren till autentiseringstjänsten och begär önskad metod. grp/_grp_poll_same_device.html laddas och autostartar BankID-appen
2. Efter genomförd autentisering skickas användaren till _saml_redirect.html som skickar vidare SAML-biljetten till serviceprovidern

Autentisering direkt med metod (Telia)

1. En SP skickar användaren till autentiseringstjänsten och begär önskad metod. eid/_netid_auth.html laddas och försöker autostarta NetID-appen
2. Efter genomförd autentisering skickas användaren till _saml_redirect.html som skickar vidare SAML-biljetten till serviceprovidern

Publicering och test

För att kunna testa utseendet och funktionaliteten i den grafiska profilen så rekommenderar vi att den först publiceras i vår testmiljö. För att kunna publicera den i vår testmiljö behöver kunden ha en egen SP konfigurerad i vår testmiljö. Det finns möjlighet att testa grafiska profiler utan egen SP men då kan testautentiseringar inte genomföras.

För att publicera en grafisk profil skicka in en beställning och bifoga den grafiska profilen i beställningen. Det är viktigt att vi får in beställningar från en behörig beställare för den aktuella kunden.