Oracle Cloud Infrastructure - Dokumentation

Überblick über gehostete Anmeldeseiten

Auf einer gehosteten Anmeldeseite können Sie das Look-and-Feel der Identitätsdomainanmeldung mit Stilklassen, benutzerdefinierten HTML-Elementen und Übersetzungsunterstützung anpassen.

Weitere Informationen zu gehosteten Anmeldeseiten:

Gehostete Anmeldeseite erstellen:

Anmeldeerfahrung anpassen

Sie können die Anmeldeerfahrung mit einer oder beiden der folgenden Methoden anpassen.

Fügen Sie auf der Anmeldeseite Ihr eigenes Hintergrundbild hinzu.

Hintergrundbilder, die für die Anmeldeseite in den Branding-Einstellungen bereitgestellt werden, gelten für alle Anmeldeabläufe. Siehe Anmeldeseiten-Branding anpassen.
Stellen Sie benutzerdefinierte HTML-Elemente und benutzerdefinierte Übersetzungen mit der gehosteten Anmeldung bereit.

Die gehostete Anmeldung bietet benutzerdefinierte HTML-Elemente und benutzerdefinierte Übersetzungen, um die aktuelle Definition der Anmeldeseite zu überschreiben. Diese Anpassung gilt für die Hauptanmeldeseite. Dies wirkt sich nicht auf alle Anmeldeabläufe aus, z.B. nicht auf das Zurücksetzen des Kennworts und die MFA.

Die gehostete Anmeldeseite:
  • ermöglicht das Ändern aktueller Stile und das Hinzufügen neuer HTML-Elemente.
  • unterstützt Übersetzungen für vorhandene und neue Elemente.

Weitere Informationen finden Sie unter Gehostete Anmeldeseite erstellen.

Annahmen

  • Das Feature basiert auf JET 7.2. Alle Browser, die JET 7.2 unterstützen, können dieses Feature verwenden.
  • Administratoren sind mit vorhandenen Stilklassen auf der Anmeldeseite vertraut.

Einschränkungen

  • HTML-Kommentare (<!-- comment -->) sind nicht zulässig.

  • Das Hinzufügen benutzerdefinierter JavaScript ist nicht zulässig.

  • Das Tag <style> ist nicht zulässig. Sie können jedoch nur Inlinestyle-Elemente verwenden, z.B. <div style="property: value, ...">.

  • Es gibt keine Codevalidierung. Mit der Option Vorschau prüfen Sie, ob Ihr benutzerdefinierter Code gültig ist.

  • Ein begrenztes Set von Stileigenschaften ist verfügbar.
    • 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:
  • Ein begrenztes Set von HTML-Tags ist verfügbar.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span

Erläuterungen zu benutzerdefiniertem HTML

Wenn die gehostete Anmeldung zum ersten Mal aktiviert ist, wird Standard-HTML-Code bereitgestellt. Sie passen diesen Code an, um Ihre gehostete Anmeldeseite zu definieren. Dieser neue Code wird zum benutzerdefinierten HTML-Code.

Verwenden Sie diesen Standard-HTML-Code als Vorlage für Ihr benutzerdefiniertes HTML. Der Code ist voll funktionsfähig, d.h. die gehostete Anmeldeseite funktioniert auch, wenn keine Änderungen am Code vorgenommen werden.

Standard-HTML

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

Beispiel für benutzerdefiniertes HTML

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

Erläuterungen zur Funktionsweise von Übersetzungen

Mit der gehosteten Anmeldung können Sie Übersetzungen für vorhandene Elemente sowie neue Elemente für Ihren benutzerdefinierten HTML-Code festlegen.

Der Standardwert für Übersetzungen ist {}, d.h. es sind keine Übersetzungen für den benutzerdefinierten HTML-Code angegeben.

Struktur der Übersetzungen

Jedes Attribut stellt ein Label dar, der Schlüssel lautet data-idcs-text-translation-id, und der Wert ist ein Objekt, das die verschiedenen Sprachen und die übersetzten Zeichenfolgen enthält. Das folgende Beispiel enthält Übersetzungen für vorhandene Elemente (idcs-username-label) sowie neue Elemente (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"
  }
}
Die folgenden vorhandenen Elemente können auf der Anmeldeseite angepasst werden. Zum Anpassen der vorhandenen Elemente müssen die folgenden Reservierungs-IDs verwendet werden.
  • Element: username label
  • Reservierungs-ID: idcs-username-label
  • Element: username placeholder (Hilfetext im Feld "Benutzername")
  • Reservierungs-ID: idcs-username-placeholder
  • Element: password label
  • Reservierungs-ID: idcs-password-label
  • Element: password placeholder (Hilfetext im Feld "Benutzername")
  • Reservierungs-ID: idcs-password-placeholder

Neue Labels übersetzen

Wenn auf der gehosteten Anmeldeseite ein neues Label mit <div>-, <span>- oder Header-Tags wie <h1>, <h2>, <h3> usw. eingeführt wird, muss eine Übersetzungs-ID (data-idcs-text-translation-id) für diese Tags angegeben werden. Beispiel: Verwenden Sie <div data-idcs-text-translation-id="instructions"></div>, wobei data-idcs-text-translation-id des Elements verwendet wird, um einen übersetzten Text bereitzustellen.

Backup-URL zum Wiederherstellen der Anmeldeseite verwenden

Wenn Änderungen am Code für die gehostete Anmeldung den Anmeldeablauf unterbrechen (z.B. durch Entfernen der Kernkomponenten), können Administratoren sich mit dieser URL über die Standardanmeldeseite anmelden und so auf die Identitätsdomain zugreifen.

Erstellen Sie eine Backup-URL im folgenden Format: <hostname:[port]>/ui/v1/signin?noBranding=true

Hinweis

Logos werden auf der Anmeldeseite für die Wiederherstellung nicht korrekt angezeigt, da dies nur ein Wiederherstellungsmechanismus ist.