Utvidet UI

Du kan utvide login brukergrensesnitt (UI) flyten med egendefinerte login-sider bygget med dynamiske elementer. De utvidede UI-ene støtter fullt ut culture og flere språk. Det er mulig å lage flere egendefinerte UI-er med ulike dynamiske elementer. Hver utvidet UI-side kan valgfritt kalle et API. Hvis et API kalles, legges de returnerte claimene til i claims-samlingen; ellers legges inputverdiene til som output claim type definert på de dynamiske elementene.

De dynamiske elementene består av faste felt, et tilpassbart felt og både tekst- og HTML-innholdselementer. Med dette kan du enkelt be om brukerens navn, bruke ett eller flere selvdefinerte felt og vise en logo og en lenke på en utvidet UI-side.

Utvidede UI-er kan legges til følgende autentiseringsmetoder i fanen Extended UI; login, external login, OpenID Connect, SAML 2.0 og environment link.

Velg utvidet UI-side Du velger en utvidet UI-side i loginflyten ved å legge til claim typen open_extended_ui med navnet på den utvidede UI-siden i first-level claim transforms. I en SAML 2.0 autentiseringsmetode velges den utvidede UI-siden med den tilsvarende SAML 2.0 claim http://schemas.foxids.com/ws/identity/claims/openextendedui i first-level claim transforms. Deretter kan utvidede UI-sider velges i de utvidede UI claim transforms ved å legge til claim typen open_extended_ui (kun JWT claim) med neste utvidede UI-sidenavn.

Eksempel Denne eksempel-siden ber brukeren om å oppgi sitt personnummer (vist på to språk). Eksempel-utvidet UI legger inputverdien til claims-samlingen som claim typen social_security_number. I et virkelig scenario ville du sannsynligvis kalle et API for å validere personnummeret. 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 konfigurert i en autentiseringsmetode i fanen Extended UI med tre elementer.

Configure Extended UI with Social security number input field

Den utvidede UI-en kan tilpasses med CSS i login autentiseringsmetoden kalt Default login, med mindre du lager en annen login-metode og bruker den i stedet. Det er stor fleksibilitet i hvordan dialogene kan utformes.

Oversettelser

Tekstene (og feilmeldingene) brukt i dynamiske elementer oversettes automatisk hvis de er definert som globale tekster med oversettelser. Ellers opprettes et textelement automatisk i environment der du kan legge til oversettelser. Hvis du vil støtte flere språk, bør du opprette tekstene på engelsk og legge til oversettelser.

Du finner tekstene og oversettelsene i fanen Settings og deretter fanen Texts. Configure Extended UI with Social security number input field

Implementer API

Hver utvidet UI-side kan kalle et API med resultatet fra de dynamiske elementene og valgte claims. API-et kan deretter validere brukerinput og enten ved suksess returnere claims eller en feilmelding til brukeren.

Du må implementere et enkelt API som FoxIDs kaller når brukeren sender inn siden. Se gjerne sample code.

API-et har en base URL, og funksjonaliteten er delt inn i mapper. For tiden støttes kun validate-mappen (funksjonalitet) for å validere de dynamiske elementene og valgte claims. Andre mapper kan bli lagt til 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 kaller API-et ditt fra IP-adressen 57.128.60.142. Utgående IP-adresse kan endres og flere kan legges til over tid.

Request

API-kallet sikres med HTTP Basic authentication, der FoxIDs sender ID external_extended_ui som brukernavn og den konfigurerte secret som passord.

API-et kalles 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 suksess skal API-et returnere HTTP code 200 og en liste med claims (listen kan være tom).

For eksempel de gyldige inputverdiene som claims:

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

Error API-et må returnere HTTP code 401 (Unauthorized) og en error (påkrevd) hvis Basic authentication avvises. Legg til valgfritt en feilmelding i ErrorMessage.

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

API-et kan returnere HTTP code 400 (401 og 403 støttes også), og en error (påkrevd) hvis input avvises. Legg til valgfritt en feilmelding til brukeren i UiErrorMessage og en feilmelding i ErrorMessage. UiErrorMessage oversettes som en tekst og bør være på engelsk hvis du vil støtte flere språk.

En generell valideringsfeil:

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

En valideringsfeil knyttet til et dynamisk element via 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 feil oppstår, bør API-et returnere HTTP code 500 eller en annen passende feilkode. Det anbefales å legge til en teknisk feilmelding i ErrorMessage. Feilmeldingen kan senere finnes i FoxIDs logger.

Feilmeldinger returnert fra API-et i ErrorMessage vises IKKE til brukeren; de logges bare.

API Sample

Sample ExternalExtendedUiApiSample viser hvordan du implementerer API-et i ASP.NET Core.

Du kan bruke denne Postman collection til å kalle og teste API-et ditt med Postman.

Configure

Konfigurer en utvidet UI-side i en autentiseringsmetode for å kalle API-et ditt i FoxIDs Control Client.

Naviger til fanen Authentication og velg autentiseringsmetoden, og velg deretter fanen Extended UI. Finn den utvidede UI-siden og konfigurer API-et.

Configure extended UI API

Valgfritt velg claims som skal sendes til API-et.
Legg til base API URL uten validate-mappen i API URL
Legg til API secret
Legg til en generisk feilmelding som vises til brukeren hvis API-et returnerer en feil uten UiErrorMessage