0

Estou tentando fazer uma autenticação de senha simples utilizando HTTP BA.

seguem os codigos: login.php

<?php

if(!(isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW']))){
   header('WWW-Authenticate: Basic realm="Restricted Area');
   header('HTTP/1.0 401 Unauthorized');
   die('Acesso Não Autorizado!');
}

$validPasswords = ["neto" => "1234"];//consulta ao banco para login e guardar em array ['login' = > 'Senha'];
$validUser = array_keys($validPasswords);
//recebe usuário e senha do cliente  
$user = $_SERVER['PHP_AUTH_USER'];
$pass = $_SERVER['PHP_AUTH_PW'];

$validate = (in_array($user, $validUser) && $pass = $validPasswords[$user]);

if (!$validate){
   header('WWW-Authenticate: Basic realm="Restricted Area');
   header('HTTP/1.0 401 Unauthorized');
   die('Acesso Não Autorizado!');
}

echo "ENTROU";
?>

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Autenticação HTTP</title>
        <meta charset="ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <form name="cookieform" id="login" method="get">
            <input type="text" name="username" id="username" />
            <input type="password" name="password" id="password" />
            <input type="submit" name="sub" value="Submit" onclick="auth()" />
        </form>

   <script>
   var username = $("#username").val();
   var password = $("#password").val();

   function auth(){
      $.ajax({
         type: "GET",
         url: "login.php",
         dataType: 'json',
         async: false,
         data: '{"username": "' + username + '", "password" : "' + password + '"}',
         beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(function (user, password) {
                  var tok = user + ':' + password;
                  var hash = Base64.encode(tok);
                  return "Basic " + hash;
            }));
         },
         success: function (response){
            alert(response);
         },
         error: function (response){
            alert(response);
         }
      });
   }
   </script>
    </body>
</html>

tentei usar o XMLHttpRequest:

   function auth(){
      // using XMLHttpRequest
      var username = $("input#username").val();
      var password = $("input#password").val();
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "login.php", true);
      xhr.withCredentials = true;
      xhr.setRequestHeader("Authorization",function (username, password) {
                  var tok = user + ':' + password;
                  var hash = Base64.encode(tok);
                  return 'Basic ' + hash;
            });
      xhr.onload = function () {
         console.log(xhr.responseText);
      };
      xhr.send();
}

Não retorna nenhuma mensagem no console. troquei os console.log por alert, e nao acontece nada!

O browser tenta abrir a janela solicitando usuário e senha, mas logo em seguida a janela se fecha.

O login.php está funcionando, pois testei acessando diretamente no navegador e digitando os dados na solicitação do browser.

preciso criar esta solução pois devo acessar dados usando endpoints seguros através de um app mobile.

EDIT:

alterei o método open do XMLHttpRequest:

xhr.open("GET", "login.php", true, user, pass);

e coloquei um print_r($_SERVER) no login.php

não apareceram os indices ['PHP_AUTH_USER'] nem o ['PHP_AUTH_PW'] na impressão do array...

agora com o XMLHttpRequest estou recebendo o alert, com o print do array...

1 Resposta 1

1

Até aonde sei setRequestHeader espera strings e não funções, isso tá errado:

function (username, password) {
              var tok = user + ':' + password;
              var hash = Base64.encode(tok);
              return 'Basic ' + hash;
        }

E mesmo que ele auto executasse a função ainda sim username e password estão passados como parametros, ou seja não vai pegar o valores de:

  var username = $("input#username").val();
  var password = $("input#password").val();

O objeto XmlHttpRequest já possui parametros para passar o valor da autorização, assim, deve ser assim:

function auth(){
  // using XMLHttpRequest
  var username = $("input#username").val();
  var password = $("input#password").val();

  var xhr = new XMLHttpRequest;

  xhr.open("GET", "login.php", true, username, senha);
  xhr.withCredentials = true;
  xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
               console.log('resposta', xhr.responseText);
          } else {
               console.log('erro http', xhr.status);
          }
     }
  };
  xhr.send(null);
}

Auth Basic com jQuery.ajax

Seu jQuery esta todo confuso, ele não precisa de :

async: false,

Nem de:

data: '{"username": "' + username + '", "password" : "' + password + '"}',

E o teu btoa também tem uma função com parametros:

        xhr.setRequestHeader ("Authorization", "Basic " + btoa(function (user, password) {

O que provavelmente não vai entender o escopo de:

  var username = $("input#username").val();
  var password = $("input#password").val();

O correto seria isto:

function auth()
{
  //As variaveis devem vir dentro da função para poder pegar os valores só no momento que executar auth
  var username = $("#username").val();
  var password = $("#password").val();

  $.ajax({
     type: "GET",
     url: "login.php",
     dataType: 'json',
     beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
     },
     success: function (response){
        console.log(response);
     },
     error: function (response){
        console.log(response);
     }
  });
}
7
  • legal... obrigado pelas dicas... fiz as alterações, estou tentando fazer a autenticação usando XMLHttpRequest que eu já havia usado antes... ele está retornando a resposta: Commented 28/08/2018 às 15:26
  • Obrigado pelas dicas...fiz as alterações... também removi o submit do input e coloquei button... estou tentando fazer a autenticação usando XMLHttpRequest que eu já havia usado antes... ele está retornando a resposta: console.log('resposta', xhr.responseText); no caso somente aparece a string 'resposta' e nada mais...no console o status do General Header do login.php é 200 OK, entretanto não recebe o 'echo "ENTROU";' que era pra ser o responseText correto? Commented 28/08/2018 às 16:03
  • @ReculosGerbiNeto então possivelmente é algum erro no teu PHP, mas algum header esta impedindo do PHP gerar o erro 500 (que é o erro correto), dê uma olhada na pasta do PHP, lá deve ter um log com os erros, veja os ultimos erros do log
    – Syzoth
    Commented 28/08/2018 às 16:08
  • Ok... vou verificar e retorno assim que possível! obrigado! Commented 28/08/2018 às 17:39
  • Coorrigindo os erros no código estou conseguindo verificar os retornos do login.php, no caso, os indices PHP_AUTH_USER e PHP_AUTH_PW nao estão setados... então entra no if(!isset... Commented 28/08/2018 às 22:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .