zzh/2fa-tool
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/2fa-tool.git synced 2026-04-18 14:22:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamically import jsQR for client-side only loading

Browse Source 
Avoid server-side rendering issues with jsQR library.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-03-07 15:06:17 +00:00
parent 5ad17bcb63
commit 73fe5da3c1
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -49,16 +49,16 @@ A pure frontend TOTP two-factor authentication tool with multiple token import m
**构建配置：** **构建配置：**
``` \`\`\`
安装命令：npm install 安装命令：npm install
构建命令：npm run build 构建命令：npm run build
静态资源目录：out 静态资源目录：out
Node.js 版本：20.x 或 22.x Node.js 版本：20.x 或 22.x
``` \`\`\`
### 本地开发 ### 本地开发
```bash \`\`\`bash
# 安装依赖 # 安装依赖
npm install npm install
@@ -67,7 +67,7 @@ npm run dev
# 构建 # 构建
npm run build npm run build
``` \`\`\`
## Security / 安全说明 ## Security / 安全说明

8
app/page.tsx
View File

@@ -3,7 +3,7 @@
import type React from "react" import type React from "react"
import { useState, useEffect, useRef, useCallback } from "react" import { useState, useEffect, useRef, useCallback } from "react"
import jsQR from "jsqr" import type jsQRType from "jsqr"
import { import {
Plus, Plus,
Camera, Camera,
@@ -450,7 +450,7 @@ export default function TwoFactorAuth() {
if (!ctx) return if (!ctx) return
const scan = () => { const scan = async () => {
if (!streamRef.current) return if (!streamRef.current) return
if (video.readyState === video.HAVE_ENOUGH_DATA) { if (video.readyState === video.HAVE_ENOUGH_DATA) {
@@ -459,6 +459,7 @@ export default function TwoFactorAuth() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height) ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
const jsQR = (await import("jsqr")).default
const code = jsQR(imageData.data, imageData.width, imageData.height, { const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert", inversionAttempts: "dontInvert",
}) })
@@ -494,7 +495,7 @@ export default function TwoFactorAuth() {
const img = new Image() const img = new Image()
img.crossOrigin = "anonymous" img.crossOrigin = "anonymous"
img.onload = () => { img.onload = async () => {
const canvas = document.createElement("canvas") const canvas = document.createElement("canvas")
canvas.width = img.width canvas.width = img.width
canvas.height = img.height canvas.height = img.height
@@ -503,6 +504,7 @@ export default function TwoFactorAuth() {
ctx.drawImage(img, 0, 0) ctx.drawImage(img, 0, 0)
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
const jsQR = (await import("jsqr")).default
const code = jsQR(imageData.data, imageData.width, imageData.height, { const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "attemptBoth", inversionAttempts: "attemptBoth",
}) })