feat. wbi签名算法添加typescript实现 (#1031)

* feat. wbi签名算法添加typescript实现

* fix. Fixed missing quotes in User-Agent header in WBI JS demo

docs/misc/sign/wbi.md

@@ -201,7 +201,10 @@ bar=514&baz=1919810&foo=114&wts=1702204169&w_rid=d3cbd2a2316089117134038bf4caf44
 
 ### JavaScript
 
-需要 `axios`、`md5` 依赖
+需要 `fetch`(浏览器、NodeJS等环境自带)、`md5` 依赖
+
+<CodeGroup>
+  <CodeGroupItem title="JavaScript">
 
 ```javascript
 import md5 from 'md5'
@@ -244,8 +247,8 @@ async function getWbiKeys() {
   const res = await fetch('https://api.bilibili.com/x/web-interface/nav', {
     headers: {
       // SESSDATA 字段
-      Cookie: "SESSDATA=xxxxxx",
-      User-Agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+      Cookie: 'SESSDATA=xxxxxx',
+      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
       Referer: 'https://www.bilibili.com/'//对于直接浏览器调用可能不适用
     }
   })
@@ -275,6 +278,99 @@ async function main() {
 main()
 ```
 
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TypeScript">
+
+```typescript
+import md5 from 'md5'
+
+const mixinKeyEncTab = [
+  46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49,
+  33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13, 37, 48, 7, 16, 24, 55, 40,
+  61, 26, 17, 0, 1, 60, 51, 30, 4, 22, 25, 54, 21, 56, 59, 6, 63, 57, 62, 11,
+  36, 20, 34, 44, 52
+]
+
+// 对 imgKey 和 subKey 进行字符顺序打乱编码
+const getMixinKey = (orig: string) =>
+  mixinKeyEncTab
+    .map((n) => orig[n])
+    .join("")
+    .slice(0, 32);
+
+// 为请求参数进行 wbi 签名
+function encWbi(
+  params: { [key: string]: string | number | object },
+  img_key: string,
+  sub_key: string
+) {
+  const mixin_key = getMixinKey(img_key + sub_key),
+    curr_time = Math.round(Date.now() / 1000),
+    chr_filter = /[!'()*]/g;
+
+  Object.assign(params, { wts: curr_time }); // 添加 wts 字段
+  // 按照 key 重排参数
+  const query = Object.keys(params)
+    .sort()
+    .map((key) => {
+      // 过滤 value 中的 "!'()*" 字符
+      const value = params[key].toString().replace(chr_filter, "");
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join("&");
+
+  const wbi_sign = md5(query + mixin_key); // 计算 w_rid
+
+  return query + "&w_rid=" + wbi_sign;
+}
+// 获取最新的 img_key 和 sub_key
+async function getWbiKeys(SESSDATA: string) {
+  const res = await fetch('https://api.bilibili.com/x/web-interface/nav', {
+    headers: {
+      // SESSDATA 字段
+      Cookie: `SESSDATA=${SESSDATA}`,
+      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+      Referer: 'https://www.bilibili.com/'//对于直接浏览器调用可能不适用
+    }
+  })
+  const {
+    data: {
+      wbi_img: { img_url, sub_url },
+    },
+  } = (await res.json()) as {
+    data: {
+      wbi_img: { img_url: string; sub_url: string };
+    };
+  };
+
+  return {
+    img_key: img_url.slice(
+      img_url.lastIndexOf('/') + 1,
+      img_url.lastIndexOf('.')
+    ),
+    sub_key: sub_url.slice(
+      sub_url.lastIndexOf('/') + 1,
+      sub_url.lastIndexOf('.')
+    )
+  }
+}
+
+async function main() {
+  const web_keys = await getWbiKeys("SESSDATA的值")
+  const params = { foo: '114', bar: '514', baz: 1919810 },
+    img_key = web_keys.img_key,
+    sub_key = web_keys.sub_key
+  const query = encWbi(params, img_key, sub_key)
+  console.log(query)
+}
+
+main()
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
 输出内容为进行 Wbi 签名的后参数的 url query 形式
 
 ```