Oracle Cloud Infrastructure - Dokumentation

Gehostete Anmeldeseite erstellen

Erstellung einer gehosteten Anmeldeseite in IAM, um das Look-und-Feel der Identitätsdomainanmeldung mit Stilklassen, benutzerdefiniertem HTML-Element und Übersetzungsunterstützung anzupassen.

  1. Öffnen Sie das Navigationsmenü , und wählen Sie Identität und Sicherheit aus. Wählen Sie unter Identität die Option Domains aus.
  2. Wählen Sie den Namen der Identitätsdomain aus, in der Sie arbeiten möchten. Möglicherweise müssen Sie das Compartment ändern, um die gewünschte Domain zu finden.
  3. Wählen Sie auf der Seite mit den Domaindetails die Option Einstellungen aus.
  4. Wählen Sie auf der Seite Einstellungen die Option Gehostete Anmeldung aus.
  5. Wählen Sie Hostete Anmeldung aktivieren aus.
  6. Bearbeiten Sie den benutzerdefinierten HTML-Code.
    Ein begrenztes Set von HTML-Tags ist verfügbar.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    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:

    Eigenschaften können inline angewendet werden. Im folgenden Beispiel wurde der Hintergrund der Anmeldeseite angepasst, indem die Stileigenschaft auf style="background-color:lightblue" gesetzt wurde. 

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

    Sie müssen von vorn beginnen? Sie können die Standard-HTML-Werte wiederherstellen, indem Sie Standard-HTML wiederherstellen auswählen.
  7. Geben Sie die Übersetzungen an.
    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 (Hilfstext im Benutzernamenfeld)
    • Reservierungs-ID: idcs-username-placeholder
    • Element: password label
    • Reservierungs-ID: idcs-password-label
    • Element: password placeholder (Hilfstext im Benutzernamenfeld)
    • Reservierungs-ID: idcs-password-placeholder
    Tipp

    Sie müssen von vorn beginnen? Sie können den Übersetzungsbereich löschen, indem Sie Standardübersetzungen wiederherstellen auswählen.
  8. Wählen Sie Anmeldung in Vorschau anzeigen, um Änderungen anzuzeigen, ohne sie zu speichern.
  9. Wählen Sie Änderungen speichern aus.