Visión general de las páginas de conexión alojadas

La página Conexión alojada permite personalizar el aspecto de la experiencia de conexión del dominio de identidad mediante clases de estilo, HTML personalizado y soporte de para traducción.

Más información sobre las páginas de conexión alojadas:

Página Crear Conexión Alojada:

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

Personalizar la experiencia de inicio de sesión

Puede personalizar la experiencia de conexión mediante uno de los siguientes métodos o ambos.

Agregue su propia imagen del fondo a la página de conexión.

Las imágenes del fondo proporcionadas para la página de conexión en la configuración de la marca se aplican a todos los flujos de conexión. Consulte Personalización de la marca de la página de conexión.

Proporcione HTML personalizado y traducciones personalizadas mediante Conexión alojada.

La conexión alojada proporciona HTML personalizado y traducciones personalizadas a fin de sobrescribir la definición de página de conexión actual. Esta personalización se aplica a la página de conexión principal. No afecta a todos los flujos de conexión; por ejemplo, no afecta a la contraseña de restablecimiento ni a los flujos de MFA.

La página Conexión alojada:

Permite cambiar los estilos actuales y agregar nuevos elementos HTML.
Soporta traducciones para los elementos existentes y los elementos nuevos.

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

Limitaciones

Los comentarios HTML () no están permitidos.
No se permite agregar JavaScript personalizado.
No se permite la etiqueta <style>. Pero solo puede utilizar un estilo en línea de elementos, por ejemplo <div style="property: value, ...">
No hay validación de código. Utilice la opción Vista previa para verificar que el código personalizado es válido.
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:
Hay disponible un juego limitado de etiquetas HTML.
- div
- img
- label
- input
- h1
- h2
- h3
- span

Descripción de HTML personalizado

Cuando la conexión alojada se activa por primera vez, se proporciona el código HTML por defecto. Puede personalizar este código para definir la página Conexión alojada. Este nuevo código se convierte en su HTML personalizado.

Utilice este código HTML por defecto como plantilla para su HTML personalizado. El código es completamente funcional, lo que significa que la página Conexión alojada funcionará incluso si no se cambia nada.

HTML por defecto

<!--
    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>

Ejemplo de HTML personalizado

<!--
    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>

Descripción del funcionamiento de las traducciones

La conexión alojada permite especificar traducciones de elementos existentes, así como de nuevos elementos para su código HTML personalizado.

El valor de las traducciones por defecto es {}, lo que significa que no se ha proporcionado ninguna traducción para el código HTML personalizado.

Estructura de las traducciones

Cada atributo representa una etiqueta, la clave es data-idcs-text-translation-id y el valor es un objeto que contiene los distintos idiomas y las cadenas traducidas. El siguiente ejemplo tiene traducciones de elementos existentes (idcs-username-label), así como de elementos nuevos (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"
  }
}

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

Traducción de nuevas etiquetas

Si se introduce una nueva etiqueta en la página Conexión alojada, mediante el uso de <div>, <span> o etiquetas de cabecera como <h1>, <h2>, <h3>, etc., se debe proporcionar un identificador de traducción (data-idcs-text-translation-id) para esta. Por ejemplo, utilice <div data-idcs-text-translation-id="instructions"></div>, donde data-idcs-text-translation-id del elemento se utiliza para proporcionar un texto traducido.

Uso de la URL de copia de seguridad para recuperar la página de conexión

Si los cambios realizados en el código de conexión alojada interrumpen el flujo de conexión (por ejemplo, eliminando los componentes principales), los administradores pueden utilizar esta URL para conectarse a la página de conexión por defecto y obtener acceso al dominio de identidad.

Cree una URL de copia de Seguridad como la siguiente: <hostname:[port]>/ui/v1/signin?noBranding=true

Nota

Los logotipos no aparecerán correctamente en la página de conexión de recuperación, ya que se trata solo de un mecanismo de recuperación.

Documentación de Oracle Cloud Infrastructure