Udvidet UI

Du kan udvide login brugergrænsefladen (UI) flow med brugerdefinerede login sider bygget med dynamiske elementer. De udvidede UI'er understøtter fuldt ud culture og flere sprog. Det er muligt at oprette flere brugerdefinerede UI'er med forskellige dynamiske elementer. Hver udvidet UI side kan valgfrit kalde et API. Hvis et API kaldes, tilføjes de returnerede claims til claims-samlingen; ellers tilføjes inputværdierne som den output claim type, der er defineret på de dynamiske elementer.

De dynamiske elementer består af faste felter, et tilpasset felt og både tekst- og HTML-indholdselementer. Med dette kan du nemt spørge efter brugerens navn, bruge et eller flere selvdefinerede felter og vise et logo og et link på en udvidet UI side.

Udvidede UI'er kan tilføjes til følgende autentificeringsmetoder i fanen Extended UI; login, external login, OpenID Connect, SAML 2.0 og environment link.

Vælg udvidet UI side Du vælger en udvidet UI side i login flowet ved at tilføje claim typen open_extended_ui med den udvidede UI sidenavn i first-level claim transforms. I en SAML 2.0 autentificeringsmetode vælges den udvidede UI side med den tilsvarende SAML 2.0 claim http://schemas.foxids.com/ws/identity/claims/openextendedui i first-level claim transforms. Efterfølgende udvidede UI sider kan vælges i de udvidede UI claim transforms ved at tilføje claim typen open_extended_ui (kun JWT claim) med det næste udvidede UI sidenavn.

Eksempel Denne eksempel side beder brugeren om at indtaste sit CPR-nummer (vist på to sprog). Eksempel-udvidet UI tilføjer inputværdien til claims-samlingen som claim typen social_security_number. I et scenarie i den virkelige verden ville du sandsynligvis kalde et API for at validere CPR-nummeret. På engelsk: Extended UI with Social security number field in English

På dansk: Extended UI with Social security number field in Danish

Eksempel-siden er konfigureret i en autentificeringsmetode i fanen Extended UI med tre elementer.

Configure Extended UI with Social security number input field

Den udvidede UI kan tilpasses med CSS i login autentificeringsmetoden kaldet Default login, medmindre du opretter en anden login metode og bruger den i stedet. Der er ret stor fleksibilitet i hvordan dialogerne kan designes.

Oversættelser

Teksterne (og fejlmeddelelser) i dynamiske elementer oversættes automatisk, hvis de er defineret som globale tekster med oversættelser. Ellers oprettes et tekst-element automatisk i environment, hvor du kan tilføje oversættelser. Hvis du vil understøtte flere sprog, bør du oprette teksterne på engelsk og tilføje oversættelser.

Du finder teksterne og oversættelserne i fanen Settings og derefter fanen Texts. Configure Extended UI with Social security number input field

Implementer API

Hver udvidet UI side kan kalde et API med resultatet fra de dynamiske elementer og valgte claims. API'et kan derefter validere brugerinput og enten ved succes returnere claims eller en fejlmeddelelse til brugeren.

Du skal implementere et simpelt API som FoxIDs kalder når brugeren sender siden. Se venligst sample code.

API'et har en base URL, og funktionaliteten er opdelt i mapper. I øjeblikket understøttes kun validate mappen (funktionalitet) til validering af de dynamiske elementer og valgte claims. Andre mapper kan tilføjes senere.

Hvis base URL for API'et er https://somewhere.org/mystore vil URL'en for validate mappen være https://somewhere.org/mystore/validate.

FoxIDs Cloud kalder dit API fra IP-adressen 57.128.60.142. Udgående IP-adresse kan ændres, og flere kan tilføjes over tid.

Request

API-kaldet sikres med HTTP Basic authentication, hvor FoxIDs sender ID external_extended_ui som brugernavn og den konfigurerede secret som password.

API'et kaldes med HTTP POST og en JSON body.

Dette er en request JSON body med to dynamiske elementer og to claims:

{
 "elements": [
        {
            "Name": "ne5uqp5z",
            "Type": "Email",
            "ClaimType": "email",
            "Value": "some@test.org"
        },
        {
            "Name": "ktvywqwc",
            "Type": "Custom",
            "ClaimType": "my_claim",
            "Value": "123456"
        }
    ],
 "claims": [
        {
            "type": "sub",
            "value": "1b1ac05e-5937-4939-a49c-0e84a89662df"
        },
        {
            "type": "email",
            "value": "some_other@test.org"
        }
    ]
}

Response

Success Ved succes skal API'et returnere HTTP code 200 og en liste af claims (listen kan være tom).

For eksempel de gyldige inputværdier som claims:

{
    "claims": [
        {
            "type": "email",
            "value": "some@test.org"
        },
        {
            "type": "my_claim",
            "value": "123456"
        }
    ]
}

Error API'et skal returnere HTTP code 401 (Unauthorized) og en error (påkrævet) hvis Basic authentication afvises. Tilføj valgfrit en fejlbeskrivelse i ErrorMessage.

{
    "error": "invalid_api_id_secret",
    "ErrorMessage": "Invalid API ID or secret"
}

API'et kan returnere HTTP code 400 (401 og 403 understøttes også) og en error (påkrævet) hvis input afvises. Tilføj valgfrit en fejlmeddelelse til brugeren i UiErrorMessage og en fejlbeskrivelse i ErrorMessage. UiErrorMessage oversættes som en tekst og bør være på engelsk hvis du vil understøtte flere sprog.

En generel valideringsfejl:

{
    "error": "invalid",
    "ErrorMessage": "Something is not accepted.",
    "UiErrorMessage": "Please change the thing that is wrong."
}

En valideringsfejl forbundet til et dynamisk element ved elementnavnet:

{
    "error": "invalid",    
    "elements": [
           {
               "Name": "ktvywqwc",
               "ErrorMessage": "The element is not valid because of something.",
               "UiErrorMessage": "Please change the value to the correct value."
           }
       ]   
}

Hvis andre fejl opstår, skal API'et returnere HTTP code 500 eller en anden passende fejlcode. Det anbefales at tilføje en teknisk fejlmeddelelse i ErrorMessage. Fejlmeddelelsen kan senere findes i FoxIDs logs.

Fejlmeddelelser returneret fra API'et i ErrorMessage vises IKKE til brugeren; de logges kun.

API Sample

Sample ExternalExtendedUiApiSample viser hvordan man implementerer API'et i ASP.NET Core.

Du kan bruge denne Postman collection til at kalde og teste dit API med Postman.

Configure

Konfigurer en udvidet UI side i en autentificeringsmetode til at kalde dit API i FoxIDs Control Client.

Naviger til fanen Authentication og vælg autentificeringsmetoden, og vælg derefter fanen Extended UI. Find den udvidede UI side og konfigurer API'et.

Configure extended UI API

Valgfrit vælg claims som skal sendes til API'et.
Tilføj base API URL uden validate mappen i API URL
Tilføj API secret
Tilføj en generisk fejlmeddelelse, som vises for brugeren hvis API'et returnerer en fejl uden en UiErrorMessage