JS實現HTTP請求頭-Basic Authorization

HTTP協議中的 Authorization 請求消息頭含有服務器用於驗證用戶代理身份的憑證，一般會在服務器返回401 Unauthorized 狀態碼以及WWW-Authenticate 消息頭以後在後續請求中發送此消息頭。

Authorization:Basic c2NhcjoxMjM0NTY=
 Authorization: <type> <credentials>
 //(c2NhcjoxMjM0NTY=) 是(scar:123456)的base64編碼
複製代碼

格式是Basic字符串+空格+用戶名:密碼的Base64編碼。 將憑證部分進行Base64編碼，而後再拼接字符串'Basic '，就能夠生成基礎驗證方案。 由於DOMString 是16位編碼的字符串，若是有字符超出了8位ASCII編碼的字符範圍時，在大多數的瀏覽器中對Unicode字符串調用 window.btoa將會形成一個 Character Out Of Range 的異常。 因此下列方法將UTF-16的 DOMStrin 轉碼爲UTF-8的字符數組而後再編碼。

• 方法一： js原生方法btoa()實現

//base64，js原生方法btoa()實現
  function b64EncodeUnicode(str) {
       return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
                         function(match, p1) {
                              return String.fromCharCode('0x' + p1);
                         }));
  }
複製代碼

• 方法二： 轉碼函數 base64編碼方法

/* Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* b64 = base64encode(data);
* data = base64decode(b64);
*/

var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var base64DecodeChars = new Array(
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
    -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
function base64encode(str) {
    var out, i, len;
    var c1, c2, c3;
    len = str.length;
    i = 0;
    out = "";
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += base64EncodeChars.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += base64EncodeChars.charAt(c1 >> 2);
        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += base64EncodeChars.charAt(c3 & 0x3F);
    }
    return out;
}
function base64decode(str) {
    var c1, c2, c3, c4;
    var i, len, out;
    len = str.length;
    i = 0;
    out = "";
    while (i < len) {
        /* c1 */
        do {
            c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && c1 == -1);
        if (c1 == -1)
            break;
        /* c2 */
        do {
            c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && c2 == -1);
        if (c2 == -1)
            break;
        out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
        /* c3 */
        do {
            c3 = str.charCodeAt(i++) & 0xff;
            if (c3 == 61)
                return out;
            c3 = base64DecodeChars[c3];
        } while (i < len && c3 == -1);
        if (c3 == -1)
            break;
        out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
        /* c4 */
        do {
            c4 = str.charCodeAt(i++) & 0xff;
            if (c4 == 61)
                return out;
            c4 = base64DecodeChars[c4];
        } while (i < len && c4 == -1);
        if (c4 == -1)
            break;
        out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
    }
    return out;
}
複製代碼

將UTF-16的 DOMString 轉碼成UTF-8的字符串進行base64編碼

sEncoded=base64encode(utf16to8(str));
複製代碼

驗證：

使用eoLinker發送Basic Auth，輸入用戶名scar 密碼123456

PS: eoLinker是一個很好用的接口管理網站，前端測試很方便

在JS Bin運行後，發現和eoLinker結果一致，成功！！

方法一 JS Bin示例 方法二 JS Bin示例

資料

Authorization Authentication Javascript base64 Base64的編碼與解碼 Base64筆記-阮一峯老師 btoa方法