Formulario de acceso para autenticación básica de HTTP

Question

estoy ejecutando una aplicaciónPerl llamado bitlfu.For iniciar sesión está utilizando algo así como Apache HTTP de autenticación básica pero no un form.I quieren hacer formulario para el inicio de sesión con nombre de usuario y contraseña campo. He intentado con JavaScript y PHP sin resultados hasta ahora.

¡Así que necesito ayuda!

PS: este tipo de URL funciona

http://user:password@host.com 

Answer 1

Creo que una JavaScript simple como:

document.location='http://' + user + ':' + pass + '@mydomain.tld'; 

debería hacer el trabajo.

Así que, básicamente, tiene que crear un formulario, con un usuario y pass campo, entonces onsubmit, usar la parte de JavaScript dada aquí:

<form method="post" onsubmit="javascript:document.location='http://' + $('login') + ':' + $('pass') + '@mydomain.tld';"> 
    <input type="text" name="login" id="login" /> 
    <input type="password" name="pass" id="pass" /> 
    <input type="submit" value="ok"/> 
</form> 

donde $() es una document.getElementById o jQuery más o menos. Usé la función $() para acortar el código. Aquí hay una implementación, que no funciona en todos los navegadores. De nuevo, busque throw jQuery para la solución de navegador cruzado.

function $(_id) { return document.getElementById(_id); } 

De lo contrario, puede utilizar php y redirigir al usuario con una ubicación de encabezado.

php manera:

<?php 

if (isset($_POST['login']) && isset($_POST['password'])) { header('Location: ' . urlencode($_POST['login']) . ':' . urlencode($_POST['password']) . '@domain.tld'); } 
else 
{ 
?> 
<form method="post" onsubmit="javascript:document.location='http://' + $('login') + ':' + $('pass') + '@mydomain.tld';"> 
    <input type="text" name="login" id="login" /> 
    <input type="password" name="pass" id="pass" /> 
    <input type="submit" value="ok"/> 
</form> 

<?php 
} 

Answer 2

puede redirigir al usuario a http://user:password@host.com con Perl, o el uso de JavaScript. No sé Perl así que le mostraré el JS:

function submitted() { 
    document.location = "http://" + document.getElementById("username").value + ":" + document.getElementById("password").value + "@host.com"; 
} 

<form onSubmit="submitted">...blablabla...</form> 

Esto debería funcionar. El único problema es que esto muestra la contraseña en la URL.

---

La forma AJAX impresionante usando jQuery:

$.ajax({ 
    'url': 'http://host.com/', 
    //'otherSettings': 'othervalues', 
    username: $("username").val(), 
    password: $("password").val() 
    }, 
    sucess: function(result) { 
    alert('done'); 
    } 
}); 

---

La mejor manera de Perl (creo)

$username = # somehow get username 
$password = # somehow get password 
use CGI; 
my $query=new CGI; 
print $query->redirect('http://host.com/'); 

Answer 3

Ésta es una solución simple juego de enchufe & ;-). Funcionará para cualquier dominio (y también en HTTPS):

<script> 
function submitAuthForm() { 
    var login = document.getElementById('login').value; 
    var pass = document.getElementById('pass').value; 
    location = location.href.replace('://', '://' + encodeURIComponent(login) + ':' + encodeURIComponent(pass) + '@'); 
    // might be required to reload on Firefox (FF shows confirmation dialog) 
    setTimeout(function(){ 
     location.reload(true); 
    }, 5000); 
} 
</script> 
<form method="get" onsubmit="submitAuthForm(); return false"> 
    <input type="text" id="login" /> 
    <input type="password" id="pass" /> 
    <input type="submit" value="OK" /> 
</form> 

Puede dejarlo en su documento de error 401.

Tenga en cuenta que return false es necesario para que la página no se vuelva a cargar dos veces.

Answer 4

El método de redirigir explícitamente document.location con nombre de usuario @ contraseña en la URL me ocasionó algunos problemas con Safari dando una advertencia de phishing.

Si, en cambio, primero realizo una solicitud de AJAX a una URL con encabezados de autenticación básicos agregados, y luego redirijo el documento.ubicación sin el nombre de usuario/contraseña en la URL, que funcionó mejor para mí

Ejemplo

<script 
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" 
     crossorigin="anonymous"></script> 
<script> 
$(document).ready(function() { 
    $('form').submit(function() { 
     $.ajax({ 
      url: 'https://efishgenomics.integrativebiology.msu.edu/collaborators/', 
      username: $("#login").val(), 
      password: $("#pass").val() 
     }).done(function() { 
      $("#error_msg").html(""); 
      document.location='https://efishgenomics.integrativebiology.msu.edu/collaborators/'; 
     }).fail(function(result) { 
      console.error(result); 
      $("#error_msg").html("Error logging in: "+result.statusText); 
     }); 
     return false; 
    }); 
}); 
</script> 



<div id="error_msg" style="color: red"></div> 

<form method="post"> 
    Username: 
    <input type="text" name="login" id="login" /> 
    Password: 
    <input type="password" name="pass" id="pass" /> 
    <input type="submit" value="Submit"/> 
</form> 

salvedad Desafortunada con Safari solamente, si escribe su nombre de usuario y una contraseña incorrecta, entonces tiene otro estándar HTTP de autenticación básica emergente, pero esto es mejor que un rojo grande "advertencia phishing" que se produce al tomar la document.location incluir nombre de usuario/contraseña

Chrome no tiene emergente duplicado si las credenciales de acceso son incorrectas aunque