我正在运行名为bitlfu的 Perl 应用程序。对于登录,它使用类似 Apache HTTP Basic Auth 但不是表单。我想为登录创建表单用户名和密码字段。 我已经尝试过JavaScript和PHP,直到现在还没有结果。
所以我需要帮助!
PS: 这种网址工作
http://user:password@host.com
答案 0 :(得分:6)
我认为像一个简单的JavaScript:
document.location='http://' + user + ':' + pass + '@mydomain.tld';
应该做的工作。
所以基本上,你必须使用user和pass字段创建一个表单,然后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
}
答案 1 :(得分:4)
您可以使用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中显示密码。
$.ajax({
'url': 'http://host.com/',
//'otherSettings': 'othervalues',
username: $("username").val(),
password: $("password").val()
},
sucess: function(result) {
alert('done');
}
});
$username = # somehow get username
$password = # somehow get password
use CGI;
my $query=new CGI;
print $query->redirect('http://host.com/');
答案 2 :(得分:1)
在网址中使用用户名@密码明确重定向document.location
的方法导致我遇到一些问题,因为Safari会发出网络钓鱼警告。
如果我首先向添加了基本auth标头的URL发出AJAX请求,然后重定向document.location而不使用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没有重复的弹出窗口
答案 3 :(得分:0)
这是一个简单的即插即用解决方案;-)。适用于任何域(以及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
是必需的,因此页面不会重新加载两次。