É possível criar formulários HTML personalizados para garantir a segurança do usuário durante a etapa de extração de identidade no OAuth.
A configuração do provedor nativo do ` OAuth ` inclui a extração de identidade ao utilizar os tipos de autorização implícita, por código de acesso ou por senha do 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 obter mais informações, consulte Configurando um provedor nativo do OAuth. Este tópico descreve como criar o formulário HTML customizado para extração de identidade.
Sobre essa tarefa
Durante as definições de autenticação de três etapas ( OAuth ) — fluxo implícito, fluxo com senha do proprietário do recurso e fluxo com código de acesso (autorização) —, é exibido ao usuário um formulário para fazer login no 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 nomes dos campos utilizados pelo IBM® API Connect para inserir informações no seu formulário diferenciam maiúsculas de minúsculas.
Para criar um formulário de login personalizado para o seu provedor Native OAuth, siga estas etapas:
- API Connect analisa um documento XHTML válido para inserir 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: Adicione um texto que será exibido na primeira vez que o usuário acessar a página de login. Use a tag <EI-LOGINFIRSTTIME> para o texto que você deseja exibir.
- Opcional: Adicione um texto que apareça quando o usuário for redirecionado para a página de login caso não consiga se autenticar. Use a tag <EI-LOGINFAILED> para o texto que você deseja exibir.
- Opcional: exibir uma mensagem de erro quando um erro no formulário personalizado impedir que ele seja exibido corretamente para o usuário. Use a tag
<EI-INTERNAL-CUSTOM-FORM-ERROR/>; o texto da mensagem é gerado
automaticamente. Você deve detectar esses erros durante os testes para evitar que essa mensagem de erro seja exibida ao usuário.
- Opcional: você pode adicionar elementos carregados de fontes externas, como imagens ou arquivos ` JavaScript `.
- Insira espaçamento e outros recursos, conforme necessário. Ao concluir as etapas 1 a 8, obtém-se 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.
- Caso ainda não tenha 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 seu formulário está disponível.