Login em uma URL com redirecionamento para outra após a autenticação

24/06/2016


A necessidade é bem simples, autenticar num site web e então após isso redirecionar para outra URL.

O fato esperado é que após ocorrer o submit para a URL da action o contexto da página corrente não existe mais, claro, então rotinas colocadas por exemplo no evento "onsubmit" do form não funcionarão. Pelo mesmo motivo quaisquer rotinas a serem executadas por um setTimeout() na página também não serão executados, que foi um caso que tentei, um timer local considerando que se passaram X segundos e que nesse período a autenticação ocorreu.

Além desse problema de contexto alterado houve ainda problemas sobre CORS quando tentei utilizar um código mais limpo com XMLHttpRequest fazendo o POST para a URL da action, então a solução mais simplista e funcional foi:

  1. Copiar o HTML original da página de autenticação.
  2. Pré-preencher os valores de usuário e senha.
  3. Simular o clique no botão, na verdade não o método click, mas o método submit.
  4. Meta tag para fazer o redirecionamento para a página destino desejada.
Mas o segredo mesmo para se manter no contexto foi o "target" do form ser um iframe, nesse caso usar a Metatag foi só para evitar mais um script, eu poderia usar um setTimeout(), mesmo o onsubmit funcionaria.



Abaixo a solução para o mundo ideal (usuário e senha corretos por exemplo).
Veja que a solução é HTML+Javascript puro, nada de JQuery ou outra framework.


<meta http-equiv="refresh" content="5; url=http://URL_APOS_AUTENTICAR">
 
<form action="http://URL_DE_AUTENTICA" method="post" name="acesso" id="acesso" target="logado" hidden="hidden">
    <input name="nome" type=text size=30 maxlength=30 value='usuário'>
    <input name="senha" type=password size=30 maxlength=30 value='senha'>
    <input type="submit" name="Entrar" id="Entrar" value="Entrar">
</form> 
 
<iframe name="logado" id="logado" hidden="hidden"></iframe>
 
<h2>Executando processo de autenticação, aguarde...</h2>
 
<script>
 
    // autentica para o iframe escondido.
    document.getElementById('acesso').submit();
 
</script>



Referências: 
  • http://pt.wikipedia.org/wiki/Cross-origin_resource_sharing
  • http://www.w3schools.com/xml/xml_http.asp