Documentation sur Oracle Cloud Infrastructure

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

Créez une page de connexion hébergée dans le service IAM pour personnaliser l'aspect et la convivialité de l'expérience de connexion au domaine d'identité à l'aide de classes de style, de HTML personnalisé et de la prise en charge de la traduction.

  1. Ouvrez le menu de navigation et sélectionnez Identité et sécurité. Sous Identité, sélectionnez Domaines.
  2. Sélectionnez le nom du domaine d'identité dans lequel vous voulez travailler. Vous devrez peut-être modifier le compartiment pour trouver le domaine souhaité.
  3. Dans la page des détails du domaine, sélectionnez Paramètres.
  4. Dans la page Paramètres, sélectionnez Connexion hébergée.
  5. Sélectionnez Activer la connexion hébergée.
  6. Modifiez le HTML personnalisé.
    Un nombre limité de balises HTML est disponible.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    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:

    Les propriétés peuvent être appliquées en ligne. Dans l'exemple suivant, l'arrière-plan de la page de connexion a été personnalisé en réglant la propriété de style à style="background-color:lightblue"

    <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">
    <div class="oj-flex oj-idaas-signin-app-shell-wrapper oj-idaas-signin-app-shell-wrapper-background" style="background-color:lightblue">
      <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">
          <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>
    Conseil

    Vous devez recommencer? Vous pouvez rétablir les valeurs HTML par défaut en sélectionnant Restaurer le HTML par défaut.
  7. définition des traductions;
    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
    Conseil

    Vous devez recommencer? Vous pouvez effacer le volet des traductions en sélectionnant Restaurer les traductions par défaut.
  8. Sélectionnez Prévisualiser la connexion pour voir les modifications sans les enregistrer.
  9. Sélectionnez enregistrer les modifications.