iOS:使用XMLHttpRequest进行身份验证 - 处理401响应

Question

我正在写使用的PhoneGap(又名科尔多瓦)iOS应用程序,我有一个登录使用一个XMLHttpRequest通过SSL基本身份验证的用户一个简单的HTML登录页面.当您正确输入用户名和密码时,一切都运作良好.但是,如果输入错误的用户名/密码,则不会调用任何回调.

例如,如果您在Chrome上运行相同的代码,使用错误的用户名/密码,则Chrome会以类似的方式运行,但会弹出身份验证质询对话框.在chrome的对话框上点击取消会将控制权返回给我的javascript代码.不幸的是,在iOS上,UIWebView甚至不会弹出一个auth对话框,它只是挂起.我需要一种方法告诉用户他们输入了错误的用户名或密码,以便他们可以重试.

最接近的一个答案,我能找到的这个http://www.freelock.com/2008/06/technical-note-http-auth-with-ajax但是从服务器更改响应状态似乎并不像正确的事情.

这基本上是我的请求代码的样子,但是当发送一个错误的用户名或密码时,它永远不会到达我的onload回调(实际上onreadystatechange回调只被调用一次,那就是readyState 1,也就是OPEN).

var req = new XMLHttpRequest();
req.onload = function(ev) {
    if (req.status == 401) {
        alert("Invalid Username/Password");
        document.getElementById('password').focus();
    } else if (req.status == 200) {
        window.location.href = some_secure_site;
    } else {
        // edit //
        alert("Some other status");
    }
}
req.onerror = function (ev) { alert('Error'); };
req.ontimeout = function(ev) { alert('Timeout'); };
req.open('GET', uri, true, userValue, passValue);
req.withCredentials = true;
req.send();

Answer 1

当我尝试在 iOS 上执行此操作时，有几件事对我来说变得显而易见。一是 iOS 存在与基本身份验证相关的错误，因此如果您的密码中包含某些特殊字符，您将永远不会从服务器收到响应，因为您的服务器永远不会收到身份验证质询。也就是说，如果您在“open”方法中使用用户名和密码字段。

我的猜测是他们正在做一些愚蠢的事情，比如通过http://username:password@myorigin.com/etc发送它，而他们应该使用 http 标头和 base64 编码信用，就像这样

req.setRequestHeader("Authorization", "Basic " + base64(username) + ':' + base64(password));

我了解到的另一件事是基本身份验证不是很安全，并且容易出现一百万零一个问题。其中之一会让您烦恼的是客户端将缓存用户名和密码，这将覆盖您通过“req.open(...)”发送的任何新值。祝你好运，单独使用 javascript 解决这个问题，你必须在 ObjC 中施展一些魔法来清除缓存。

如果您可以控制服务器，我建议使用令牌身份验证。通过 SSL 连接，然后发送包含用户名和密码的 JSON 数据的 POST。然后，服务器可以发送回带有身份验证令牌的 JSON 数据（本质上是一堆足够长的随机字符，永远无法猜到，UUID 效果很好。这是由服务器生成的，只能为客户端所知，并且服务器）。然后将令牌和用户名存储在钥匙串中，这样用户就不需要在每次启动您的应用程序时输入其凭据。

我的服务器将始终发回 200 响应，但 JSON 数据将包含重试或存储身份验证令牌所需的信息。总的来说......基本身份验证基本上很糟糕。

try {
    var req = new XMLHttpRequest();
    req.onload = function(ev) {
        var response = JSON.parse(this.responseText);
        if (response.success === true) {
            // The server will respond with a token that will allow us to login
            storeCredentials(userValue, response.token);
            // redirect with token
        else if (req.status == 401) {
            alert("Invalid Username/Password");
            document.getElementById('password').focus();
        } else {
            alert("Some other status");
        }
    }
    req.ontimeout = setTimeout(function(ev) { navigator.notification.alert('Timeout trying to contact the server'); }, 10000);
    req.onerror = function(ev) { clearTimeout(this.ontimeout); navigator.notification.alert('Error connecting to the server during authentication.'); };

    var uri = myWebOrigin + '/authenticate';
    req.open('POST', uri, true);
    req.setRequestHeader('Cache-Control', 'no-cache');
    req.setRequestHeader('Content-Type', 'application/json');
    json_data = {username : Base64.encode(userValue), password : Base64.encode(passValue)};
    req.send(JSON.stringify(json_data));
} catch(error) {
    navigator.notification.alert('Uh oh, an error occurred trying to login! ' + error);
    return;
}