Login Form Pour Http Basic Auth

Question

Je gère un Perl application nommée bitlfu.For vous connecter il utilise quelque chose comme Apache HTTP Basic Auth mais pas un form.I veulent faire la forme pour la connexion avec le nom d'utilisateur et mot de passe champ. J'ai essayé JavaScript et PHP sans résultats jusqu'à maintenant.

J'ai donc besoin d'aide!

PS: ce genre de travaux url

http://user:password@host.com 

Answer 1

Je pense que simple JavaScript comme:

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

devrait faire le travail.

Donc, fondamentalement, vous devez créer une forme, avec un utilisateur et passer champ, puis onsubmit, utilisez la partie de JavaScript donnée ici:

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

où $() est un document.getElementById ou jquery ou alors. J'ai utilisé la fonction $() pour raccourcir le code. Voici une implémentation qui ne fonctionne pas sur tous les navigateurs. Encore une fois, regardez jeter jQuery pour la solution de navigateur croisé.

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

Sinon, vous pouvez utiliser php et rediriger l'utilisateur avec un emplacement d'en-tête.

façon 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

Vous pouvez rediriger l'utilisateur vers http://user:password@host.com avec Perl, ou en utilisant JavaScript. Je ne sais pas Perl, donc je vais vous montrer la JS:

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

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

Cela devrait fonctionner. Le seul problème est que cela montre le mot de passe dans l'URL.

---

La façon AJAX génial en utilisant jQuery:

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

---

La façon dont Perl ultime (je pense)

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

Answer 3

C'est un simple bouchon & solution de jeu ;-). Travaillera pour n'importe quel domaine (et sur HTTPS aussi):

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

Vous pouvez laisser tomber ceci dans votre document d'erreur 401.

Notez que return false est requis pour que la page ne soit pas rechargée deux fois.

Answer 4

La méthode de redirection explicite document.location avec le nom d'utilisateur @ mot de passe dans l'URL m'a causé quelques problèmes avec Safari donnant un avertissement d'hameçonnage.

Si au lieu je fais d'abord une requête AJAX à une URL avec des en-têtes de base ajoutés, puis de rediriger le document.emplacement sans le nom d'utilisateur/pass dans l'URL alors il a mieux fonctionné pour moi

Exemple

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

mise en garde Malheureux avec Safari seulement, si vous tapez votre nom d'utilisateur et mot de passe incorrect, alors il est un autre auth de base standard HTTP pop-up, mais cela vaut mieux qu'un grand rouge « avertissement phishing » qui se produit lorsque vous faites le document.location inclure le nom d'utilisateur/pass

Chrome n'a pas double pop-up si les informations d'identification sont incorrectes se connecter si