É possível criar formulários HTML personalizados para garantir a segurança do usuário durante a etapa de autorização no OAuth.
A configuração do provedor Native OAuth inclui a autorização do usuário ao utilizar os tipos de concessão Implícita, Código de acesso ou Senha do proprietário do recurso. Você pode selecionar como autorizar os usuários do aplicativo, e uma das opções é o Formulário HTML personalizado. Este tópico descreve como criar um formulário HTML personalizado para autorização.
Sobre essa tarefa
Nas definições de fluxo de três etapas do OAuth (fluxo implícito, fluxo com senha do proprietário do recurso e fluxo com código de acesso (autorização)), o usuário concede permissão a um aplicativo para acessar seus dados por meio de um formulário de autorização. É 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 autorização personalizado para o seu provedor Native OAuth, siga estas etapas:
- Crie um documento XHTML bem formado Isso é analisado pelo API Connect 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">
- Inclua a linha <AZ-INJECT-HIDDEN-INPUT-FIELDS/>.. Esta linha é um espaço reservado que API Connect será substituído pelos campos de entrada necessários para a conclusão do processo de OAuth.
- Crie dois botões com o código a seguir para que o usuário possa conceder ou negar permissão. Edite
o texto para adequar às suas preferências.
<button class="cancel" type="submit" name="approve" value="false">No Thanks</button>
<button class="submit" type="submit" name="approve" value="true">Allow Access</button>
- 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
<AZ-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 ao formulário elementos HTML que carregam recursos de fontes externas, como imagens ou JavaScript.
Por exemplo,<script src="http://www.example.com/example.js"
/>
- Insira espaços e elementos adicionais conforme necessário. Ao concluir as etapas 1 a 6, obtém-se um formulário semelhante ao exemplo a seguir:
<html lang="en" xml:lang="en">
<head><title>Request for permission</title></head>
<body class="customconsent">
<div>
<div>
<form method="post" enctype="application/x-www-form-urlencoded" action="authorize">
<AZ-INJECT-HIDDEN-INPUT-FIELDS/>
<p>Greeting..</p><DISPLAY-RESOURCE-OWNER/>
<p>This app </p><OAUTH-APPLICATION-NAME/><p> would like to access your data.</p>
<div>
<button class="cancel" type="submit" name="approve" value="false">No Thanks</button>
<button class="submit" type="submit" name="approve" value="true">Allow Access</button>
</div>
</form>
</div>
<AZ-INTERNAL-CUSTOM-FORM-ERROR/>
</div>
</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 autorização, a fim de garantir a segurança do usuário. Indique URL como o endereço onde o formulário está disponível.