Visão Geral de Páginas de Acesso Hospedadas

Uma página de Acesso Hospedado permite que você personalize a aparência da experiência de acesso do domínio de identidades usando classes de estilo, HTML personalizado e suporte à tradução.

Saiba mais sobre as páginas de Acesso Hospedado:

Criar uma página de acesso hospedada:

Criando uma Página de Acesso Hospedada

Personalize a Experiência de Log-in

Você pode personalizar a experiência de log-in usando um ou ambos os métodos a seguir.

Adicione sua própria imagem de Segundo Plano à página de acesso.

As imagens em segundo plano fornecidas para a página de acesso nas definições de Uso de Marca se aplicam a todos os fluxos de acesso. Consulte Personalizando a Marca da Página de Acesso.

Forneça HTML personalizado e traduções personalizadas usando o Acesso Hospedado.

O Acesso Hospedado fornece HTML personalizado e traduções personalizadas para substituir a definição da página de acesso atual. Essa personalização se aplica à página de acesso principal. Ela não afeta todos os fluxos de acesso, por exemplo, não afeta os fluxos de redefinição de senha e MFA.

A página Acesso Hospedado:

Permite alterar os estilos atuais e adicionar novos elementos HTML.
Oferece suporte a traduções para elementos existentes e novos.

Consulte Criando uma Página de Acesso Hospedado.

Limitações

Comentários em HTML () não são permitidos.
Não é permitido adicionar JavaScript personalizado.
A tag <style> não é permitida. Mas você só pode usar um estilo inline de elementos, por exemplo, <div style="property: value, ...">
Não há validação de código. Use a opção Visualizar para verificar se o código personalizado é válido.
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:
Um conjunto limitado de tags HTML está disponível.
- div
- img
- label
- input
- h1
- h2
- h3
- span

Noções Básicas do HTML Personalizado

Quando o Acesso Hospedado é ativado pela primeira vez, o código HTML padrão é fornecido. Você personaliza esse código para definir sua página de Acesso Hospedado. Esse novo código torna-se seu HTML personalizado.

Use esse código HTML padrão como um modelo para seu HTML personalizado. O código é totalmente funcional, o que significa que a página de Acesso Hospedado funcionará mesmo que nada seja alterado.

HTML Padrão

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

Exemplo de HTML Personalizado

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

Entenda como as Traduções Funcionam

O Acesso Hospedado permite que você especifique traduções para elementos existentes, bem como novos elementos para o seu código HTML personalizado.

O valor de traduções padrão é {}, o que significa que não há traduções fornecidas para o código HTML personalizado.

A Estrutura das Traduções

Cada atributo representa um label, a chave é data-idcs-text-translation-id e o valor é um objeto que contém os diferentes idiomas e as strings traduzidas. O exemplo a seguir tem traduções para elementos existentes (idcs-username-label), bem como para novos elementos (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"
  }
}

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

Traduzindo Novos Labels

Se um novo label for introduzido na página de Acesso Hospedado, usando <div>, <span> ou tags de cabeçalho como <h1>, <h2>, <h3> e assim por diante, um ID de tradução (data-idcs-text-translation-id) deverá ser fornecido para eles. Por exemplo, use <div data-idcs-text-translation-id="instructions"></div>, em que data-idcs-text-translation-id do elemento é usado para fornecer um texto traduzido.

Usar o URL de Backup para Recuperar a Página de Acesso

Se as alterações feitas no código de Acesso Hospedado interromperem o fluxo de acesso (por exemplo, removendo componentes principais), os administradores poderão usar esse URL para acessar o sistema com a página de log-in padrão e obter acesso ao domínio de identidades.

Crie um URL de backup como o seguinte: <hostname:[port]>/ui/v1/signin?noBranding=true

Observação

Os logotipos não aparecerão corretamente na página de acesso de recuperação, pois esse é apenas um mecanismo de recuperação.

Documentação do Oracle Cloud Infrastructure