Documentation Oracle Cloud Infrastructure

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

Créez une page de connexion hébergée dans IAM pour personnaliser l'apparence de l'expérience de connexion du 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 souhaitez travailler. Il est possible que vous deviez changer de compartiment pour trouver le domaine souhaité.
  3. Sur la page de détails du domaine, sélectionnez Paramètres.
  4. Sur la page Paramètres, sélectionnez Connexion hébergée.
  5. Sélectionnez Activer la connexion hébergée.
  6. Modifiez le code HTML personnalisé.
    Un ensemble limité de balises HTML est disponible.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    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:

    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 définissant la propriété de style sur 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. Indiquez les 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 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
    Conseil

    Vous devez recommencer ? Vous pouvez effacer le volet des traductions en sélectionnant Restaurer les traductions par défaut.
  8. Sélectionnez Aperçu de la connexion pour afficher les modifications sans les enregistrer.
  9. Sélectionnez Enregistrer les modifications.