Documentation Oracle Cloud Infrastructure

Présentation des pages de connexion hébergées

Une page de connexion hébergée permet de personnaliser l'apparence de l'expérience de connexion du 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ées :

Créez 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 des méthodes suivantes, ou des deux.

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. Reportez-vous à Personnalisation de la marque sur la page de connexion.
Fournissez du code HTML et des traductions personnalisés à l'aide de la connexion hébergée.

La connexion hébergée fournit du code et des traductions personnalisés afin d'écraser la définition en cours de la page de connexion. Cette personnalisation s'applique à la page de connexion principale. Tous les flux de connexion ne sont pas impactés. Par exemple, les flux d'authentification à plusieurs facteurs et de réinitialisation de mot de passe ne sont pas concernés.

La page de connexion hébergée :
  • permet de modifier les styles en cours et d'ajouter de nouveaux éléments HTML,
  • prend en charge les traductions des éléments existants et des nouveaux éléments.

Reportez-vous à Création d'une page de connexion hébergée.

Hypothèses

  • Cette fonctionnalité est basée sur JET 7.2. Tous les navigateurs prenant en charge JET 7.2 peuvent utiliser cette fonctionnalité.
  • Les administrateurs connaissent les classes de style existantes sur la page de connexion.

Limites

  • Les commentaires HTML (<!-- comment -->) ne sont pas autorisés.

  • L'ajout de JavaScript personnalisé n'est pas autorisé.

  • La balise <style> n'est pas autorisée. Vous pouvez uniquement utiliser un style d'élément incorporé, par exemple <div style="property: value, ...">.

  • Aucune validation de code n'est effectuée. Utilisez l'option Aperçu pour vérifier que le code personnalisé est valide.

  • Un ensemble 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 ensemble limité de balises HTML est disponible.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span

Présentation du code HTML personnalisé

Lorsque la connexion hébergée est activée pour la première fois, du 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 fonctionne même si rien n'est modifié.

Code 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 de code 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 permet de spécifier des traductions pour les éléments existants et les nouveaux éléments de votre code HTML personnalisé.

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

Structure des traductions

Chaque attribut représente un libellé, la clé est data-idcs-text-translation-id, et la valeur est un objet qui contient les différentes langues et les chaînes traduites. L'exemple suivant contient 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 de réserve suivants.
  • Elément : username label
  • ID réserve : idcs-username-label
  • Elément : username placeholder (texte d'aide dans le champ de nom utilisateur)
  • ID réserve : idcs-username-placeholder
  • Elément : password label
  • ID réserve : idcs-password-label
  • Elément : password placeholder (texte d'aide dans le champ de nom utilisateur)
  • ID réserve : idcs-password-placeholder

Traduction de nouveaux libellés

Si un nouveau libellé est introduit dans la page de connexion hébergée, avec des balises <div>, <span> ou d'en-tête telles que <h1>, <h2>, <h3>, etc., un ID de traduction (data-idcs-text-translation-id) doit être fourni. Par exemple, utilisez <div data-idcs-text-translation-id="instructions"></div>, où la valeur data-idcs-text-translation-id de l'élément est utilisée pour fournir le texte traduit.

Utilisation de 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 enlevant 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 semblable à la suivante : <hostname:[port]>/ui/v1/signin?noBranding=true

Remarque

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