Nom, titre du navigateur, icône du navigateur et CSS

Nom d’affichage

Le nom et l’adresse de votre entreprise, organisation ou système peuvent être configurés pour chaque environnement. Lorsque FoxIDs envoie un SMS ou un email à un utilisateur, le texte du SMS et de l’email est personnalisé en ajoutant ces informations.

Le nom et l’adresse se configurent dans les paramètres de l’environnement dans FoxIDs Control Client.

1. Sélectionnez Settings
2. Sélectionnez Environment
3. Renseignez le nom et l’adresse
4. Cliquez sur Update

Ajouter le titre du navigateur, l’icône du navigateur et le CSS

L’interface utilisateur FoxIDs peut être personnalisée par méthode d’authentification login. Cela signifie qu’un seul environnement FoxIDs peut prendre en charge plusieurs designs d’interface utilisateur avec des titres de navigateur, des icônes de navigateur et du CSS différents.

Si vous ne spécifiez pas une méthode d’authentification login comme méthode autorisée dans votre application, la méthode d’authentification login par défaut est utilisée, ainsi que ce qui y est personnalisé.

FoxIDs utilise Bootstrap 4.6 et Flexbox CSS.

Trouvez la méthode d’authentification login dans FoxIDs Control Client que vous souhaitez configurer.

1. Sélectionnez l’onglet Login UI
2. Ajoutez le texte Browser Title
3. Ajoutez l’URL de l’icône du navigateur depuis un site externe, formats pris en charge : ico, png, gif, jpeg et webp Vous pouvez également coller un URI de données inline tel que data:image/png;base64,... pour intégrer l’icône directement
4. Ajoutez votre CSS, si nécessaire, agrandissez le champ par glisser-déposer
   Vous pouvez utiliser des snippets CSS en cliquant sur le lien Generate CSS snippets
5. Cliquez sur Update

Après la mise à jour, le titre, l’icône et le CSS sont actifs immédiatement.

Exemples de CSS

Changer l’arrière-plan et ajouter du texte de logo.

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

Il est également possible d’utiliser une image de logo.

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

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

Vous pouvez également intégrer directement l’image du logo dans le CSS avec un URI data: pour éviter les requêtes externes.

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

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

Ajouter une image d’arrière-plan depuis un site externe.

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

Changer la couleur des boutons et des liens, dans cet exemple le CSS en vert.

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

Ajouter des informations à la boîte de connexion.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Login with test user 'test1@foxids.com' or 'test2@foxids.com' and password 'TestAccess!'";
}

Afficher la section de sélection où se connecter (HRD) avant la boîte de connexion.

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

Ajouter du HTML à l’UI de login

Vous pouvez modifier la page de connexion en ajoutant du texte et des éléments HTML. Il existe des placeholders pour les champs de saisie (nom d’utilisateur / mot de passe, etc.), les boutons, les liens et les choix d’authentification (HRD). Vous pouvez placer le texte et les éléments HTML entre les placeholders et changer l’ordre des placeholders.

Trouvez la méthode d’authentification login dans FoxIDs Control Client que vous souhaitez configurer.

1. Sélectionnez l’onglet Login UI
2. Sélectionnez Show advanced
3. Cliquez sur Add element
4. Puis par exemple cliquez sur HTML element
5. Déplacez l’élément HTML avec les flèches
6. Ajoutez par exemple un lien vers votre licence
7. Cliquez sur Update

La page de connexion inclut maintenant le lien vers votre licence. Pour personnaliser davantage, vous pouvez ajouter une classe CSS sur l’élément HTML et ajouter une classe CSS dans le champ de saisie CSS.