Nazwa, tytuł przeglądarki, ikona przeglądarki i CSS

Nazwa wyświetlana

Nazwę i adres Twojej firmy, organizacji lub systemu można skonfigurować w każdym środowisku. Gdy FoxIDs wysyła SMS lub e-mail do użytkownika, treść jest dostosowywana przez dodanie tych informacji.

Nazwa i adres są konfigurowane w ustawieniach środowiska w FoxIDs Control Client.

1. Wybierz Settings
2. Wybierz Environment
3. Uzupełnij nazwę i adres
4. Kliknij Update

Dodaj tytuł przeglądarki, ikonę przeglądarki i CSS

Interfejs użytkownika FoxIDs można dostosować dla każdej metody uwierzytelniania login. Oznacza to, że jedno środowisko FoxIDs może obsługiwać wiele projektów interfejsu użytkownika z różnymi tytułami przeglądarki, ikonami przeglądarki i CSS.

Jeśli nie wskażesz metody uwierzytelniania login jako dozwolonej metody w aplikacji, użyta zostanie domyślna metoda uwierzytelniania login, wraz z jej dostosowaniami.

FoxIDs używa Bootstrap 4.6 i Flexbox CSS.

Znajdź metodę uwierzytelniania login w FoxIDs Control Client, którą chcesz skonfigurować.

1. Wybierz zakładkę Login UI
2. Dodaj tekst Browser Title
3. Dodaj Browser Icon URL z zewnętrznej strony, obsługiwane formaty: ico, png, gif, jpeg i webp Możesz też wkleić wbudowany data URI, np. data:image/png;base64,..., aby osadzić ikonę bezpośrednio
4. Dodaj własny CSS, w razie potrzeby rozciągnij pole Opcjonalnie użyj fragmentów CSS, klikając link Generate CSS snippets
5. Kliknij Update

Po aktualizacji tytuł, ikona i CSS są natychmiast aktywne.

Przykłady CSS

Zmień tło i dodaj tekst logo.

body {
    background: #ddddc0;
}

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

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

Można także użyć obrazu logo.

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

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

Możesz również osadzić obraz logo bezpośrednio w CSS za pomocą data URI, aby uniknąć zewnętrznych żądań.

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

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

Dodaj obraz tła z zewnętrznej strony.

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;
}

Zmień kolor przycisków i linków, w tym przykładzie CSS na zielony.

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);
}

Dodaj informację do pola logowania.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Zaloguj się użytkownikiem testowym 'test1@foxids.com' lub 'test2@foxids.com' i hasłem 'TestAccess!'";
}

Pokaż sekcję wyboru miejsca logowania (HRD) przed polem logowania.

.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;
}

Dodaj HTML do Login UI

Możesz zmienić stronę logowania, dodając teksty i elementy HTML. Dostępne są placeholdery dla pól wejściowych (nazwa użytkownika / hasło itp.), przycisków, linków i wyboru metody uwierzytelniania (HRD). Możesz umieszczać tekst i elementy HTML pomiędzy placeholderami i zmieniać kolejność placeholderów.

Znajdź metodę uwierzytelniania login w FoxIDs Control Client, którą chcesz skonfigurować.

1. Wybierz zakładkę Login UI
2. Wybierz Show advanced
3. Kliknij Add element
4. Następnie np. kliknij HTML element
5. Przenieś element HTML za pomocą strzałek
6. Dodaj np. link do licencji
7. Kliknij Update

Strona logowania zawiera teraz link do licencji. Aby dalej dostosować wygląd, możesz dodać klasę CSS do elementu HTML i dodać klasę CSS w polu CSS.