Utökat UI

Du kan utöka login användargränssnitt (UI) flödet med anpassade login-sidor byggda med dynamiska element. De utökade UI:erna stödjer culture och flera språk fullt ut. Det är möjligt att skapa flera anpassade UI:er med olika dynamiska element. Varje utökad UI-sida kan valfritt anropa ett API. Om ett API anropas läggs de returnerade claims till i claims-samlingen; annars läggs inmatningsvärdena till som den output claim type som definierats på de dynamiska elementen.

De dynamiska elementen består av fasta fält, ett anpassningsbart fält och både text- och HTML-innehållselement. Med detta kan du enkelt be om användarens namn, använda ett eller flera självdefinierade fält och visa en logotyp och en länk på en utökad UI-sida.

Utökade UI:er kan läggas till följande autentiseringsmetoder i fliken Extended UI; login, external login, OpenID Connect, SAML 2.0 och environment link.

Välj utökad UI-sida Du väljer en utökad UI-sida i login-flödet genom att lägga till claim-typen open_extended_ui med den utökade UI-sidans namn i first-level claim transforms. I en SAML 2.0 autentiseringsmetod väljs den utökade UI-sidan med motsvarande SAML 2.0 claim http://schemas.foxids.com/ws/identity/claims/openextendedui i first-level claim transforms. Därefter kan utökade UI-sidor väljas i de utökade UI claim transforms genom att lägga till claim-typen open_extended_ui (endast JWT claim) med nästa utökade UI-sidas namn.

Exempel Denna exempel-sida ber användaren att ange sitt personnummer (visat på två språk). Exempel-utökat UI lägger till inmatningsvärdet i claims-samlingen som claim-typen social_security_number. I ett verkligt scenario skulle du sannolikt anropa ett API för att validera personnumret. På engelska: Extended UI with Social security number field in English

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

Exempelsidan är konfigurerad i en autentiseringsmetod i fliken Extended UI med tre element.

Configure Extended UI with Social security number input field

Det utökade UI:t kan anpassas med CSS i login autentiseringsmetoden som heter Default login, om du inte skapar en annan login-metod och använder den i stället. Det finns stor flexibilitet i hur dialogerna kan utformas.

Översättningar

Texterna (och felmeddelandena) som används i dynamiska element översätts automatiskt om de är definierade som globala texter med översättningar. Annars skapas ett textelement automatiskt i environment där du kan lägga till översättningar. Om du vill stödja flera språk bör du skapa texterna på engelska och lägga till översättningar.

Du hittar texterna och översättningarna i fliken Settings och därefter fliken Texts. Configure Extended UI with Social security number input field

Implementera API

Varje utökad UI-sida kan anropa ett API med resultatet från de dynamiska elementen och valda claims. API:et kan sedan validera användarinmatning och antingen vid framgång returnera claims eller ett felmeddelande till användaren.

Du måste implementera ett enkelt API som FoxIDs anropar när användaren skickar sidan. Se gärna sample code.

API:et har en base URL och funktionaliteten är uppdelad i mappar. För närvarande stöds endast validate-mappen (funktionalitet) för att validera de dynamiska elementen och valda claims. Andra mappar kan läggas till senare.

Om base URL för API:et är https://somewhere.org/mystore är URL:en för validate-mappen https://somewhere.org/mystore/validate.

FoxIDs Cloud anropar ditt API från IP-adressen 57.128.60.142. Utgående IP-adress kan ändras och fler kan läggas till över tid.

Request

API-anropet säkras med HTTP Basic authentication, där FoxIDs skickar ID external_extended_ui som användarnamn och det konfigurerade secret som lösenord.

API:et anropas med HTTP POST och en JSON body.

Detta är en request JSON body med två dynamiska element och två 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 Vid framgång ska API:et returnera HTTP code 200 och en lista med claims (listan kan vara tom).

Till exempel de giltiga inmatningsvärdena som claims:

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

Error API:et måste returnera HTTP code 401 (Unauthorized) och en error (krävs) om Basic authentication avvisas. Lägg valfritt till en felbeskrivning i ErrorMessage.

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

API:et kan returnera HTTP code 400 (401 och 403 stöds också) och en error (krävs) om inmatningen avvisas. Lägg valfritt till ett felmeddelande till användaren i UiErrorMessage och en felbeskrivning i ErrorMessage. UiErrorMessage översätts som text och bör vara på engelska om du vill stödja flera språk.

Ett generellt valideringsfel:

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

Ett valideringsfel kopplat till ett dynamiskt element via elementnamnet:

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

Om andra fel uppstår ska API:et returnera HTTP code 500 eller annan lämplig felkod. Det rekommenderas att lägga till ett tekniskt felmeddelande i ErrorMessage. Felmeddelandet kan senare hittas i FoxIDs loggar.

Felmeddelanden som returneras från API:et i ErrorMessage visas INTE för användaren; de loggas bara.

API Sample

Sample ExternalExtendedUiApiSample visar hur du implementerar API:et i ASP.NET Core.

Du kan använda denna Postman collection för att anropa och testa ditt API med Postman.

Configure

Konfigurera en utökad UI-sida i en autentiseringsmetod för att anropa ditt API i FoxIDs Control Client.

Navigera till fliken Authentication och välj autentiseringsmetoden, välj sedan fliken Extended UI. Hitta den utökade UI-sidan och konfigurera API:et.

Configure extended UI API

Välj valfritt claims som ska skickas till API:et.
Lägg till base API URL utan validate-mappen i API URL
Lägg till API secret
Lägg till ett generiskt felmeddelande som visas för användaren om API:et returnerar ett fel utan UiErrorMessage