Base 64 不屬於密碼技術，僅是編碼方式。但由於在 Java、JavaScript、區塊鏈等出現的頻率較高，故在本系列文章中首先分享 Base 64 編碼技術。前面部分主要介紹 Base 64 理論性的內容，如果只看在 Java（SpringBoot）或 JS（Vue）中的實現，可以直接跳到最後... ...
Java 密碼系列 - Java 和 JS Base 64
Base 64 不屬於密碼技術，僅是編碼方式。但由於在 Java、JavaScript、區塊鏈等出現的頻率較高，故在本系列文章中首先分享 Base 64 編碼技術。前面部分主要介紹 Base 64 理論性的內容，如果只看在 Java（SpringBoot）或 JS（Vue）中的實現，可以直接跳到最後。
本文所有代碼可在 github 上獲取：
- 後端代碼搜索
hero-springboot-demo；- 前端代碼搜索
hero-vue3-demo。
1 Base 64 介紹
要說清楚 Base 64 編碼，首先得從 byte 開始說。
1.1 關於byte
在 Java 中，byte 是 8 種基本數據類型之一。byte 類型表示位元組，一個位元組由 8 個 bit （比特/位）組成。每個 bit 位表示一個二進位，即 0 或 1。在操作系統中，byte 是數據存儲的基本單位，如描述硬碟的大小是 512 MB，其基本單位就是 byte。
- bit：比特、位，每個 bit 不是 0 就是 1；
- byte：位元組，數據存儲的基本單位；
- 1 byte = 8 bit
在 Java 中可以通過 getBytes(StandardCharsets.UTF_8) 方法獲取字元串的 byte 數組。
@Test
public void testStrBytes() {
String str = "a";
byte[] bytes = str.getBytes(StandardCharsets.UTF_8);
for (byte b : bytes) {
System.out.println(b); // 97
System.out.println(Integer.toBinaryString(b)); // 1100001
}
}
字元 a 的 ASCII 碼是 97，通過 Integer.toBinaryString(b) 方法，獲取位元組對應的 bit 字元串。二進位 1100001 對應的十進位為 97。
一個英文字元對應了1個 byte，即 8 個 bit；如果是 3個英文字元，則會對應 3 個 byte，也就是 3 * 8 = 24 個 bit。徹底弄清楚 byte 和 bit 後，接下來看看 Base 64 編碼。
1.2 Base 64 組成
前面說過，Base 64 是一種編碼方式，目的是提高可讀性，不具有安全的功能。
從名字上看。64 是指 64 個字元，就是指這種編碼方式得到的結果在這 64 個字元中。註意，不是說編碼後的結果的長度為 64，而是組成編碼結果每一位的字元都在 64 個字元之內。這 64 個字元包括：
- 大寫 A - Z，共 26 個；
- 小寫 a - z，共 26個；
- 數字 0 - 9，共 10 個；
- 兩個符號：加號 + 和 斜線 /
26 + 26 + 10 + 2 = 64。
這 64 個字元各自對應一個值，依次為 0 - 63，例如 X 的碼值為23， 如果某一位計算後的結果為 23，則該位為 X。 具體對應關係如下圖所示：
在區塊鏈中有種類似的編碼 —— Base 58，與 Base 64 類似，在其基礎上少了 6 個字元，這六個字元包括 斜線 和 加號 兩個符號、看似雙胞胎的字元：數字 0、小寫字母 o、大寫字母 I 和 小寫字母 i。
1.3 Base 64 原理
在 1.1 中談到一個位元組 byte 為 8 個bit，那麼一個位元組的取值範圍就是 00000000 - 11111111，對應的十進位為 0 - 255，而上表中的碼值為 0 - 63，那 Base 64 是如何處理的呢，如何將所有字元、文字都控制在 0 - 63 之間呢？
- 首先進行分組。3 個位元組分為一組，由於一個位元組有 8 位（bit），一共就是 3 * 8 = 24 位；
- 接著分組轉換。把上面的 24 位分成 4 組，每組就有 24 / 4 = 6 位（bit）
- 最後高位補0。由於一個位元組 byte 為 8 位 bit，上面每組只有 6 位，於是就在高位補 0。
通過上面步驟，就將 3 個位元組 byte 轉換為 4 個位元組 byte，且轉換後的每個 byte 最高兩位都為 0，意味著轉換後的每個位元組都在 00000000 - 00111111 之間，對應的十進位就是 0 - 63。
上面說按 3 個位元組進行分組，但並非所有的字元或文本都是 3 的整數倍，這時候怎麼辦呢？當不夠 3 位時，首先補 0 進行分組，計算得到結果後使用了幾個 0 補齊就使用幾個等號 = 來補齊。差一位就用一個等號，差兩位就用兩個等號。
舉例：對字元串 ab 進行 Base64
字元串 ab 只占了兩個位元組，還差一位，於是最後一位補 0 來進行分組和計算，在最後使用一個等號=來補齊。計算過程如下圖所示：
這樣便得到字元串 ab Base 64 的結果為：YWI=
2 Java 實現
2.1 使用 java.util.Base64
JDK 中提供了 java.util.Base64 類來實現 Base 64 的編碼和解碼。
編碼：
Base64.getEncoder().encodeToString(bytes);
解碼：
Base64.getDecoder().decode(bytes);
2.2 使用 springframework
在 SpringBoot 中，springframework 對 java.util.Base64 進行了封裝，提供了 org.springframework.util.Base64Utils 類方便進行編碼和解碼。
package com.yygnb.demo.crypto;
import org.junit.Test;
import org.springframework.util.Base64Utils;
import java.nio.charset.StandardCharsets;
import java.util.Base64;
/**
* Base64 編碼解碼測試
*/
public class Base64Test {
/**
* JDK Base64 編碼
*/
@Test
public void testEncode() {
String result = Base64.getEncoder().encodeToString("ab".getBytes(StandardCharsets.UTF_8));
System.out.println(result); // YWI=
}
/**
* JDK Base64 解碼
*/
@Test
public void testDecode() {
byte[] decode = Base64.getDecoder().decode("YWI=");
String plainText = new String(decode);
System.out.println(plainText); // ab
}
/**
* springframework Base64 編碼
*/
@Test
public void testUtilsEncode() {
String result = Base64Utils.encodeToString("ab".getBytes(StandardCharsets.UTF_8));
System.out.println(result); // YWI=
}
/**
* springframework Base64 解碼
*/
@Test
public void testUtilsDecode() {
byte[] bytes = Base64Utils.decodeFromString("YWI=");
System.out.println(new String(bytes)); // ab
}
}
3 JS 實現
JS 在瀏覽器環境中有兩種實現方式：基於原生 JS 和基於 js-base64。
3.1 使用原生 JS
編碼：
window.btoa(unescape(encodeURIComponent(value)))
解碼：
decodeURIComponent(escape(window.atob(value)))
使用這種方式不需要額外添加依賴，但是相容性各種問題，不推薦使用。建議使用 js-base64 的方式。
3.2 使用 js-base64
js-base64 是使用較高的 Base 64 庫，使用方便，相容性和容錯性較好，推薦使用這種方式。
1）安裝依賴：
yarn add js-base64
2）引入 js-base64：
import { Base64 } from 'js-base64'
3）編碼：
Base64.encode(value)
4）解碼：
Base64.decode(value)
對應 demo 位於 src/views/base64.vue。
\/ “程式員優雅哥”，今日學習到此結束~~~
