Aperçu des pages de connexion hébergées

Une page de connexion hébergée vous permet de personnaliser l'aspect et la convivialité de l'expérience de connexion au domaine d'identité à l'aide de classes de style, de code HTML personnalisé et de la prise en charge de la traduction.

En savoir plus sur les pages de connexion hébergée :

Page Créer une connexion hébergée :

Création d'une page de connexion hébergée

Personnaliser l'expérience de connexion

Vous pouvez personnaliser l'expérience de connexion à l'aide de l'une ou des deux méthodes suivantes.

Ajoutez votre propre image d'arrière-plan à la page de connexion.

Les images d'arrière-plan fournies pour la page de connexion dans les paramètres Marque s'appliquent à tous les flux de connexion. Voir Personnalisation de la marque pour la page de connexion.

Fournissez des traductions HTML personnalisées et personnalisées à l'aide de la connexion hébergée.

La connexion hébergée fournit des traductions HTML personnalisées afin de remplacer la définition de la page de connexion en cours. Cette personnalisation s'applique à la page de connexion principale. Elle n'a pas d'incidence sur tous les flux de connexion; par exemple, elle n'a pas d'incidence sur le mot de passe de réinitialisation et les flux d'authentification multifacteur.

La page de connexion hébergée :

Permet de modifier les styles actuels et d'ajouter de nouveaux éléments HTML.
Prend en charge les traductions pour les éléments existants ainsi que les nouveaux éléments.

Voir Création d'une page de connexion hébergée.

Limitations

Les commentaires HTML () ne sont pas autorisés.
L'ajout de JavaScript personnalisé n'est pas autorisé.
Le marqueur <style> n'est pas autorisé. Vous ne pouvez cependant utiliser qu'un style d'éléments inséré, par exemple <div style="property: value, ...">
Il n'y a pas de validation de code. Utilisez l'option Prévisualiser pour vérifier que votre code personnalisé est valide.
Un jeu limité de propriétés de style est disponible.
- align-items:
- background-color:
- background:
- border-radius:
- border:
- box-shadow:
- content:
- display:
- height:
- justify-content:
- left:
- margin-top:
- margin:
- max-height:
- max-width:
- min-height:
- padding-left:
- padding-right:
- padding:
- position:
- text-align:
- top:
- width:
Un nombre limité de balises HTML est disponible.
- div
- img
- label
- input
- h1
- h2
- h3
- span

Présentation du HTML personnalisé

Lorsque la connexion hébergée est activée pour la première fois, un code HTML par défaut est fourni. Vous personnalisez ce code pour définir votre page de connexion hébergée. Ce nouveau code devient votre code HTML personnalisé.

Utilisez ce code HTML par défaut comme modèle pour votre code HTML personnalisé. Le code est entièrement fonctionnel, ce qui signifie que la page de connexion hébergée fonctionnera même si rien n'est modifié.

HTML par défaut

<!--
    NOTE:
    Comments on this code are not displayed in the custom HTML area of Hosted Sign-in page,
    they are just for documentation purposes
-->
 
 
<!-- classes starting with oj-flex are JET util classes for layout -->
<div class="oj-flex oj-sm-flex-direction-column">
 
 
  <!-- classes named oj-idaas-xxx , like oj-idaas-signin-app-shell or oj-idaas-signin-app-shell-background are the default classes assigned to sign-in page -->
  <div id="oj-idaas-signin-app-shell-background" class="oj-idaas-signin-app-shell oj-idaas-signin-app-shell-background">
    <div class="oj-flex oj-idaas-signin-app-shell-wrapper oj-idaas-signin-app-shell-wrapper-background">
      <div class="oj-flex-item oj-sm-12 oj-idaas-signin-app-shell-padding-left oj-idaas-signin-app-shell-padding-right">
        <div class="oj-idaas-signin-app-shell-branding-logo-wrapper">
           
          <!--
               This image with id = custom-idaas-signin-branding-logo displays
               the sign-in page customer logo or the default logo (if no custom logo is provided)
          -->
          <img id="custom-idaas-signin-branding-logo" class="oj-idaas-signin-app-shell-branding-logo"/>
 
        </div>
 
 
        <!-- oj-idaas-signin-section displays the company name and welcome text -->
        <oj-idaas-signin-section id="custom-idaas-signin-section"></oj-idaas-signin-section>
 
      </div>
      <div class="oj-flex-item oj-sm-12 oj-idaas-signin-app-shell-content-wrapper">
 
 
        <!-- oj-idaas-signin-message displays the error and warning messages, DO NOT REMOVE this section -->
        <oj-idaas-signin-message id="custom-idaas-signin-message"></oj-idaas-signin-message>
 
        <div class="oj-idaas-signin-app-shell-padding-left oj-idaas-signin-app-shell-padding-right">
 
 
          <!--
            DO NOT REMOVE.
            oj-bind-slot tag, provides the core functionality of the sign-in page, it is the main widget.
            This will generate the area where username and password are entered
          -->
          <oj-bind-slot name="content"></oj-bind-slot>
        </div>
      </div>
    </div>
  </div>
</div>

Exemple HTML personnalisé

<!--
    NOTE:
    In this example two new labels are added by using a div tag. The text in the div tags is dynamically inserted by
    providing translations (see translations section below).
-->
<div class="oj-flex oj-sm-flex-direction-column">
  <div id="idcs-app-shell-signin-background" class="oj-idaas-signin-app-shell oj-idaas-signin-app-shell-background">

    <!-- Example of how the inline style can be applied -->
    <div class="oj-flex" style="margin:20px 0;width:520px;min-height:400px;padding:50px 0;position:absolute;top:0px;left:16px;background-color:#ffffff;border-radius:6px">
      <div class="oj-flex-item oj-sm-12 oj-idaas-signin-app-shell-padding-left oj-idaas-signin-app-shell-padding-right">
        <div class="oj-idaas-signin-app-shell-branding-logo-wrapper">

          <!--
            These two div tags are new elements (labels) introduced in the page, it is important to assign
            a data-idcs-text-translation-id id to each new element introduced, this id will be used to apply the translated text to the element.
            If the text doesn't have to be translated, no id is required and you can hardcode the text in the element.
          -->
          <h2 data-idcs-text-translation-id="welcometext" id="any1"> </h2>
          <h3 data-idcs-text-translation-id="welcometext2" id="any3"> </h3>

          <img id="custom-idaas-signin-branding-logo" class="oj-idaas-signin-app-shell-branding-logo" />
        </div>
        <oj-idaas-signin-section id="custom-idaas-signin-section"></oj-idaas-signin-section>
      </div>
      <div class="oj-flex-item oj-sm-12 oj-idaas-signin-app-shell-content-wrapper">
        <oj-idaas-signin-message id="custom-idaas-signin-message"></oj-idaas-signin-message>
        <div class="oj-idaas-signin-app-shell-padding-left oj-idaas-signin-app-shell-padding-right">
          <oj-bind-slot name="content"></oj-bind-slot>
        </div>
      </div>

    </div>
  </div>
</div>

Présentation du fonctionnement des traductions

La connexion hébergée vous permet de spécifier des traductions pour les éléments existants ainsi que de nouveaux éléments pour votre code HTML personnalisé.

La valeur par défaut des traductions est {}, ce qui signifie qu'aucune traduction n'est fournie pour le code HTML personnalisé.

La structure des traductions

Chaque attribut représente une étiquette, la clé est data-idcs-text-translation-id et la valeur est un objet contenant les différentes langues et les chaînes traduites. L'exemple suivant présente des traductions pour les éléments existants (idcs-username-label) et les nouveaux éléments (welcometext).

{
  "idcs-username-label": {
    "en": "Account ID",
    "es": "Cuenta de usuario o correo Electronico"
  },
  "idcs-username-placeholder": {
    "en": "Enter your Account ID",
    "es": "Introduzca su nombre de usuario o correo electronico"
  },
  "idcs-password-label": {
    "en": "Pass-word",
    "es": "Contra-sena"
  },
  "idcs-password-placeholder": {
    "en": "Enter your password",
    "es": "Introduzca su contrasena"
  },
  "welcometext": {
    "en": "Welcome to our Portal",
    "es": "Bienvenido"
  },
  "welcometext2": {
    "en": "This is great",
    "es": "Bienvenido"
  }
}

Les éléments existants suivants peuvent être personnalisés dans la page de connexion. Pour personnaliser les éléments existants, vous devez utiliser les ID réservé suivants.

Élément : username label
ID réserve : idcs-username-label
Élément : username placeholder (texte d'aide dans le champ Nom d'utilisateur)
ID réserve : idcs-username-placeholder
Élément : password label
ID réserve : idcs-password-label
Élément : password placeholder (texte d'aide dans le champ Nom d'utilisateur)
ID réserve : idcs-password-placeholder

Traduction de nouvelles étiquettes

Si une nouvelle étiquette est insérée dans la page de connexion hébergée, à l'aide de <div>, <span> ou de marqueurs d'en-tête tels que <h1>, <h2>, <h3>, etc., un ID traduction (data-idcs-text-translation-id) doit leur être fourni. Par exemple, utilisez <div data-idcs-text-translation-id="instructions"></div> où data-idcs-text-translation-id de l'élément est utilisé pour fournir un texte traduit.

Utiliser l'URL de sauvegarde pour récupérer la page de connexion

Si les modifications apportées au code de connexion hébergée interrompent le flux de connexion (par exemple, en supprimant des composants de base), les administrateurs peuvent utiliser cette URL pour se connecter à l'aide de la page de connexion par défaut et accéder au domaine d'identité.

Créez une URL de sauvegarde comme suit : <hostname:[port]>/ui/v1/signin?noBranding=true

Note

Les logos n'apparaîtront pas correctement dans la page de connexion de récupération, car il s'agit simplement d'un mécanisme de récupération.

Documentation sur Oracle Cloud Infrastructure