Documentación de Oracle Cloud Infrastructure

Creación de una página de conexión alojada

Cree una página de conexión alojada en IAM para personalizar el aspecto de la experiencia de conexión al dominio de identidad mediante clases del estilo, HTML personalizado y soporte para traducción.

  1. Abra el menú de navegación y seleccione Identidad y seguridad. En Identidad, seleccione Dominios.
  2. Seleccione el nombre del dominio de identidad en el que desea trabajar. Puede que necesite cambiar el compartimento para buscar el dominio que desee.
  3. En la página de detalles del dominio, seleccione Configuración.
  4. En la página Configuración, seleccione Inicio de sesión alojado.
  5. Seleccione Activar conexión alojada.
  6. Edite el HTML personalizado.
    Hay disponible un juego limitado de etiquetas HTML.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    Hay disponible un juego limitado de propiedades de estilo.
    • 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:

    Las propiedades se pueden aplicar en línea. En el siguiente ejemplo, el fondo de la página de conexión se ha personalizado definiendo la propiedad de estilo en 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>
    Consejo

    ¿Necesita volver a empezar? Puede revertir a los valores HTML por defecto seleccionando Restaurar HTML por defecto.
  7. Especifique las traducciones.
    Los siguientes elementos existentes se pueden personalizar en la página de conexión. Para personalizar los elementos existentes, se deben utilizar los siguientes identificadores de reserva.
    • Elemento: username label
    • ID de reserva: idcs-username-label
    • Elemento: username placeholder (texto de ayuda dentro del campo de nombre de usuario)
    • ID de reserva: idcs-username-placeholder
    • Elemento: password label
    • ID de reserva: idcs-password-label
    • Elemento: password placeholder (texto de ayuda dentro del campo de nombre de usuario)
    • ID de reserva: idcs-password-placeholder
    Consejo

    ¿Necesita volver a empezar? Para borrar el panel de traducciones, seleccione Restaurar traducciones predeterminadas.
  8. Seleccione Vista previa de inicio de sesión para ver los cambios sin guardarlos.
  9. Seleccione Guardar cambios.