Documentação do Oracle Cloud Infrastructure

Criando uma Página de Acesso Hospedada

Crie uma página Acesso Hospedado no IAM para personalizar a aparência da experiência de acesso ao domínio de identidades usando classes de estilo, HTML personalizado e suporte à tradução.

  1. Abra o menu de navegação e selecione Identidade e Segurança. Em Identidade, selecione Domínios.
  2. Selecione o nome do domínio de identidades no qual você deseja trabalhar. Talvez você precise alterar o compartimento para localizar o domínio desejado.
  3. Na página de detalhes do domínio, selecione Definições.
  4. Na página Configurações, selecione Acesso hospedado.
  5. Selecione Ativar acesso hospedado.
  6. Edite o HTML Personalizado.
    Um conjunto limitado de tags HTML está disponível.
    • div
    • img
    • label
    • input
    • h1
    • h2
    • h3
    • span
    Um conjunto limitado de propriedades de estilo está disponível.
    • 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:

    As propriedades podem ser aplicadas em linha. No exemplo a seguir, o plano de fundo da página de acesso foi personalizado definindo a propriedade de estilo como 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>
    Dica

    Precisa recomeçar? É possível reverter para os valores HTML padrão selecionando Restaurar HTML padrão.
  7. Especifique as traduções.
    Os elementos existentes a seguir podem ser personalizados na página de acesso. Para personalizar os elementos existentes, os IDs de reserva a seguir devem ser usados.
    • Elemento: username label
    • ID da reserva: idcs-username-label
    • Elemento: username placeholder (texto de ajuda dentro do campo do nome de usuário)
    • ID da reserva: idcs-username-placeholder
    • Elemento: password label
    • ID da reserva: idcs-password-label
    • Elemento: password placeholder (texto de ajuda dentro do campo do nome de usuário)
    • ID da reserva: idcs-password-placeholder
    Dica

    Precisa recomeçar? Você pode limpar o painel de traduções selecionando Restaurar traduções padrão.
  8. Selecione Visualizar acesso para exibir as alterações sem salvá-las.
  9. Selecione Salvar alterações.