Come sopprimere la finestra di dialogo "autenticazione richiesta" del browser quando si effettua una chiamata ajax che richiede l'autenticazione?

Question

I miei utenti inseriscono un nome utente e una password per un servizio di terze parti. Faccio una chiamata ajax a quel servizio per autenticarli. Il problema è che se inseriscono il nome utente e la password sbagliati, il browser (almeno firefox) visualizzerà una finestra di dialogo "autenticazione richiesta". Se poi inseriscono il nome utente e la password corretti in quella finestra di dialogo, la mia chiamata ajax restituirà un "successo" e sembrerà che l'utente/pass originale che hanno inserito sia corretto, quando non lo è (dal momento che l'hanno modificato).

C'è un modo per sopprimere questa finestra di dialogo (così posso quindi chiedere al mio servizio di correggere il loro utente/pass) o in qualche modo prendere il nome utente e la password corretti che l'utente ha inserito nella finestra di dialogo del browser? Questa è un'estensione per Firefox .. quindi sono sicuro che c'è un modo per prendere il pass/login corretto dalla richiesta .. ma sarebbe bello se ci fosse un metodo più semplice tramite javascript.

jQuery.ajax({ 
    type: "GET", 
    dataType: "xml", 
    url: endpoint, 
    username: username, 
    password: password, 
    success: function(data,status) { 
    // Do something 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown){ 
    alert(errorThrown); 
    } 
}); 

Answer 1

Ho risolto questo problema inserendo un proxy tra il browser e il servizio che richiede l'autenticazione, nel mio caso, un servlet Java. Il browser invia la richiesta AJAX al servlet, che inoltra la richiesta al servizio, quindi restituisce la risposta dei servizi, omettendo l'intestazione "WWW-Authenticate". La tua app per browser. gestisce il codice di risposta HTTP 200 o 401 di conseguenza.

Analogamente, il proxy può sempre restituire un 200 con una risposta JSON che indica i risultati della richiesta inoltrata. In questo modo puoi discernere la differenza tra un errore del tuo proxy e la risposta del servizio.

Una cosa difficile si può avere a che fare con - se il servizio di far-end risponde con un colpo di testa Set-Cookie, dire, perché è creato una sessione per il vostro cliente, allora si ha (almeno) 2 percorsi possibili per prendere .

1. il proxy si ricorderà il cookie, l'app browser. passa sempre attraverso il proxy per questo servizio e il proxy aggiunge questo cookie alle successive richieste inoltrate. o
2. ignori il cookie del servizio e fai in modo che il browser effettui nuovamente l'autenticazione direttamente con il servizio una volta verificato il nome utente e la password tramite il proxy. Anche se questo può avere l'effetto collaterale di creare una sessione orfana con il servizio

Answer 2

Al posto della stringa URL essere "http://blah.com", lo rendono "http://user:password@blah.com"

// Note that you might need to trim http:// out of endpoint first 
url: 'http://' + username + ':' + password + '@' + endpoint, 

Answer 3

Non è possibile farlo in IE o Firefox, e non avete mai sarà in grado di da javascript per ragioni di sicurezza. Non ci sono impostazioni del browser che consentono all'utente di evitare di ricevere l'autenticazione HTTP. Questo diventa davvero fastidioso quando hai 50 immagini tutte che richiedono l'autenticazione HTTP.

Answer 4

Senza jquery (non funziona in IE, ma che è OK per le estensioni di Firefox):

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://example.com", true, "username", "password"); 
xhr.onreadystatechange = function(){ 
    if(this.readyState == 4){ 
    if(this.status == 200){ 
     alert("we got a response"); 
    } 
    } 
} 
xhr.send(); 

Answer 5

Come su non si sta utilizzando l'autenticazione HTTP? Utilizzare un accesso standard con i cookie, o semplicemente POST il nome utente/password che l'utente fornisce allo script e controllare i dettagli su un database di utenti.