Merge pull request '支持 iOS 密钥数据库导入' (#32) from feat/import-ios-keys into main

Reviewed-on: https://git.unlock-music.dev/um/um-react/pulls/32

.gitattributes

@@ -0,0 +1 @@
+*.mmkv binary

src/components/FilePathBlock.tsx

@@ -0,0 +1,10 @@
+import { Code, Text } from '@chakra-ui/react';
+import React from 'react';
+
+export function FilePathBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-all">
+      <Code>{children}</Code>
+    </Text>
+  );
+}

src/features/settings/Settings.tsx

@@ -4,6 +4,8 @@ import {
   Center,
   Flex,
   HStack,
+  Icon,
+  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -21,7 +23,7 @@ import {
 } from '@chakra-ui/react';
 import { PanelQMCv2Key } from './panels/PanelQMCv2Key';
 import { useState } from 'react';
-import { MdExpandMore, MdMenu } from 'react-icons/md';
+import { MdExpandMore, MdMenu, MdOutlineSettingsBackupRestore } from 'react-icons/md';
 import { useAppDispatch } from '~/hooks';
 import { commitStagingChange, discardStagingChanges } from './settingsSlice';
 
@@ -104,9 +106,14 @@ export function Settings() {
                   </Center>
                   <Spacer />
                   <HStack gap="2" justifyContent="flex-end">
-                    <Button onClick={handleResetSettings} colorScheme="red" variant="ghost" title="还原为更改前的状态">
+                    <IconButton
-                      丢弃更改
+                      icon={<Icon as={MdOutlineSettingsBackupRestore} />}
-                    </Button>
+                      onClick={handleResetSettings}
+                      colorScheme="red"
+                      variant="ghost"
+                      title="放弃未储存的更改，将设定还原为储存前的状态。"
+                      aria-label="放弃未储存的更改"
+                    />
                     <Button onClick={handleApplySettings}>保存</Button>
                   </HStack>
                 </Flex>

src/features/settings/panels/PanelQMCv2Key.tsx

@@ -45,22 +45,25 @@ export function PanelQMCv2Key() {
         QMCv2 密钥
       </Heading>
 
-      <Text>QQ 音乐目前采用的加密方案（QMCv2），安卓端与 Mac 端均下加密内容与密钥隔离储存。</Text>
+      <Text>
+        QQ 音乐目前采用的加密方案（QMCv2）。在使用「QQ 音乐」安卓、Mac 或 iOS
+        客户端的情况下，其「离线加密文件」对应的「密钥」储存在独立的数据库文件内。
+      </Text>
 
       <Box pb={2} pt={2}>
-        <ButtonGroup isAttached variant="outline">
+        <ButtonGroup isAttached colorScheme="purple" variant="outline">
           <Button onClick={addKey} leftIcon={<Icon as={MdAdd} />}>
-            添加
+            添加一条密钥
           </Button>
           <Menu>
             <MenuButton as={IconButton} icon={<MdExpandMore />}></MenuButton>
             <MenuList>
               <MenuItem onClick={() => setShowImportModal(true)} icon={<Icon as={MdFileUpload} boxSize={5} />}>
-                从文件导入
+                从文件导入密钥
               </MenuItem>
               <MenuDivider />
               <MenuItem color="red" onClick={clearAll} icon={<Icon as={MdDeleteForever} boxSize={5} />}>
-                清空
+                清空密钥
               </MenuItem>
             </MenuList>
           </Menu>

src/features/settings/panels/QMCv2/ImportFileModal.tsx

@@ -12,6 +12,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  Text,
   useToast,
 } from '@chakra-ui/react';
 
@@ -24,6 +25,8 @@ import { InstructionsAndroid } from './InstructionsAndroid';
 import { MMKVParser } from '~/util/MMKVParser';
 import { getFileName } from '~/util/pathHelper';
 import { InstructionsMac } from './InstructionsMac';
+import { InstructionsIOS } from './InstructionsIOS';
+import { InstructionsPC } from './InstructionsPC';
 
 export interface ImportFileModalProps {
   show: boolean;
@@ -52,7 +55,7 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
           alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
           return;
         }
-      } else if (/MMKVStreamEncryptId/i.test(file.name)) {
+      } else if (/MMKVStreamEncryptId|filenameEkeyMap/i.test(file.name)) {
         const fileBuffer = await file.arrayBuffer();
         const map = MMKVParser.toStringMap(new DataView(fileBuffer));
         qmc2Keys = Array.from(map.entries(), ([name, key]) => ({ name: getFileName(name), key }));
@@ -88,18 +91,28 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
             <FileInput onReceiveFiles={handleFileReceived}>拖放或点我选择含有密钥的数据库文件</FileInput>
           </Center>
 
-          <Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
+          <Text mt={2}>选择你的「QQ 音乐」客户端平台以查看对应说明：</Text>
+
+          <Flex as={Tabs} variant="enclosed" flexDir="column" flex={1} minH={0}>
             <TabList>
-              <Tab>安卓客户端</Tab>
+              <Tab>安卓</Tab>
-              <Tab>Mac 客户端</Tab>
+              <Tab>iOS</Tab>
+              <Tab>Mac</Tab>
+              <Tab>Windows</Tab>
             </TabList>
             <TabPanels flex={1} overflow="auto">
               <TabPanel>
                 <InstructionsAndroid />
               </TabPanel>
+              <TabPanel>
+                <InstructionsIOS />
+              </TabPanel>
               <TabPanel>
                 <InstructionsMac />
               </TabPanel>
+              <TabPanel>
+                <InstructionsPC />
+              </TabPanel>
             </TabPanels>
           </Flex>
         </Flex>

src/features/settings/panels/QMCv2/InstructionsIOS.tsx

@@ -0,0 +1,101 @@
+import { Box, Code, Heading, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/react';
+import { FilePathBlock } from '~/components/FilePathBlock';
+
+const EXAMPLE_MEDIA_ID = '0011wjLv1bIkvv';
+const EXAMPLE_NAME_IOS = '333407709-0011wjLv1bIkvv-1.mgalaxy';
+const EXAMPLE_NAME_DB = 'Q0M00011wjLv1bIkvv.mflac';
+
+export function InstructionsIOS() {
+  return (
+    <>
+      <Text>不推荐从该平台客户端提取文件，因为使用者需要对 iOS 设备进行完整备份。</Text>
+      <Heading as="h3" size="md" mt="3">
+        未越狱用户指南
+      </Heading>
+      <Text>未越狱用户需要对设备进行完整备份，并能提取备份内的文件。</Text>
+      <OrderedList>
+        <ListItem>
+          <Text>使用你喜欢的备份软件对 iOS 设备进行完整备份；</Text>
+        </ListItem>
+        <ListItem>
+          <Text>打开备份文件，并导航到下述目录：</Text>
+          <FilePathBlock>/AppDomain-com.tencent.QQMusic/Documents/mmkv/</FilePathBlock>
+        </ListItem>
+        <ListItem>
+          <Text>
+            提取或导出密钥数据库文件 <Code>filenameEkeyMap</Code>；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            提交导出的 <Code>filenameEkeyMap</Code> 文件；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>按下「保存」来应用更改。</Text>
+        </ListItem>
+      </OrderedList>
+      <Heading as="h3" size="md" mt="3">
+        获取离线文件
+      </Heading>
+      <Box>
+        <Text>通过客户端下载的音乐文件存储在备份的下述目录：</Text>
+        <Code>/AppDomain-com.tencent.QQMusic/Library/Application Support/com.tencent.QQMusic/iData/iMusic</Code>
+        <Text>
+          该目录又存在数个子目录，其子目录下保存的「<Code>*.mgalaxy</Code>」文件则是最终的加密文件。
+        </Text>
+        <Text>
+          格式：<Code>[随机数字]-[id]-[随机数字].mgalaxy</Code>
+        </Text>
+        <Text>
+          &#x3000;例：<Code>{EXAMPLE_NAME_IOS}</Code>
+        </Text>
+      </Box>
+      <Heading as="h3" size="md" mt="3">
+        解密离线文件
+      </Heading>
+      <OrderedList>
+        <ListItem>
+          <Text>
+            在上方的样例文件的情况下，得知其 id 为 <Code>{EXAMPLE_MEDIA_ID}</Code>；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            查找密钥表，得到文件名「<Code>{EXAMPLE_NAME_DB}</Code>」；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            将导出的「<Code>{EXAMPLE_NAME_IOS}</Code>」更名为数据库存储的文件名「
+            <Code>{EXAMPLE_NAME_DB}</Code>」；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            回到主界面，提交离线文件「<Code>{EXAMPLE_NAME_DB}</Code>」。
+          </Text>
+        </ListItem>
+      </OrderedList>
+      <Heading as="h3" size="md" mt="3">
+        越狱用户参考
+      </Heading>
+      <Text>该节信息根据网络上公开的信息整理，仅供参考。</Text>
+      <UnorderedList>
+        <ListItem>
+          <Text>密钥数据库文件路径：</Text>
+          <FilePathBlock>
+            /var/mobile/Containers/Data/Application/&lt;随机&gt;/Documents/mmkv/filenameEkeyMap
+          </FilePathBlock>
+        </ListItem>
+        <ListItem>
+          <Text>离线音乐文件下载目录：</Text>
+          <FilePathBlock>
+            /var/mobile/Containers/Data/Application/&lt;随机&gt;/Library/Application
+            Support/com.tencent.QQMusic/iData/iMusic
+          </FilePathBlock>
+        </ListItem>
+      </UnorderedList>
+    </>
+  );
+}

src/features/settings/panels/QMCv2/InstructionsMac.tsx

@@ -1,4 +1,5 @@
 import { Heading, Text, Code, Kbd, OrderedList, ListItem } from '@chakra-ui/react';
+import { FilePathBlock } from '~/components/FilePathBlock';
 import { MacCommandKey } from '~/components/Key/MacCommandKey';
 import { ShiftKey } from '~/components/Key/ShiftKey';
 
@@ -7,12 +8,9 @@ export function InstructionsMac() {
     <>
       <Text>Mac 客户端使用 mmkv 数据库储存密钥。</Text>
       <Text>该密钥文件通常存储在下述路径：</Text>
-      <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-word" lang="en">
+      <FilePathBlock>
-        <Code>
+        ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application Support/QQMusicMac/mmkv/MMKVStreamEncryptId
-          ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application
+      </FilePathBlock>
-          Support/QQMusicMac/mmkv/MMKVStreamEncryptId
-        </Code>
-      </Text>
 
       <Heading as="h3" size="md" mt="4">
         导入密钥

src/features/settings/panels/QMCv2/InstructionsPC.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@chakra-ui/react';
+
+export function InstructionsPC() {
+  return (
+    <>
+      <Text>使用 Windows 客户端下载的文件不需要导入密钥。</Text>
+    </>
+  );
+}

src/util/MMKVParser.ts

@@ -1,28 +1,29 @@
+import { formatHex } from './formatHex';
+
 const textDecoder = new TextDecoder('utf-8', { ignoreBOM: true });
 
 export class MMKVParser {
-  private offset = 8;
+  private offset = 4;
   private length: number;
 
   constructor(private view: DataView) {
     const payloadLength = view.getUint32(0, true);
     this.length = 4 + payloadLength;
+
+    // skip unused str
+    this.readInt();
   }
 
   toString() {
-    const offset = this.offset.toString(16).padStart(8, '0');
+    const offset = formatHex(this.offset, 8);
-    const length = this.length.toString(16).padStart(8, '0');
+    const length = formatHex(this.length, 8);
-    return `<MMKVParser offset=0x${offset} len=0x${length}>`;
+    return `<MMKVParser offset=${offset} len=${length}>`;
   }
 
   get eof() {
     return this.offset >= this.length;
   }
 
-  peek() {
-    return this.view.getUint8(this.offset);
-  }
-
   public readByte() {
     return this.view.getUint8(this.offset++);
   }
@@ -77,7 +78,9 @@ export class MMKVParser {
     const newOffset = this.offset + containerLen;
     const result = this.readString();
     if (newOffset !== this.offset) {
-      throw new Error('readVariantString failed: offset does not match');
+      const expected = formatHex(newOffset);
+      const actual = formatHex(this.offset);
+      throw new Error(`readVariantString failed: offset does mismatch (expect: ${expected}, actual: ${actual})`);
     }
     return result;
   }

src/util/__tests__/MMKVParser.test.ts

@@ -0,0 +1,19 @@
+import { MMKVParser } from '../MMKVParser';
+import { readFileSync } from 'node:fs';
+
+test('parse mmkv file as expected', () => {
+  const buff = readFileSync(__dirname + '/__fixture__/test.mmkv');
+  const view = new DataView(buff.buffer.slice(buff.byteOffset, buff.byteOffset + buff.byteLength));
+  expect(MMKVParser.toStringMap(view)).toEqual(
+    new Map([
+      ['key', 'value'],
+      [
+        'Lorem Ipsum',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+          'Vestibulum congue volutpat metus non molestie. Quisque id est sapien. ' +
+          'Fusce eget tristique sem. Donec tellus lacus, viverra sed lectus eget, elementum ultrices dolor. ' +
+          'Integer non urna justo.',
+      ],
+    ])
+  );
+});

src/util/formatHex.ts

@@ -0,0 +1,3 @@
+export function formatHex(value: number, len = 8) {
+  return '0x' + (value | 0).toString(16).padStart(len, '0');
+}