Anmeldeformular für die HTTP Basic Auth

Question

Ich arbeite mit einer Perl Anwendung mit dem Namen bitlfu.For anmelden es ist mit so etwas wie Apache HTTP Basic Auth aber kein form.I will Formular für die Anmeldung mit Benutzername und Passwort machen Feld. Ich habe JavaScript und PHP bisher ohne Ergebnisse ausprobiert.

Also brauche ich Hilfe!

PS: diese Art von URL funktioniert

http://user:password@host.com 

Answer 1

ich wie ein einfaches JavaScript denken:

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

sollte die Arbeit machen.

Also im Grunde, müssen Sie ein Formular erstellen, mit einem Benutzer und Feld übergeben, dann onsubmit, verwenden Sie den Teil von JavaScript hier gegeben:

<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> 

wobei $() ist eine document.getElementById oder jquery oder so. Ich benutzte die $() -Funktion, um den Code kürzer zu machen. Hier ist eine Implementierung, die nicht bei jedem Browser funktioniert. Suchen Sie erneut throw jQuery für Cross-Browser-Lösung.

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

Andernfalls können Sie PHP verwenden und den Benutzer mit einem Header-Speicherort umleiten.

php Weg:

<?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

Sie können den Benutzer zu http://user:password@host.com mit Perl umleiten oder mit Hilfe von JavaScript. Ich weiß nicht, Perl, also werde ich Ihnen die JS zeigen:

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

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

Dies sollte funktionieren. Das einzige Problem ist, dass das Passwort in der URL angezeigt wird.

---

Das ehrfürchtige jQuery AJAX Weg:

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

---

Die ultimative Perl Art und Weise (ich glaube)

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

Answer 3

Dies ist eine einfache Plug & Play-Lösung & ;-). Funktioniert für jede Domäne (und auch für 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> 

Sie können dies in Ihrem 401-Fehlerdokument löschen.

Beachten Sie, dass return false erforderlich ist, damit die Seite nicht zweimal neu geladen wird.

Answer 4

Die Methode der expliziten Umleitung document.location mit Benutzername @ Passwort in URL verursachte mir einige Probleme mit Safari geben eine Phishing-Warnung.

Wenn ich stattdessen zuerst eine AJAX-Anfrage an eine URL mit grundlegenden Auth-Kopfzeilen hinzugefügt, und dann umleiten Dokument.Lage ohne Benutzername/Pass in der URL besser es arbeitete dann für mich

Beispiel

<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> 

Unfortunate Vorbehalt mit Safari nur, wenn Sie falsch Ihren Benutzernamen und das Passwort eingeben, dann macht es einen anderen Standard-HTTP-Basisauthentifizierungs Pop-up, aber das ist besser als eine große rote „Phishing-Warnung“, die auftritt, wenn Sie die document.location machen umfassen Benutzername/geben

Chrome haben keine doppelten Popup, wenn die Anmeldeinformationen nicht korrekt sind, obwohl