Naam, browsertitel, browsericoon en CSS

Weergavenaam

Naam en adres voor uw bedrijf, organisatie of systeem kunnen per omgeving worden geconfigureerd. Wanneer FoxIDs een SMS of e-mail naar een gebruiker stuurt, wordt de tekst aangepast door deze informatie toe te voegen.

De naam en het adres worden geconfigureerd in de omgevingsinstellingen in FoxIDs Control Client.

1. Selecteer Settings
2. Selecteer Environment
3. Vul de naam en het adres in
4. Klik op Update

Browsertitel, browsericoon en CSS toevoegen

De FoxIDs gebruikersinterface kan per login authenticatiemethode worden aangepast. Dit betekent dat één FoxIDs omgeving meerdere gebruikersinterface ontwerpen kan ondersteunen met verschillende browsertitels, browsericonen en CSS.

Als u geen login authenticatiemethode als toegestane authenticatiemethode in uw applicatie specificeert, wordt de standaard login authenticatiemethode gebruikt en ook wat daarin is aangepast.

FoxIDs gebruikt Bootstrap 4.6 en Flexbox CSS.

Zoek de login authenticatiemethode in FoxIDs Control Client die u wilt configureren.

1. Selecteer het tabblad Login UI
2. Voeg de tekst voor Browser Title toe
3. Voeg de Browser Icon URL toe van een externe site, ondersteunde afbeeldingsformaten: ico, png, gif, jpeg en webp U kunt ook een inline data URI plakken, zoals data:image/png;base64,..., om het pictogram direct in te sluiten
4. Voeg uw CSS toe, indien nodig sleep het veld groter
   Optioneel CSS snippets gebruiken door op de link Generate CSS snippets te klikken
5. Klik op Update

Na de update zijn titel, pictogram en CSS direct actief.

CSS voorbeelden

Verander de achtergrond en voeg logo tekst toe.

body {
    background: #ddddc0;
}

.brand-content-text {
    visibility: hidden;
}

.brand-content-text::before {
    color: #6ad54a;
    content: "Test logo";
    visibility: visible;
    display: block;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.6;
}

Het is ook mogelijk om een logo afbeelding te gebruiken.

.brand-content-text {
    display: none;
}

.brand-content-icon::before {
    content:url('https://some-external-site.com/logo.png');
}

U kunt het logo ook direct in de CSS insluiten met een data: URI om externe requests te vermijden.

.brand-content-text {
    display: none;
}

.brand-content-icon::before {
    content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9FHSMNcAAAAASUVORK5CYII=');
}

Voeg een achtergrondafbeelding toe van een externe site.

body {
    background: #FFF;
    background: url(https://some-external-site.com/image.png);
    background-position: no-repeat center center fixed;
    background-color: inherit;
    background-repeat: no-repeat;
    background-size:cover;
}

Wijzig knop- en linkkleur, in dit voorbeeld CSS naar groen.

label {
    color: #a4c700 !important;
}

.input:focus {
    outline: none !important;
    border:1px solid #a4c700;
    box-shadow: 0 0 10px #a4c700;
}

.btn-link, .btn-link:hover, a, a:hover {
    color: #a4c700;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #afc44f;
    border-color: #afc44f;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active {
    background-color: #a4c700;
    border-color: #a4c700;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #7c9600;
    border-color: #7c9600;
}

.btn-link:not(:disabled):not(.disabled):active, .btn-link:not(:disabled):not(.disabled).active, .show>.btn-link.dropdown-toggle {
    color: #a4c700;
}

.btn:focus, .form-control:focus {
    border-color: #a4c700;
    box-shadow: 0 0 0 .2rem rgba(64,78,0,.25);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(64,78,0,.25);
}

Voeg informatie toe aan het aanmeldvak.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Login met testgebruiker 'test1@foxids.com' of 'test2@foxids.com' en wachtwoord 'TestAccess!'";
}

Toon het selecteer waar in te loggen (HRD) gedeelte vóór het aanmeldvak.

.col-md.page-content {
  display: flex;
  flex-direction: column;
}

.col-md.page-content form {
  order: 2;
}

.col-md.page-content #form-filter {
  order: 1;
}

#form-filter {
  display: flex;
  flex-direction: column;
}

#form-filter .info-message-filter {
  display: none;
}

#form-filter .dividing-line {
  order: 999;
}

HTML toevoegen aan de Login UI

U kunt de login pagina wijzigen door tekst en HTML elementen toe te voegen. Er zijn placeholders voor de invoervelden (gebruikersnaam / wachtwoord enz.), knoppen, links en authenticatiekeuzes (HRD). U kunt de tekst en HTML elementen tussen de placeholders plaatsen en de volgorde van de placeholders wijzigen.

Zoek de login authenticatiemethode in FoxIDs Control Client die u wilt configureren.

1. Selecteer het tabblad Login UI
2. Selecteer Show advanced
3. Klik op Add element
4. Klik daarna bijvoorbeeld op HTML element
5. Verplaats het HTML element met de pijlen
6. Voeg bijvoorbeeld een link naar uw licentie toe
7. Klik op Update

De login pagina bevat nu uw licentielink. Voor verdere aanpassing kunt u een CSS class toevoegen aan het HTML element en een CSS class toevoegen in het CSS invoerveld.