Oracle Cloud Infrastructure - Dokumentation

Gehostete Anmeldeseite erstellen

Erstellen Sie eine gehostete Anmeldeseite in IAM, um das Look-and-Feel der Identitätsdomainanmeldung mit Stilklassen, benutzerdefinierten HTML-Elementen 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 Hosted Sign-in 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 direkt 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 (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
    Tipp

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