Criando um login HTML customizado para segurança do usuário

Os formulários HTML customizados podem ser criados para a segurança do usuário durante o estágio de extração de identidade no OAuth

Antes de iniciar

A configuração do provedor OAuth Nativo inclui a Extração de Identidade ao usar os tipos de concessão de senha Implícita, Código de Acesso ou Proprietário do Recurso. Você tem a opção de selecionar como extrair a credencial do usuário e uma das opções é Formulário HTML customizado. Para mais informações, consulte Configurando um provedor OAuth nativo ao usar o API Manager ou Configurando um provedor OAuth nativo ao usar o Cloud Manager. Para obter mais informações, consulte Configurando um provedor OAuth nativo. Este tópico descreve como criar o formulário HTML customizado para extração de identidade.

Sobre esta tarefa

Durante as definições de OAuth de três partes (fluxo implícito, fluxo de senha do proprietário do recurso e fluxo de código de Acesso (Autorização), o usuário é apresentado a um formulário para se conectar ao serviço fornecido pela API. É possível apresentar um formulário customizado ou padrão. Seu formulário customizado deve preencher determinados requisitos.

Importante: os campos usados pelo IBM® API Connect para injetar informações em seu formulário têm nomes de campos com distinção entre maiúsculas e minúsculas.

Procedimento

Para criar um formulário de conexão customizado para seu provedor OAuth nativo, conclua as etapas a seguir:

API Connect analisa um documento XHTML bem formado para injetar campos ocultos.
Para o seu formulário XHTML, configure o método como POST, o tipo de codificação como application/x-www-form-urlencodede a ação como authorize Inclua quaisquer outros parâmetros requeridos.
Por exemplo,
```
<form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
```
Crie um campo de entrada de texto denominado username e crie um campo de entrada de senha denominado password.
Inclua a linha <EI-INJECT-HIDDEN-INPUT-FIELDS>.. Esse terceiro elemento é um item temporário que API Connect substitui por campos de entrada para complementar os dados enviados pelo usuário.

Crie um botão para iniciar o processo de conexão.

Por exemplo,

<button id="login_button" type="submit" name="login" value="true">Log in</button>

Opcional: inclua o texto que é exibido na primeira vez em que o usuário visita a página de conexão Use a tag <EI-LOGINFIRSTTIME> para o texto que deseja exibir.
Opcional: inclua o texto que aparece quando o usuário é retornado à página de conexão se ele falhar ao autenticar. Use a tag <EI-LOGINFAILED> para o texto que deseja exibir.
Opcional: Ter uma mensagem de erro exibida quando um erro no formulário customizado impede que ela seja exibida para o usuário corretamente Use a tag <EI-INTERNAL-CUSTOM-FORM-ERROR/>; o texto da mensagem é gerado automaticamente. Você deve detectar esses erros durante o teste para evitar que essa mensagem de erro seja exibida para o usuário.
Opcional: É possível incluir elementos carregados de origens externas, como imagens ou JavaScript.

Insira espaçamento e outros recursos, conforme necessário. A conclusão das etapas 1 a 8 resulta em um formulário semelhante ao exemplo a seguir:

<html lang="en" xml:lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head>
  <body>
    <form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
      <h1>Please sign in</h1>
      <p>Username </p>
      <p style="text-indent: 0em;"><input type="text" name="username" required="required" /> </p>
      <p>Password </p>
      <p style="text-indent: 0em;"><input type="password" name="password" required="required" /> </p>
      <EI-INJECT-HIDDEN-INPUT-FIELDS/>
      <p style="text-indent: 2em;"> <button id="login_button" type="submit" name="login" value="true">Log in</button> </p>

      <EI-LOGINFIRSTTIME>
        <p>If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFIRSTTIME>

      <EI-LOGINFAILED>
        <p style="color: red">At least one of your entries does not match our records. 
          If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFAILED>

      <EI-INTERNAL-CUSTOM-FORM-ERROR/>

    </form>
  </body>
</html>

Disponibilize seu formulário em uma URL de sua escolha.
Se ainda não tiver feito isso, configure seu provedor Native OAuth para usar um formulário HTML personalizado para extração de identidade e forneça o endereço URL no qual o formulário está disponível. Para obter mais informações, consulte Configurando um provedor OAuth nativo ao usar o API Manager ou Configurando um provedor OAuth nativo ao usar o Cloud Manager.