快速掌握 Base 64 | 學 Java 密碼系列

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。 具體對應關係如下圖所示:

image-20220815010154596

在區塊鏈中有種類似的編碼 —— 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 來進行分組和計算,在最後使用一個等號=來補齊。計算過程如下圖所示:

image-20220815015739522

這樣便得到字符串 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
image

\/ 「程序員優雅哥」,今日學習到此結束~~~