登錄表單HTTP基本驗證

Question

我正在把它命名爲使用類似的Apache HTTP基本bitlfu.For登錄身份驗證一個Perl的應用程序，但不是form.I想使形式與用戶名和密碼登錄領域。 我試過JavaScript和PHP，直到現在還沒有結果。

所以我需要幫助！

PS： 這種URL的工作

http://user:password@host.com 

Answer 1

我認爲一個簡單的JavaScript，如：

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

應該做的工作。

所以基本上，你必須創建一種形式，與用戶和通場，隨後的onsubmit，使用這裏給出的JavaScript部分：

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

其中$（）是的document.getElementById或jQuery的或者。我使用$（）函數來縮短代碼。這是一個實現，它不適用於每個瀏覽器。再次，看看jQuery的跨瀏覽器解決方案。

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

否則，您可以使用php並重定向用戶頭標位置。

PHP方式：

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

你可以用Perl或使用JavaScript將用戶重定向到http://user:password@host.com。我不知道Perl，所以我會告訴你的JS：

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

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

這應該工作。唯一的問題是這會在URL中顯示密碼。

---

使用jQuery的真棒AJAX方法：

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

---

最終Perl的方式（我認爲）

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

Answer 3

這是一個簡單的插件& play解決方案;-)。將適用於任何域（並且也適用於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> 

您可以將其放在401錯誤文檔中。

請注意，return false是必需的，以避免頁面重新加載兩次。

Answer 4

用URL中的用戶名@密碼明確重定向document.location的方法導致我在Safari中發出一些網絡釣魚警告的問題。

如果我首先向添加了基本身份驗證頭的URL發出AJAX請求，然後重定向文檔。沒有用戶名的位置/傳入URL，然後對我來說

工作更好的例子

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

的Safari不幸的警告而已，如果你輸入你的用戶名和密碼不正確，那麼它使其他標準HTTP基本身份驗證彈出，但是這是不是當你出現一個大紅色的「釣魚警告」更好的document.location包括用戶名/密碼

Chrome不具備重複彈出，如果登錄憑證不正確，雖然