feat: cookie display

.eslintrc.cjs

@@ -23,6 +23,9 @@ module.exports = {
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/explicit-member-accessibility': 'warn',
+    '@typescript-eslint/member-ordering': 'warn',
     '@typescript-eslint/consistent-type-imports': [
       'error',
       {

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

README.md

@@ -0,0 +1,9 @@
+## 哔哩哔哩 cookie 获取工具
+
+扫码登录获取B站 cookie，用于各种开发场景
+
+Vercel 部署：[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FTsuk1ko%2Fbilibili-qr-login)
+
+### TODO
+
+- [ ] iframe / 窗口 模式

_api/qr.ts

@@ -6,15 +6,35 @@ import type { StreamingApi } from 'hono/utils/stream';
 enum SSEEvent {
   GENERATE = 'generate',
   POLL = 'poll',
+  END = 'end',
 }
 
+enum PollQrResultCode {
+  SUCCESS = 0,
+  EXPIRED = 86038,
+  NOT_CONFIRMED = 86090,
+  NOT_SCANNED = 86101,
+}
+
+const keepPollQrResultCode = new Set([PollQrResultCode.NOT_CONFIRMED, PollQrResultCode.NOT_SCANNED]);
+
 export const runtime = 'edge';
 
 export const app = new Hono().basePath('/api');
 
-app.get('/qr', c =>
-  streamSSE(c, async stream => {
-    // 指定编码
+app.get('/qr', c => {
+  if (process.env.NODE_ENV !== 'development') {
+    try {
+      const referer = c.req.header('Referer');
+      if (!referer || new URL(referer).origin !== new URL(c.req.url).origin) {
+        return c.text('', 403);
+      }
+    } catch {
+      return c.text('', 403);
+    }
+  }
+  return streamSSE(c, async stream => {
+    // 编码加上 charset
     c.header('Content-Type', 'text/event-stream; charset=utf-8');
 
     let streamClosed = false;
@@ -22,28 +42,45 @@ app.get('/qr', c =>
       streamClosed = true;
     });
 
+    // 断线重连时的 key
+    const lastEventID = c.req.header('Last-Event-ID');
+
     // 获取登录链接
-    const qr = new LoginQr();
-    await stream.writeSSE({ data: JSON.stringify(await qr.generate()), event: SSEEvent.GENERATE });
-    await stream.sleep(2000);
+    const qr = new LoginQr(c.req.header('User-Agent'), lastEventID);
+    if (!lastEventID) {
+      const genRes = await qr.generate();
+      console.log('generate', Date.now());
+      await stream.writeSSE({ data: JSON.stringify(genRes), event: SSEEvent.GENERATE, id: genRes.key });
+      if (genRes.code !== 0) {
+        await stream.writeSSE({ data: '', event: SSEEvent.END });
+        await stream.close();
+        return;
+      }
+      await stream.sleep(2000);
+    }
 
-    for (let i = 0; i < 30 && !streamClosed; i++) {
-      console.log('poll', Date.now());
+    // 轮询
+    for (let i = 0; i < 100 && !streamClosed; i++) {
+      console.log('poll', i, Date.now());
       const result = await qr.poll();
       await stream.writeSSE({ data: JSON.stringify(result), event: SSEEvent.POLL });
-      if (result.code === 0) {
-        stream.close();
-        break;
+      if (!keepPollQrResultCode.has(result.code)) {
+        await stream.writeSSE({ data: '', event: SSEEvent.END });
+        await stream.close();
+        return;
       }
       await stream.sleep(2000);
     }
-  }),
-);
+
+    await stream.writeSSE({ data: '超时终止', event: SSEEvent.END });
+    await stream.close();
+  });
+});
 
 export const GET = handle(app);
 
 interface GenerateQrResp {
-  code: string;
+  code: number;
   message: string;
   ttl: number;
   data: {
@@ -53,7 +90,7 @@ interface GenerateQrResp {
 }
 
 interface PollQrResp {
-  code: string;
+  code: number;
   message: string;
   ttl: number;
   data: {
@@ -72,34 +109,56 @@ interface PollQrResult {
 }
 
 class LoginQr {
-  private key = '';
+  private readonly header: Record<string, string | undefined> = {};
+
+  public constructor(
+    userAgent?: string,
+    private key = '',
+  ) {
+    this.header = {
+      'User-Agent': userAgent,
+      Origin: 'https://www.bilibili.com',
+      Referer: 'https://www.bilibili.com/',
+    };
+  }
 
   public async generate() {
-    const r = await fetch('https://passport.bilibili.com/x/passport-login/web/qrcode/generate?source=main-fe-header');
+    const r = await fetch('https://passport.bilibili.com/x/passport-login/web/qrcode/generate?source=main-fe-header', {
+      headers: this.header,
+    });
     const {
-      data: { url, qrcode_key: key },
+      code,
+      message,
+      data: { url, qrcode_key: key } = { url: '', qrcode_key: '' },
     } = (await r.json()) as GenerateQrResp;
     this.key = key;
-    return { url, key };
+    return { code, msg: message, url, key };
   }
 
   public async poll() {
     const r0 = await fetch(
       `https://passport.bilibili.com/x/passport-login/web/qrcode/poll?qrcode_key=${this.key}&source=main-fe-header`,
+      { headers: this.header },
     );
-    const { data } = (await r0.json()) as PollQrResp;
-    const result: PollQrResult = {
-      code: data.code,
-      msg: data.message,
-    };
-
-    if (data.code !== 0) return result;
+    const { code, message, data } = (await r0.json()) as PollQrResp;
+    const result: PollQrResult =
+      code === 0
+        ? {
+            code: data.code,
+            msg: data.message,
+          }
+        : {
+            code: Number(code),
+            msg: message,
+          };
+
+    if (result.code !== 0) return result;
 
     const cookie = new Cookie(r0.headers.getSetCookie());
     const r1 = await fetch(data.url);
 
     cookie.add(r1.headers.getSetCookie());
-    result.cookie = cookie.toString();
+    result.cookie = cookie.del('i-wanna-go-back').toString();
 
     return result;
   }
@@ -118,6 +177,12 @@ class Cookie {
       const [name, ...values] = nv.split('=');
       this.cookie.set(name, values.join('='));
     });
+    return this;
+  }
+
+  public del(name: string) {
+    this.cookie.delete(name);
+    return this;
   }
 
   public toString() {

server/utils.ts

@@ -16,7 +16,7 @@ export const startApiServer = async () => {
   nodemon({
     script: 'server/index.ts',
     ext: 'ts',
-    watch: ['_api'],
+    watch: ['_api', 'server'],
     execMap: {
       ts: 'tsx',
     },

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center">
+  <div class="text-center no-select">
     <h2>哔哩哔哩 cookie 获取工具</h2>
     <p>
       使用手机 APP 扫码登录后即可获取 cookie (<a
@@ -10,89 +10,37 @@
       >)
     </p>
   </div>
-  <div class="qrcode flex">
-    <QrCode :value="qrValue" :options="qrCodeOption" />
-    <div v-if="qrStatus !== QrStatus.WAIT" class="qrcode__mask flex">
-      <CheckIcon v-if="qrStatus === QrStatus.SCANNED || qrStatus === QrStatus.SUCCESS" />
-      <RefreshBtn v-else />
+  <div class="qrcode flex no-select">
+    <QrCode v-if="state.url" :value="state.url" :options="qrCodeOption" />
+    <div v-if="state.status !== QrStatus.WAIT" class="qrcode__mask flex">
+      <CheckIcon v-if="state.status === QrStatus.SCANNED || state.status === QrStatus.SUCCESS" />
+      <RefreshBtn v-else @click="restart" />
     </div>
   </div>
-  <div class="text-center">
-    <p>{{ qrStatusText }}</p>
+  <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 { computed, ref } from 'vue';
 import QrCode from '@chenfengyuan/vue-qrcode';
 import RefreshBtn from './components/RefreshBtn.vue';
+import CookieDisplay from './components/CookieDisplay.vue';
 import CheckIcon from './assets/icons/check_circle.svg';
+import { useQrSSE, QrStatus } from './utils/qrSSE';
 import type { QRCodeRenderersOptions } from 'qrcode';
 
-enum QrStatus {
-  WAIT,
-  SCANNED,
-  EXPIRED,
-  SUCCESS,
-  ERROR,
-}
-
 const qrCodeOption: QRCodeRenderersOptions = {
   margin: 0,
 };
 
-const qrValue = ref(
-  'https://passport.bilibili.com/h5-app/passport/login/scan?navhide=1&qrcode_key=ed99a307afd9a309098071fb9d9258a7&from=main-fe-header',
-);
-const qrErrorMsg = ref('');
-const qrStatus = ref(QrStatus.EXPIRED);
-const qrStatusText = computed(() => {
-  if (qrErrorMsg.value) return qrErrorMsg.value;
-
-  switch (qrStatus.value) {
-    case QrStatus.WAIT:
-      return '等待扫码';
-    case QrStatus.SCANNED:
-      return '已扫码，等待登录';
-    case QrStatus.EXPIRED:
-      return '二维码已过期，请刷新';
-  }
-
-  return '';
-});
+const { state, getters, restart } = useQrSSE();
 </script>
 
-<style lang="less">
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: auto;
-}
-
-body,
-#app,
-.flex {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.link {
-  color: rgb(0, 0, 238);
-  text-decoration: none;
-}
-
+<style scoped lang="less">
 .qrcode {
   position: relative;
   min-width: 196px;
@@ -107,4 +55,8 @@ body,
     background-color: rgba(255, 255, 255, 0.85);
   }
 }
+
+.cookie-box {
+  min-height: 180px;
+}
 </style>

src/components/CookieDisplay.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="cookie">
+    <pre ref="pre" class="cookie__pre">{{ value }}</pre>
+    <div class="cookie__copy flex flex-row btn" @click="copy"><CopyIcon style="margin-right: 4px" />{{ text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CopyIcon from '../assets/icons/content_copy.svg';
+import { useTipText } from '../utils/tipText';
+
+defineProps<{ value: string }>();
+
+const pre = ref<HTMLElement>();
+const { text, changeText } = useTipText('复制');
+
+const copy = () => {
+  const selection = window.getSelection()!;
+  const range = window.document.createRange();
+  selection.removeAllRanges();
+  range.selectNode(pre.value!);
+  selection.addRange(range);
+  window.document.execCommand('copy');
+  selection.removeAllRanges();
+  changeText('已复制');
+};
+</script>
+
+<style lang="less" scoped>
+.cookie {
+  max-width: 596px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  &__pre {
+    text-wrap: wrap;
+    word-break: break-all;
+    margin: 0;
+    padding: 8px;
+  }
+
+  &__copy {
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+</style>

src/components/RefreshBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="refresh-btn flex"><RefreshIcon /></div>
+  <div class="refresh-btn btn flex"><RefreshIcon /></div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,9 @@ import RefreshIcon from '../assets/icons/refresh.svg';
   height: 32px;
   background-color: #fff;
   border-radius: 50%;
-  cursor: pointer;
+  box-shadow:
+    0 1.25px 5px 0 rgba(0, 0, 0, 0.2),
+    0 0.3333px 1.5px 0 rgba(0, 0, 0, 0.04);
+  overflow: hidden;
 }
 </style>

src/main.ts

@@ -1,3 +1,4 @@
+import './style.less';
 import { createApp } from 'vue';
 import App from './App.vue';
 

src/style.less

@@ -0,0 +1,65 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+body,
+#app,
+.flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+#app {
+  margin: 0 16px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.no-select {
+  user-select: none;
+}
+
+.link {
+  color: rgb(0, 0, 238);
+  text-decoration: none;
+}
+
+.btn {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+
+  &::after {
+    position: absolute;
+    content: '';
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    transition: background-color 0.1s;
+  }
+
+  &:hover::after {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  &:active::after {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+}

src/utils/qrSSE.ts

@@ -0,0 +1,155 @@
+import { computed, reactive } from 'vue';
+
+enum SSEEvent {
+  GENERATE = 'generate',
+  POLL = 'poll',
+  END = 'end',
+}
+
+interface SSEGenerateData {
+  code: number;
+  msg: string;
+  url: string;
+  key: string;
+}
+
+interface SSEPollData {
+  code: number;
+  msg: string;
+  cookie?: string;
+}
+
+enum PollQrResultCode {
+  SUCCESS = 0,
+  EXPIRED = 86038,
+  NOT_CONFIRMED = 86090,
+  NOT_SCANNED = 86101,
+}
+
+export enum QrStatus {
+  WAIT,
+  SCANNED,
+  EXPIRED,
+  SUCCESS,
+  ERROR,
+}
+
+interface QrState {
+  url: string;
+  cookie: string;
+  errMsg: string;
+  status: QrStatus;
+}
+
+const defaultState = (): QrState => ({
+  url: '',
+  cookie: '',
+  errMsg: '',
+  status: QrStatus.WAIT,
+});
+
+class QrSSE {
+  private es!: EventSource;
+
+  public constructor(private state: QrState) {
+    this.start();
+  }
+
+  public restart() {
+    Object.assign(this.state, defaultState());
+    this.start();
+  }
+
+  public stop() {
+    if (!this.es) return;
+    this.es.close();
+  }
+
+  private start() {
+    this.stop();
+    this.es = new EventSource('/api/qr');
+    this.es.addEventListener(SSEEvent.GENERATE, this.handleMessage);
+    this.es.addEventListener(SSEEvent.POLL, this.handleMessage);
+    this.es.addEventListener(SSEEvent.END, this.handleEnd);
+  }
+
+  private handleMessage = ({ type, data }: MessageEvent<string>) => {
+    const obj = JSON.parse(data);
+    console.log(type, obj);
+
+    switch (type) {
+      case SSEEvent.POLL:
+        this.handlePoll(obj);
+        break;
+      case SSEEvent.GENERATE:
+        this.handleGenerate(obj);
+        break;
+    }
+  };
+
+  private handleEnd = ({ data }: MessageEvent<string>) => {
+    if (data) this.handleError(data);
+    this.stop();
+  };
+
+  private handleError(msg: string) {
+    this.state.errMsg = msg;
+    this.state.status = QrStatus.ERROR;
+    return;
+  }
+
+  private handleGenerate({ code, msg, url }: SSEGenerateData) {
+    if (code !== 0) {
+      this.handleError(msg);
+      return;
+    }
+
+    this.state.url = url;
+    this.state.status = QrStatus.WAIT;
+  }
+
+  private handlePoll({ code, msg, cookie }: SSEPollData) {
+    switch (code) {
+      case PollQrResultCode.NOT_SCANNED:
+        this.state.status = QrStatus.WAIT;
+        break;
+      case PollQrResultCode.NOT_CONFIRMED:
+        this.state.status = QrStatus.SCANNED;
+        break;
+      case PollQrResultCode.EXPIRED:
+        this.state.status = QrStatus.EXPIRED;
+        break;
+      case PollQrResultCode.SUCCESS:
+        this.state.status = QrStatus.SUCCESS;
+        this.state.cookie = cookie!;
+        break;
+      default:
+        this.handleError(msg);
+        break;
+    }
+  }
+}
+
+export const useQrSSE = () => {
+  const state = reactive<QrState>(defaultState());
+  const getters = reactive({
+    statusText: computed(() => {
+      switch (state.status) {
+        case QrStatus.WAIT:
+          return '等待扫码';
+        case QrStatus.SCANNED:
+          return '已扫码，等待登录';
+        case QrStatus.EXPIRED:
+          return '二维码已过期，请刷新';
+        case QrStatus.SUCCESS:
+          return '登录成功';
+        default:
+          return state.errMsg;
+      }
+    }),
+  });
+
+  const qrSSE = new QrSSE(state);
+
+  return { state, getters, restart: qrSSE.restart.bind(qrSSE) };
+};

src/utils/tipText.ts

@@ -0,0 +1,17 @@
+import { ref } from 'vue';
+
+export const useTipText = (initText: string) => {
+  const text = ref(initText);
+  let timer: NodeJS.Timeout | undefined;
+
+  const changeText = (tipText: string, timeout = 2000) => {
+    if (timer) clearTimeout(timer);
+    text.value = tipText;
+    timer = setTimeout(() => {
+      text.value = initText;
+      timer = undefined;
+    }, timeout);
+  };
+
+  return { text, changeText };
+};

vercel.json

@@ -0,0 +1,5 @@
+{
+  "github": {
+    "silent": true
+  }
+}