feat: initial commit - Go + CGO captcha recognition service
Features: - Go + CGO ONNX/OpenCV wrapper for high performance - SQLite (default) / MySQL database support - Optional Redis caching - JWT authentication system - Multiple captcha recognition APIs: - OCR text recognition - Slider captcha matching - Image similarity comparison - Rotation captcha detection - Object detection - React frontend with install wizard - Docker and docker-compose support - Gitea CI/CD pipeline Project structure: - cmd/server: Main entry point - internal/: Core business logic - pkg/onnx: ONNX Runtime CGO wrapper - pkg/opencv: OpenCV CGO wrapper - web/: React frontend - deploy/: Deployment configs - scripts/: Utility scripts
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
token: string
|
||||
}
|
||||
|
||||
export default function AdminPage({ token }: Props) {
|
||||
const [points, setPoints] = useState(1000)
|
||||
const [codes, setCodes] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const generateCode = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/admin/generate_code', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ points })
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
loadCodes()
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadCodes = async () => {
|
||||
const res = await fetch('/api/admin/regcodes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
if (res.ok) {
|
||||
setCodes(await res.json())
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1 className="mb-4">管理后台</h1>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">生成注册码</h2>
|
||||
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label className="label">积分数量</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={points}
|
||||
onChange={e => setPoints(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="button"
|
||||
onClick={generateCode}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '生成中...' : '生成注册码'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">注册码列表</h2>
|
||||
|
||||
{codes.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)' }}>暂无注册码，点击上方按钮生成</p>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>注册码</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>积分</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{codes.map((code: any) => (
|
||||
<tr key={code.id} style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<td style={{ padding: '12px' }}>{code.code}</td>
|
||||
<td style={{ padding: '12px' }}>{code.points}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{code.is_used ? '已使用' : '未使用'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
interface Props {
|
||||
token: string
|
||||
}
|
||||
|
||||
export default function HomePage({ token }: Props) {
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1>AntiCaptcha 控制台</h1>
|
||||
<div className="flex gap-2">
|
||||
<Link to="/admin" className="button button-secondary">管理后台</Link>
|
||||
<button onClick={handleLogout} className="button button-secondary">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">API 使用说明</h2>
|
||||
<p style={{ color: 'var(--text-secondary)', marginBottom: '16px' }}>
|
||||
使用以下接口进行验证码识别，需要在请求头中携带 Authorization: Bearer {token.substring(0, 20)}...
|
||||
</p>
|
||||
|
||||
<div style={{ background: 'var(--bg-tertiary)', padding: '16px', borderRadius: '8px' }}>
|
||||
<code style={{ color: 'var(--text-primary)' }}>
|
||||
POST /api/ocr - OCR 文字识别<br/>
|
||||
POST /api/slider/match - 滑块缺口匹配<br/>
|
||||
POST /api/compare/similarity - 图片相似度对比<br/>
|
||||
POST /api/rotate/single/rotate - 单图旋转验证码<br/>
|
||||
POST /api/detection/icon - 图标检测<br/>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">账户信息</h2>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>
|
||||
请联系管理员获取更多信息
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
onInstall: () => void
|
||||
}
|
||||
|
||||
export default function InstallPage({ onInstall }: Props) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const [config, setConfig] = useState({
|
||||
database: {
|
||||
type: 'sqlite',
|
||||
host: 'localhost',
|
||||
port: 3306,
|
||||
user: 'root',
|
||||
password: '',
|
||||
database: 'anticaptcha',
|
||||
sqlite: { path: './data/app.db' }
|
||||
},
|
||||
redis: {
|
||||
enabled: false,
|
||||
host: 'localhost',
|
||||
port: 6379,
|
||||
password: '',
|
||||
db: 0
|
||||
},
|
||||
admin: {
|
||||
username: 'admin',
|
||||
password: ''
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/install', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(config)
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '安装失败')
|
||||
return
|
||||
}
|
||||
|
||||
onInstall()
|
||||
window.location.href = '/'
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '600px', marginTop: '50px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '8px' }}>AntiCaptcha 安装向导</h1>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '32px' }}>
|
||||
步骤 {step} / 3
|
||||
</p>
|
||||
|
||||
{step === 1 && (
|
||||
<>
|
||||
<h2 className="mb-4">数据库配置</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">数据库类型</label>
|
||||
<select
|
||||
className="input"
|
||||
value={config.database.type}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, type: e.target.value }
|
||||
})}
|
||||
>
|
||||
<option value="sqlite">SQLite</option>
|
||||
<option value="mysql">MySQL</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{config.database.type === 'sqlite' ? (
|
||||
<div className="form-group">
|
||||
<label className="label">数据库文件路径</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.sqlite.path}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: {
|
||||
...config.database,
|
||||
sqlite: { path: e.target.value }
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">主机</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.host}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, host: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">端口</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.database.port}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, port: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.user}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, user: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.database.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, password: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">数据库名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.database}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, database: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button className="button" onClick={() => setStep(2)}>
|
||||
下一步
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<h2 className="mb-4">Redis 配置（可选）</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="flex gap-2 items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.redis.enabled}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, enabled: e.target.checked }
|
||||
})}
|
||||
/>
|
||||
启用 Redis
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{config.redis.enabled && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">主机</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.redis.host}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, host: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">端口</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.redis.port}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, port: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.redis.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, password: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">数据库</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.redis.db}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, db: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button className="button button-secondary" onClick={() => setStep(1)}>
|
||||
上一步
|
||||
</button>
|
||||
<button className="button" onClick={() => setStep(3)}>
|
||||
下一步
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<>
|
||||
<h2 className="mb-4">管理员账号</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.admin.username}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
admin: { ...config.admin, username: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.admin.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
admin: { ...config.admin, password: e.target.value }
|
||||
})}
|
||||
placeholder="请输入管理员密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button className="button button-secondary" onClick={() => setStep(2)}>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '安装中...' : '完成安装'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
onLogin: (token: string) => void
|
||||
}
|
||||
|
||||
export default function LoginPage({ onLogin }: Props) {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '登录失败')
|
||||
return
|
||||
}
|
||||
|
||||
localStorage.setItem('token', data.access_token)
|
||||
onLogin(data.access_token)
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '400px', marginTop: '100px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>登录</h1>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<button type="submit" className="button" style={{ width: '100%' }} disabled={loading}>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<a href="/register" style={{ color: 'var(--primary)' }}>没有账号？立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [code, setCode] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSuccess('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password, registration_code: code }),
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '注册失败')
|
||||
return
|
||||
}
|
||||
|
||||
setSuccess('注册成功，请登录')
|
||||
setTimeout(() => window.location.href = '/login', 2000)
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '400px', marginTop: '100px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>注册</h1>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">注册码</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={code}
|
||||
onChange={e => setCode(e.target.value)}
|
||||
placeholder="请输入注册码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
{success && <div className="success">{success}</div>}
|
||||
|
||||
<button type="submit" className="button" style={{ width: '100%' }} disabled={loading}>
|
||||
{loading ? '注册中...' : '注册'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<a href="/login" style={{ color: 'var(--primary)' }}>已有账号？立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user