Login Form For Http Basic Auth

Question

Hello everyone, I am running a Perl application named bitlfu.For login it is using something like Apache HTTP Basic Auth but not a form.I want to make form for the login with username and password filed. I have tried JavaScript and PHP with no results till now.

So I need help!

PS: this kind of url works

http://user:[email protected]

Answer 1

You can redirect the user to http://user:[email protected] with Perl, or using JavaScript. I don't know Perl so I'll show you the JS:

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

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

This should work. The only problem is that this shows the password in the URL.

---

The awesome AJAX way using jQuery:

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

---

The ultimate Perl way (I think)

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

Answer 2

I think a simple javascript like:

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

should do the work.

So basically, you have to create a form, with a user and pass field, then onsubmit, use the part of javscript given here:

<form method="post" onsubmit="javscript: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>

where $() is a document.getElementById or jquery or so. I used the $() function to make the code shorter. Here is an implementation, which does not work on every browser. Again, look throw jquery for cross browser solution.

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

Otherwize, you can use php and redirect the user with a header location.

php way:

<?php

if (isset($_POST['login']) && isset($_POST['password'])) { header('Location: ' . urlencode($_POST['login']) . ':' . urlencode($_POST['password']) . '@domain.tld'); }
else
{
?>
<form method="post" onsubmit="javscript: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
}