Oracle Cloud Infrastructureドキュメント

ホスティングされたサインイン・ページの作成

IAMでホスト・サインイン・ページを作成して、スタイル・クラス、カスタムHTMLおよび翻訳サポートを使用して、アイデンティティ・ドメインのサインイン・エクスペリエンスのルック・アンド・フィールをカスタマイズします。

  1. ナビゲーション・メニューを開き、「アイデンティティとセキュリティ」を選択します。「アイデンティティ」で、「ドメイン」を選択します。
  2. 作業するアイデンティティ・ドメインの名前をクリックします。必要なドメインを見つけるには、コンパートメントの変更が必要になる場合があります。
  3. ドメインの詳細ページで、「設定」をクリックします。
  4. 「設定」ページで、「ホスト・サインイン」をクリックします。
  5. 「ホスティングされたサインインの有効化」をクリックします。
  6. カスタムHTMLを編集します。
    使用可能なHTMLタグは限られています。
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    使用可能なスタイル・プロパティは限られます。
    • 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:

    プロパティはインラインで適用できます。次の例では、スタイル・プロパティをstyle="background-color:lightblue"に設定して、サインイン・ページの背景をカスタマイズしています。

    <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>
    ヒント

    やり直したいですか。「デフォルトHTMLのリストア」をクリックすると、デフォルトのHTML値に戻すことができます。
  7. 翻訳を指定します。
    次の既存の要素は、サインイン・ページでカスタマイズできます。既存の要素をカスタマイズするには、次の予約IDを使用する必要があります。
    • 要素: username label
    • 予約ID: idcs-username-label
    • 要素: username placeholder (ユーザー名フィールド内のヘルプ・テキスト)
    • 予約ID: idcs-username-placeholder
    • 要素: password label
    • 予約ID: idcs-password-label
    • 要素: password placeholder (ユーザー名フィールド内のヘルプ・テキスト)
    • 予約ID: idcs-password-placeholder
    ヒント

    やり直したいですか。「デフォルトの翻訳のリストア」をクリックして、翻訳ペインをクリアできます。
  8. 変更を保存せずに表示するには、「サインインのプレビュー」をクリックします。
  9. 「変更の保存」をクリックします。