Basic Auth身份验证简介及其在jQuery ajax中使用方式

momo314相同方式共享非商业用途署名转载

Basic Auth简介

Basic Auth,即HTTP Auth Basic,HTTP基本认证,即通过提供基于用户名与密码的验证来保护你的站点或站点的一部分。简单点说呢,就是每次请求API时都需要提供用户的username和password以供服务器端验证。它的使用非常简单,便于开发和调试,没有复杂的页面跳转逻辑和交互过程,利于请求发起方控制。

Basic Auth使用场景

  1. 大家都是搞开发的,一定见过那种一敲网址pia的一下就弹出一个浏览器自带弹窗,要求输入用户名密码的网页,没错,这就是Basic Auth身份验证。
  2. Basic Auth还广泛用于NoSQL数据库中,常见的MongoDB、CouchDB中都是使用Basic Auth身份验证机制,例如:http://username:password@localhost:5984/_config 这种URL。

在jQuery ajax中如何使用Basic Auth

当你希望通过jQuery ajax来直接访问类似于CouchDB REST API这种Basic Auth授权机制的URL时,则需要提供你的用户名和密码,示例代码如下:

var BasicAuthorizationCode = function(username, password){
    var safeStr = unescape(encodeURIComponent(username + ':' + password));
    var btoaCode = btoa(safeStr);
    return 'Basic ' + btoaCode;
};

$.ajax({
    url: 'localhost:5984/demo',
    type: 'PUT',
    dataType: 'text/plain',
    beforeSend: function (xhr) {
        xhr.setRequestHeader ('Authorization', BasicAuthorizationCode(username, password));
    },
    success: function(data){
        console.log(data);
    }
    complete: function(xhr, ts){
        console.log(xhr.status);
        console.log(xhr.responseText);
    }
});

瞧,就是这么简单,其实我们只需要把用户名和密码经过 btoa 加密之后,写入 Authorization 请求头中就可以了。

同理,只要知道window.btoa()方法的加密算法,我们也可以在后端程序中直接调用Basic Auth API,唯一要做的事就是设置一个正确的 Authorization 请求头。

关于 window.btoa()和window.atob()

window.btoa()和window.atob()是一对加解密的算法,用法示例如下:

// encode a string
var encodedData = window.btoa("Hello, world"); 

// decode the string
var decodedData = window.atob(encodedData);

那么,为什么我们在上面Basic Auth的加密方法中对其输入的字符串进行了 encodeURIComponentunescape 操作呢?

In most browsers, calling window.btoa() on a Unicode string will cause a Character Out Of Range exception. 在大部分浏览器中,对一个Unicode字符串调用btoa()方法进行加密时会导致抛出 Character Out Of Range 异常

所以正确的用法应该是:

function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

参考资料: WindowBase64.btoa() - Web APIs | MDN

✎﹏ 本文来自于 momo314的神奇海螺 ,文章原创,转载请注明作者并保留原文链接。