forms - Http Basic Auth 的登录表单

Question

我正在运行一个名为 bitlfu 的Perl应用程序。对于登录，它使用Apache HTTP Basic Auth之类的东西，但不是表单。我想使用用户名和密码字段为登录创建表单。到目前为止，我已经尝试过 JavaScript 和 PHP，但没有任何结果。

所以我需要帮助！

PS：这种网址有效

http://user:password@host.com

Answer 1

我认为一个简单的 JavaScript 像：

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

应该做的工作。

因此，基本上，您必须创建一个表单，其中包含用户和密码字段，然后在提交时，使用此处给出的 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 左右。我使用 $() 函数来缩短代码。这是一个实现，它不适用于每个浏览器。再一次，看看 throw 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

您可以http://user:password@host.com使用 Perl 或使用 JavaScript 将用户重定向到。我不了解 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

在 URL 中使用 username@password显式重定向的方法document.location导致 Safari 出现网络钓鱼警告的一些问题。

如果我首先向添加了基本身份验证标头的 URL 发出 AJAX 请求，然后在 URL 中没有用户名/密码的情况下重定向 document.location，那么它对我来说效果更好

例子

<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://site/collaborators/',
            username: $("#login").val(),
            password: $("#pass").val()
        }).done(function() {
            $("#error_msg").html("");
            document.location='https://site/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 不会出现重复的弹出窗口

Answer 4

这是一个简单的即插即用解决方案；-)。适用于任何域（也适用于 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是必需的，以便页面不会重新加载两次。