Panoramica delle pagine di connessione ospitate

Una pagina di accesso in hosting consente di personalizzare l'aspetto dell'esperienza di accesso al dominio di Identity utilizzando le classi di stile, il codice HTML personalizzato e il supporto della traduzione.

Informazioni sulle pagine di accesso in hosting:

Creare una pagina di connessione ospitata:

Creazione di una pagina di accesso hosted

Personalizza l'esperienza di login

È possibile personalizzare l'esperienza di login utilizzando uno o entrambi i metodi riportati di seguito.

Aggiungere un'immagine di sfondo personalizzata alla pagina di accesso.

Le immagini di sfondo fornite per la pagina di accesso nelle impostazioni Branding sono valide per tutti i flussi di accesso. Vedere Personalizzazione del branding della pagina Accesso.

Fornire traduzioni HTML e personalizzate utilizzando l'accesso in hosting.

L'accesso in hosting fornisce traduzioni HTML e personalizzate personalizzate per sovrascrivere la definizione della pagina di accesso corrente. Questa personalizzazione si applica alla pagina di accesso principale. Non influisce su tutti i flussi di accesso, ad esempio non influisce sulla reimpostazione della password e sui flussi MFA.

Pagina di accesso in hosting:

Consente di modificare gli stili correnti e di aggiungere nuovi elementi HTML.
Supporta traduzioni per elementi esistenti e nuovi elementi.

Vedere Creazione di una pagina di accesso in hosting.

Limiti

Commenti HTML () non consentiti.
L'aggiunta di JavaScript personalizzato non è consentita.
Il tag <style> non è consentito. Tuttavia, è possibile utilizzare solo uno stile in linea di elementi, ad esempio <div style="property: value, ...">
Nessuna convalida del codice. Utilizzare l'opzione Anteprima per verificare che il codice personalizzato sia valido.
È disponibile un set limitato di proprietà di stile.
- allinea elementi:
- background-color:
- sfondo:
- raggio bordo:
- bordo:
- box-shadow:
- contenuto:
- visualizzazione:
- altezza:
- contenuto giustificato:
- a sinistra:
- margine superiore:
- margine:
- altezza massima:
- larghezza massima:
- altezza minima:
- imbottitura a sinistra:
- padding-right:
- riempimento:
- position:
- text-align:
- superiore:
- larghezza:
È disponibile un set limitato di tag HTML.
- div
- Immagine
- etichetta
- input
- h1
- h2
- h3
- intervallo

Comprendere l'HTML personalizzato

Quando l'accesso in hosting è abilitato per la prima volta, viene fornito il codice HTML predefinito. È possibile personalizzare questo codice per definire la pagina Connetti in hosting. Questo nuovo codice diventa il tuo HTML personalizzato.

Utilizzare questo codice HTML predefinito come modello per il codice HTML personalizzato. Il codice è completamente funzionale, il che significa che la pagina di accesso in hosting funzionerà anche se non viene modificato nulla.

HTML predefinito

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

Esempio HTML personalizzato

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

Comprendere il funzionamento delle traduzioni

L'accesso in hosting consente di specificare le traduzioni per gli elementi esistenti e i nuovi elementi per il codice HTML personalizzato.

Il valore predefinito per le traduzioni è {}, pertanto non sono disponibili traduzioni per il codice HTML personalizzato.

La struttura delle traduzioni

Ogni attributo rappresenta un'etichetta, la chiave è data-idcs-text-translation-id e il valore è un oggetto contenente le diverse lingue e le stringhe tradotte. Nell'esempio seguente sono presenti traduzioni per gli elementi esistenti (idcs-username-label) e nuovi elementi (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"
  }
}

Nella pagina di connessione è possibile personalizzare gli elementi esistenti riportati di seguito. Per personalizzare gli elementi esistenti, è necessario utilizzare i seguenti ID riserva.

Elemento: username label
ID prenotazione: idcs-username-label
Elemento: username placeholder (testo della Guida all'interno del campo del nome utente)
ID prenotazione: idcs-username-placeholder
Elemento: password label
ID prenotazione: idcs-password-label
Elemento: password placeholder (testo della Guida all'interno del campo del nome utente)
ID prenotazione: idcs-password-placeholder

Conversione di nuove etichette

Se viene introdotta una nuova etichetta nella pagina Accesso in hosting, utilizzando <div>, <span> o tag di intestazione come <h1>, <h2>, <h3> e così via, è necessario fornire un ID traduzione (data-idcs-text-translation-id). Ad esempio, utilizzare <div data-idcs-text-translation-id="instructions"></div>, dove data-idcs-text-translation-id dell'elemento viene utilizzato per fornire un testo tradotto.

Utilizzare l'URL di backup per recuperare la pagina di accesso

Se le modifiche apportate al codice di accesso in hosting interrompono il flusso di connessione (ad esempio, rimuovendo i componenti principali), gli amministratori possono utilizzare questo URL per connettersi con la pagina di login predefinita e ottenere l'accesso al dominio di Identity.

Creare un URL di backup come riportato di seguito: <hostname:[port]>/ui/v1/signin?noBranding=true

Nota

I logo non verranno visualizzati correttamente nella pagina di accesso al recupero poiché si tratta solo di un meccanismo di recupero.

Documentazione dell'infrastruttura Oracle Cloud