feat(api): implement chestny-znak web app with True API integration
- Fastify backend with auth (CryptoPro CAdES-BES), KM check, UPD parsing - React frontend with auth page, code check, XML upload, results table - Client-side signing via crypto-pro 2.3.0 (browser plugin) - Token caching with auto-refresh, retry with exponential backoff - Input validation schemas, file size limits, global 401 interceptor - Docker compose with backend + frontend (nginx) services
This commit is contained in:
kislovdm
Generated
+7
@@ -8,6 +8,7 @@
|
||||
"name": "chestny-znak-api-frontend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"crypto-pro": "^2.3.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
@@ -1725,6 +1726,12 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-pro": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-pro/-/crypto-pro-2.3.0.tgz",
|
||||
"integrity": "sha512-cppYuMRRijEaZ0UKAOW5L1CQIvzQA3DTRp4pARINl6K8Pp1JMhlch5TyWwv6Z4Y3x677A9xxcW62okHD91Veqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-pro": "^2.3.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
@@ -18,8 +19,8 @@
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.19.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.1.0",
|
||||
"eslint": "^9.19.0"
|
||||
"vite": "^6.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
+40
-5
@@ -1,7 +1,8 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { AuthPage } from './pages/AuthPage'
|
||||
import { CheckCodesPage } from './pages/CheckCodesPage'
|
||||
import { UploadUpdPage } from './pages/UploadUpdPage'
|
||||
import { setOnUnauthorized, logout as apiLogout } from './services/api'
|
||||
|
||||
type Page = 'auth' | 'check' | 'upload'
|
||||
|
||||
@@ -9,6 +10,24 @@ export default function App() {
|
||||
const [page, setPage] = useState<Page>('auth')
|
||||
const [authenticated, setAuthenticated] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setOnUnauthorized(() => {
|
||||
setAuthenticated(false)
|
||||
apiLogout().catch(() => {})
|
||||
})
|
||||
}, [])
|
||||
|
||||
function handleAuth() {
|
||||
setAuthenticated(true)
|
||||
setPage('check')
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
setAuthenticated(false)
|
||||
apiLogout().catch(() => {})
|
||||
setPage('auth')
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#f5f5f5' }}>
|
||||
<header style={{
|
||||
@@ -26,21 +45,37 @@ export default function App() {
|
||||
Авторизация
|
||||
</button>
|
||||
<button onClick={() => setPage('check')}
|
||||
style={navBtnStyle(page === 'check')}>
|
||||
style={navBtnStyle(page === 'check')}
|
||||
disabled={!authenticated}>
|
||||
Проверка кода
|
||||
</button>
|
||||
<button onClick={() => setPage('upload')}
|
||||
style={navBtnStyle(page === 'upload')}>
|
||||
style={navBtnStyle(page === 'upload')}
|
||||
disabled={!authenticated}>
|
||||
Загрузка УПД
|
||||
</button>
|
||||
</nav>
|
||||
<div style={{ marginLeft: 'auto', fontSize: 13 }}>
|
||||
<div style={{ marginLeft: 'auto', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{authenticated ? '✅ Авторизован' : '❌ Не авторизован'}
|
||||
{authenticated && (
|
||||
<button onClick={handleLogout}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.15)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255,255,255,0.3)',
|
||||
borderRadius: 4,
|
||||
padding: '3px 10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
}}>
|
||||
Выйти
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main style={{ padding: 24, maxWidth: 960, margin: '0 auto' }}>
|
||||
{page === 'auth' && <AuthPage onAuth={() => setAuthenticated(true)} />}
|
||||
{page === 'auth' && <AuthPage onAuth={handleAuth} />}
|
||||
{page === 'check' && <CheckCodesPage />}
|
||||
{page === 'upload' && <UploadUpdPage />}
|
||||
</main>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { getAuthStatus, getAuthKey, signIn } from '../services/api'
|
||||
import { isCadesPluginAvailable, listCertificates, signWithCadesPlugin } from '../services/cadesplugin'
|
||||
import type { CertInfo } from '../services/cadesplugin'
|
||||
|
||||
interface Props {
|
||||
onAuth: () => void
|
||||
@@ -7,27 +9,25 @@ interface Props {
|
||||
|
||||
export function AuthPage({ onAuth }: Props) {
|
||||
const [status, setStatus] = useState<{ authenticated: boolean; tokenExpiresAt: string | null } | null>(null)
|
||||
const [uuid, setUuid] = useState('')
|
||||
const [dataToSign, setDataToSign] = useState('')
|
||||
const [signature, setSignature] = useState('')
|
||||
const [hasPlugin, setHasPlugin] = useState<boolean | null>(null)
|
||||
const [certs, setCerts] = useState<CertInfo[]>([])
|
||||
const [selectedThumbprint, setSelectedThumbprint] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
getAuthStatus().then(setStatus).catch(() => {})
|
||||
checkPlugin()
|
||||
}, [])
|
||||
|
||||
async function handleGetKey() {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const { uuid, data } = await getAuthKey()
|
||||
setUuid(uuid)
|
||||
setDataToSign(data)
|
||||
} catch (err) {
|
||||
setError(String(err))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
async function checkPlugin() {
|
||||
const available = await isCadesPluginAvailable()
|
||||
setHasPlugin(available)
|
||||
if (available) {
|
||||
try {
|
||||
const certList = await listCertificates()
|
||||
setCerts(certList)
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,12 +35,14 @@ export function AuthPage({ onAuth }: Props) {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const { uuid, data } = await getAuthKey()
|
||||
const signature = await signWithCadesPlugin(data, selectedThumbprint || undefined)
|
||||
await signIn(uuid, signature)
|
||||
const s = await getAuthStatus()
|
||||
setStatus(s)
|
||||
if (s.authenticated) onAuth()
|
||||
} catch (err) {
|
||||
setError(String(err))
|
||||
setError(String(err instanceof Error ? err.message : err))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@@ -50,64 +52,83 @@ export function AuthPage({ onAuth }: Props) {
|
||||
<div>
|
||||
<h2>Авторизация в True API</h2>
|
||||
|
||||
{status && (
|
||||
{hasPlugin === false && (
|
||||
<div style={{
|
||||
padding: 12,
|
||||
background: status.authenticated ? '#e8f5e9' : '#fff3e0',
|
||||
background: '#fff3e0',
|
||||
borderRadius: 6,
|
||||
marginBottom: 16,
|
||||
fontSize: 14,
|
||||
}}>
|
||||
⚠️ КриптоПро Browser Plugin не обнаружен.
|
||||
<br />
|
||||
<a href="https://cryptopro.ru/products/cades/plugin" target="_blank" rel="noopener noreferrer">
|
||||
Установите расширение для браузера
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status?.authenticated && (
|
||||
<div style={{
|
||||
padding: 12,
|
||||
background: '#e8f5e9',
|
||||
borderRadius: 6,
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
<strong>Статус:</strong>{' '}
|
||||
{status.authenticated ? '✅ Авторизован' : '❌ Не авторизован'}
|
||||
{status.tokenExpiresAt && (
|
||||
<div style={{ fontSize: 13, marginTop: 4 }}>
|
||||
Токен истекает: {new Date(status.tokenExpiresAt).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<strong>✅ Авторизован</strong>
|
||||
<div style={{ fontSize: 13, marginTop: 4 }}>
|
||||
Токен истекает: {new Date(status.tokenExpiresAt!).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 500 }}>
|
||||
<button onClick={handleGetKey} disabled={loading}
|
||||
style={btnStyle}>
|
||||
{loading ? 'Загрузка...' : '1. Получить ключ авторизации'}
|
||||
</button>
|
||||
|
||||
{dataToSign && (
|
||||
<div style={{ background: '#f5f5f5', padding: 8, borderRadius: 4, fontSize: 12, wordBreak: 'break-all' }}>
|
||||
<strong>Данные для подписи:</strong><br />
|
||||
{dataToSign}
|
||||
{hasPlugin && certs.length > 0 && (
|
||||
<div>
|
||||
<label style={{ fontSize: 13, color: '#666', display: 'block', marginBottom: 4 }}>
|
||||
Сертификат:
|
||||
</label>
|
||||
<select
|
||||
value={selectedThumbprint}
|
||||
onChange={e => setSelectedThumbprint(e.target.value)}
|
||||
style={selectStyle}
|
||||
>
|
||||
<option value="">— первый доступный —</option>
|
||||
{certs.map(c => (
|
||||
<option key={c.thumbprint} value={c.thumbprint} disabled={!c.valid}>
|
||||
{c.name} ({c.valid ? `до ${new Date(c.validTo).toLocaleDateString()}` : 'просрочен'})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uuid && (
|
||||
<>
|
||||
<textarea
|
||||
placeholder="Вставьте подпись (base64) из КриптоПро..."
|
||||
value={signature}
|
||||
onChange={e => setSignature(e.target.value)}
|
||||
rows={4}
|
||||
style={inputStyle}
|
||||
/>
|
||||
|
||||
<button onClick={handleSignIn} disabled={loading || !signature}
|
||||
style={btnStyle}>
|
||||
{loading ? 'Подписание...' : '2. Отправить подпись'}
|
||||
</button>
|
||||
</>
|
||||
{certs.length === 0 && hasPlugin && (
|
||||
<div style={{ color: '#e65100', fontSize: 13 }}>
|
||||
Нет доступных сертификатов. Установите УКЭП в систему.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleSignIn}
|
||||
disabled={loading || !hasPlugin || (hasPlugin && certs.length === 0)}
|
||||
style={btnStyle}
|
||||
>
|
||||
{loading ? 'Подписание...' : 'Подписать и войти'}
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div style={{ color: '#c62828', fontSize: 14 }}>Ошибка: {error}</div>
|
||||
<div style={{ color: '#c62828', fontSize: 14, marginTop: 8 }}>Ошибка: {error}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 24, fontSize: 13, color: '#666' }}>
|
||||
<h4>Инструкция:</h4>
|
||||
<h4>Процесс авторизации:</h4>
|
||||
<ol>
|
||||
<li>Нажмите «Получить ключ авторизации» — система получит UUID и случайные данные для подписи</li>
|
||||
<li>Подпишите полученные данные в КриптоПро (CAdES-BES, присоединённая подпись, base64)</li>
|
||||
<li>Вставьте подпись в поле выше и нажмите «Отправить подпись»</li>
|
||||
<li>Выберите сертификат УКЭП из списка (или будет использован первый доступный)</li>
|
||||
<li>Нажмите «Подписать и войти»</li>
|
||||
<li>КриптоПро подпишет данные и отправит их на сервер</li>
|
||||
<li>Сервер кеширует токен доступа к True API (действует 10 часов)</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,12 +145,11 @@ const btnStyle: React.CSSProperties = {
|
||||
fontSize: 14,
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
const selectStyle: React.CSSProperties = {
|
||||
padding: 8,
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 4,
|
||||
fontSize: 13,
|
||||
fontFamily: 'monospace',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ import { uploadUpd } from '../services/api'
|
||||
import { ResultsTable } from '../components/ResultsTable'
|
||||
import type { UpdUploadResponse } from '../types'
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024
|
||||
|
||||
export function UploadUpdPage() {
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [response, setResponse] = useState<UpdUploadResponse | null>(null)
|
||||
@@ -11,6 +13,16 @@ export function UploadUpdPage() {
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
function setFileIfValid(f: File | null) {
|
||||
if (!f) { setFile(null); return }
|
||||
if (f.size > MAX_FILE_SIZE) {
|
||||
setError(`Файл слишком большой (максимум 10MB)`)
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
setFile(f)
|
||||
}
|
||||
|
||||
async function handleUpload() {
|
||||
if (!file) return
|
||||
setLoading(true)
|
||||
@@ -28,8 +40,7 @@ export function UploadUpdPage() {
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
setDragging(false)
|
||||
const f = e.dataTransfer.files[0]
|
||||
if (f) setFile(f)
|
||||
setFileIfValid(e.dataTransfer.files[0] || null)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -69,9 +80,9 @@ export function UploadUpdPage() {
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept=".xml"
|
||||
accept=".xml,.XML"
|
||||
hidden
|
||||
onChange={e => setFile(e.target.files?.[0] || null)}
|
||||
onChange={e => setFileIfValid(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,11 +2,27 @@ import type { AuthStatus, CheckCodesResponse, UpdUploadResponse } from '../types
|
||||
|
||||
const BASE_URL = ''
|
||||
|
||||
let onUnauthorized: (() => void) | null = null
|
||||
|
||||
export function setOnUnauthorized(cb: () => void): void {
|
||||
onUnauthorized = cb
|
||||
}
|
||||
|
||||
async function request<T>(url: string, options?: RequestInit): Promise<T> {
|
||||
const headers: Record<string, string> = { 'Content-Type': 'application/json' }
|
||||
if (options?.headers) {
|
||||
Object.assign(headers, options.headers)
|
||||
}
|
||||
|
||||
const res = await fetch(`${BASE_URL}${url}`, {
|
||||
headers: { 'Content-Type': 'application/json', ...options?.headers },
|
||||
headers,
|
||||
...options,
|
||||
})
|
||||
|
||||
if (res.status === 401 && onUnauthorized) {
|
||||
onUnauthorized()
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: res.statusText }))
|
||||
throw new Error(err.error || `HTTP ${res.status}`)
|
||||
@@ -19,7 +35,7 @@ export async function getAuthKey(): Promise<{ uuid: string; data: string }> {
|
||||
}
|
||||
|
||||
export async function signIn(uuid: string, data: string): Promise<{ token: string }> {
|
||||
return request('/auth/signin', {
|
||||
return request('/auth/simpleSignIn', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ uuid, data }),
|
||||
})
|
||||
@@ -29,6 +45,10 @@ export async function getAuthStatus(): Promise<AuthStatus> {
|
||||
return request('/auth/status')
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
await request('/auth/logout', { method: 'POST' })
|
||||
}
|
||||
|
||||
export async function checkCodesPublic(codes: string[]): Promise<CheckCodesResponse> {
|
||||
return request('/api/check-codes/public', {
|
||||
method: 'POST',
|
||||
@@ -52,6 +72,10 @@ export async function uploadUpd(file: File): Promise<UpdUploadResponse> {
|
||||
body: formData,
|
||||
})
|
||||
|
||||
if (res.status === 401 && onUnauthorized) {
|
||||
onUnauthorized()
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: res.statusText }))
|
||||
throw new Error(err.error || `HTTP ${res.status}`)
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import {
|
||||
getUserCertificates,
|
||||
createAttachedSignature,
|
||||
} from 'crypto-pro'
|
||||
|
||||
export interface CertInfo {
|
||||
name: string
|
||||
thumbprint: string
|
||||
issuer: string
|
||||
validTo: string
|
||||
valid: boolean
|
||||
}
|
||||
|
||||
export async function isCadesPluginAvailable(): Promise<boolean> {
|
||||
try {
|
||||
await getUserCertificates(true)
|
||||
return true
|
||||
} catch (err) {
|
||||
if (err instanceof Error && (
|
||||
err.message.includes('undefined') || err.message.includes('not defined')
|
||||
)) return false
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
export async function listCertificates(): Promise<CertInfo[]> {
|
||||
const certs = await getUserCertificates(true)
|
||||
const now = Date.now()
|
||||
return certs.map(c => {
|
||||
const validTo = new Date(c.validTo)
|
||||
return {
|
||||
name: c.name || 'Без имени',
|
||||
thumbprint: c.thumbprint,
|
||||
issuer: c.issuerName,
|
||||
validTo: c.validTo,
|
||||
valid: validTo.getTime() > now,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export async function signWithCadesPlugin(dataBase64: string, thumbprint?: string): Promise<string> {
|
||||
const certs = await getUserCertificates(true)
|
||||
const now = Date.now()
|
||||
const validCerts = certs.filter(c => c.name && new Date(c.validTo).getTime() > now)
|
||||
|
||||
if (validCerts.length === 0) {
|
||||
throw new Error('Нет доступных сертификатов с действующим сроком')
|
||||
}
|
||||
|
||||
let tp = thumbprint
|
||||
if (!tp) {
|
||||
tp = validCerts[0].thumbprint
|
||||
} else {
|
||||
const found = validCerts.find(c => c.thumbprint.toUpperCase() === tp!.toUpperCase())
|
||||
if (!found) throw new Error(`Сертификат с отпечатком ${tp} не найден или просрочен`)
|
||||
}
|
||||
|
||||
return createAttachedSignature(tp, dataBase64)
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/components/resultstable.tsx","./src/pages/authpage.tsx","./src/pages/checkcodespage.tsx","./src/pages/uploadupdpage.tsx","./src/services/api.ts","./src/types/index.ts"],"version":"5.9.3"}
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/components/resultstable.tsx","./src/pages/authpage.tsx","./src/pages/checkcodespage.tsx","./src/pages/uploadupdpage.tsx","./src/services/api.ts","./src/services/cadesplugin.ts","./src/types/index.ts"],"version":"5.9.3"}
|
||||
Reference in New Issue
Block a user