Spaces:

Mashir0
/

bilibili-qr-login

Running

App Files Files Community

神代綺凛 commited on Jan 8

Commit

55151cc

•

1 Parent(s): 4ba7e27

feat: iframe / window mode

Browse files

Files changed (13) hide show

README.md +29 -3
dev/index.html +15 -0
dev/src/App.vue +64 -0
dev/src/main.ts +5 -0
dev/src/utils/openWindow.ts +39 -0
index.html +1 -1
src/App.vue +8 -9
src/utils/const.ts +14 -0
src/utils/postMessage.ts +24 -0
src/utils/qrSSE.ts +2 -0
src/vite-env.d.ts +2 -0
tsconfig.json +1 -1
vite.config.ts +4 -1

README.md CHANGED Viewed

@@ -1,7 +1,33 @@
 ## 哔哩哔哩 cookie 获取工具
-扫码登录获取B站 cookie，用于各种开发场景
-### TODO
-- [ ] iframe / 窗口 模式

 ## 哔哩哔哩 cookie 获取工具
+扫码登录获取B站 cookie，可与各种场景联动
+## iframe / window 模式
+该工具可以通过 `<iframe>` 或 `window.open()` 联动使用
+1. 编译时设置环境变量 `TRUST_ORIGIN`，值为你允许通过 `<iframe>` 或 `window.open()` 调用的源，多个之间用英文逗号 `,` 分隔，例如 `https://example.com,https://abc.example.com`
+   - 不设置时则无法正常使用 iframe / window 模式
+   - 可设置为 `*`，允许所有页面调用，但不推荐，除非你知道这意味着什么
+   - 在本地开发时若未提供则默认为 `*`
+2. 带上查询参数 `mode=iframe` 或 `mode=window` 进行使用（访问），然后监听 `message` 事件获取登陆成功后的 cookie
+   - 请参考 [demo](https://github.com/Tsuk1ko/bilibili-qr-login/blob/main/dev/src/App.vue)
+   - 本地开发访问 http://localhost:5173/dev/ 可体验效果
+## 开发
+要求 Node.js >= 18
+```bash
+# 安装依赖
+yarn
+# 开发
+yarn dev
+# 编译
+yarn build
+# 预览成品（需要先编译）
+yarn preview # http://localhost:3000
+```

dev/index.html ADDED Viewed

	@@ -0,0 +1,15 @@

+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"
+    />
+    <title>开发专用页面</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>

dev/src/App.vue ADDED Viewed

	@@ -0,0 +1,64 @@

+<template>
+  <button class="test-btn" @click="openWindow">打开新窗口</button>
+  <button class="test-btn" @click="toggleIframe">{{ showIframe ? '关闭' : '打开' }} iframe</button>
+  <iframe v-if="showIframe" src="/?mode=iframe" width="380" height="340" style="border: none" />
+  <div class="cookie-box">
+    <CookieDisplay v-if="cookieResult" :value="cookieResult" />
+  </div>
+</template>
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import CookieDisplay from '../../src/components/CookieDisplay.vue';
+import { openQrWindow } from './utils/openWindow';
+const cookieResult = ref('');
+const showIframe = ref(false);
+const openWindow = () => {
+  cookieResult.value = '';
+  openQrWindow('/?mode=window');
+};
+const toggleIframe = () => {
+  cookieResult.value = '';
+  showIframe.value = !showIframe.value;
+};
+interface QrMessage {
+  type: 'success';
+  mode: 'window' | 'iframe';
+  data: string;
+}
+const handleMessage = (e: MessageEvent<QrMessage>) => {
+  // 【重要】校验 message 来自扫码窗口/iframe
+  if (e.origin !== window.location.origin) return;
+  const { type, data, mode } = e.data;
+  if (type === 'success') {
+    cookieResult.value = data;
+    if (mode === 'window') {
+      (e.source as Window | null)?.close();
+    } else if (mode === 'iframe') {
+      showIframe.value = false;
+    }
+  }
+};
+window.addEventListener('message', handleMessage);
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleMessage);
+});
+</script>
+<style scoped lang="less">
+.test-btn {
+  margin-bottom: 16px;
+}
+.cookie-box {
+  min-height: 180px;
+}
+</style>

dev/src/main.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+import '../../src/style.less';
+import { createApp } from 'vue';
+import App from './App.vue';
+createApp(App).mount('#app');

dev/src/utils/openWindow.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+interface ScreenExt extends Screen {
+  availLeft: number;
+  availTop: number;
+}
+const getCenterPosition = (width: number, height: number) => {
+  const screenLeft = window.screenLeft !== undefined ? window.screenLeft : (window.screen as ScreenExt).availLeft;
+  const screenTop = window.screenTop !== undefined ? window.screenTop : (window.screen as ScreenExt).availTop;
+  const screenWidth = window.screen.width || window.outerWidth || document.documentElement.clientWidth;
+  const screenHeight = window.screen.height || window.outerWidth || document.documentElement.clientHeight;
+  return {
+    left: Math.round((screenWidth - width) / 2 + screenLeft),
+    top: Math.round((screenHeight - height) / 2 + screenTop),
+  };
+};
+const getFeaturesStr = (features: Record<string, any>) =>
+  Object.entries(features)
+    .map(([k, v]) => `${k}=${v}`)
+    .join(',');
+export const openQrWindow = (url: string) => {
+  const width = 380;
+  const height = 340;
+  const features = getFeaturesStr({
+    width,
+    height,
+    location: false,
+    menubar: false,
+    resizeable: false,
+    scrollbars: false,
+    status: false,
+    toolbar: false,
+    ...getCenterPosition(width, height),
+  });
+  return window.open(url, '_blank', features);
+};

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"
     />
-    <title>哔哩哔哩 cookie 获取工具</title>
   </head>
   <body>
     <div id="app"></div>

       name="viewport"
       content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"
     />
+    <title></title>
   </head>
   <body>
     <div id="app"></div>

src/App.vue CHANGED Viewed

@@ -1,8 +1,8 @@
 <template>
   <div class="text-center no-select">
-    <h2>哔哩哔哩 cookie 获取工具</h2>
     <p>
-      使用手机 APP 扫码登录后即可获取 cookie (<a
         class="link"
         href="https://github.com/Tsuk1ko/bilibili-qr-login"
         target="_blank"
@@ -21,32 +21,31 @@
   <div class="text-center no-select">
     <p>{{ getters.statusText }}</p>
   </div>
-  <div class="cookie-box">
     <CookieDisplay v-if="state.cookie" :value="state.cookie" />
   </div>
 </template>
 <script setup lang="ts">
 import QrCode from '@chenfengyuan/vue-qrcode';
 import RefreshBtn from './components/RefreshBtn.vue';
 import CookieDisplay from './components/CookieDisplay.vue';
 import LoadingIcon from './components/LoadingIcon.vue';
 import CheckIcon from './assets/icons/check_circle.svg';
 import { useQrSSE, QrStatus } from './utils/qrSSE';
 import type { QRCodeRenderersOptions } from 'qrcode';
 const qrCodeOption: QRCodeRenderersOptions = {
   margin: 0,
 };
 const { state, getters, restart, stop } = useQrSSE();
-// 开发热重载时关闭上次的 SSE
-if (import.meta.hot) {
-  import.meta.hot.accept(() => {
-    stop();
-  });
-}
 </script>
 <style scoped lang="less">

 <template>
   <div class="text-center no-select">
+    <h2 v-if="!PARAM_MODE">哔哩哔哩 cookie 获取工具</h2>
     <p>
+      {{ PARAM_MODE ? '请使用哔哩哔哩手机 APP 扫码登录' : '使用手机 APP 扫码登录后即可获取 cookie' }} (<a
         class="link"
         href="https://github.com/Tsuk1ko/bilibili-qr-login"
         target="_blank"
   <div class="text-center no-select">
     <p>{{ getters.statusText }}</p>
   </div>
+  <div v-if="!PARAM_MODE" class="cookie-box">
     <CookieDisplay v-if="state.cookie" :value="state.cookie" />
   </div>
 </template>
 <script setup lang="ts">
 import QrCode from '@chenfengyuan/vue-qrcode';
+import { onBeforeUnmount } from 'vue';
 import RefreshBtn from './components/RefreshBtn.vue';
 import CookieDisplay from './components/CookieDisplay.vue';
 import LoadingIcon from './components/LoadingIcon.vue';
 import CheckIcon from './assets/icons/check_circle.svg';
 import { useQrSSE, QrStatus } from './utils/qrSSE';
+import { PARAM_MODE } from './utils/const';
 import type { QRCodeRenderersOptions } from 'qrcode';
+window.document.title = PARAM_MODE ? '登录哔哩哔哩' : '哔哩哔哩 cookie 获取工具';
 const qrCodeOption: QRCodeRenderersOptions = {
   margin: 0,
 };
 const { state, getters, restart, stop } = useQrSSE();
+onBeforeUnmount(stop);
 </script>
 <style scoped lang="less">

src/utils/const.ts ADDED Viewed

	@@ -0,0 +1,14 @@

+export const IS_DEV = process.env.NODE_ENV === 'development';
+export const PARAM_MODE = (new URL(window.location.href).searchParams.get('mode') || '') as 'window' | 'iframe' | '';
+const trustOriginStr = __TRUST_ORIGIN__;
+export const TRUST_ALL_ORIGIN = trustOriginStr.trim() === '*';
+export const trustOrigins = new Set(
+  trustOriginStr
+    .split(',')
+    .map(s => s.trim())
+    .filter(Boolean),
+);

src/utils/postMessage.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import { PARAM_MODE, TRUST_ALL_ORIGIN, trustOrigins } from './const';
+interface QrMessage {
+  type: 'success';
+  mode: string;
+  data: string;
+}
+export const postQrMessage = (data: Omit<QrMessage, 'mode'>) => {
+  if (!PARAM_MODE) return;
+  const targetWindow: Window | null =
+    PARAM_MODE === 'window' ? window.opener : PARAM_MODE === 'iframe' ? window.top : null;
+  if (!targetWindow) {
+    console.error('No target window');
+    return;
+  }
+  const origin = targetWindow.location.origin;
+  if (!TRUST_ALL_ORIGIN && !trustOrigins.has(origin)) {
+    console.warn('Untrusted origin:', origin);
+    return;
+  }
+  const message: QrMessage = { ...data, mode: PARAM_MODE };
+  targetWindow.postMessage(message, origin);
+};

src/utils/qrSSE.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { computed, reactive } from 'vue';
 enum SSEEvent {
   GENERATE = 'generate',
@@ -123,6 +124,7 @@ class QrSSE {
       case PollQrResultCode.SUCCESS:
         this.state.status = QrStatus.SUCCESS;
         this.state.cookie = cookie!;
         break;
       default:
         this.handleError(msg);

 import { computed, reactive } from 'vue';
+import { postQrMessage } from './postMessage';
 enum SSEEvent {
   GENERATE = 'generate',
       case PollQrResultCode.SUCCESS:
         this.state.status = QrStatus.SUCCESS;
         this.state.cookie = cookie!;
+        postQrMessage({ type: 'success', data: cookie! });
         break;
       default:
         this.handleError(msg);

src/vite-env.d.ts CHANGED Viewed

@@ -1,2 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />

 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
+declare const __TRUST_ORIGIN__: string;

tsconfig.json CHANGED Viewed

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "dev/**/*.ts", "dev/**/*.tsx", "dev/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import svgLoader from 'vite-svg-loader';
 import { startApiServer } from './server/utils';
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
   if (command === 'serve') startApiServer();
   return {
     plugins: [vue(), svgLoader()],
@@ -16,5 +16,8 @@ export default defineConfig(({ command }) => {
     build: {
       outDir: 'dist/static',
     },
   };
 });

 import { startApiServer } from './server/utils';
 // https://vitejs.dev/config/
+export default defineConfig(({ command, mode }) => {
   if (command === 'serve') startApiServer();
   return {
     plugins: [vue(), svgLoader()],
     build: {
       outDir: 'dist/static',
     },
+    define: {
+      __TRUST_ORIGIN__: JSON.stringify(process.env.TRUST_ORIGIN || (mode === 'development' ? '*' : '')),
+    },
   };
 });