Skip to content

Commit 63fa0ff

Browse files
TechQueryTechQuery
authored
[add] Signature model, page & back-end API (#55)
1 parent a3b885d commit 63fa0ff

8 files changed

Lines changed: 1390 additions & 1232 deletions

File tree

‎models/Signature.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { observable } from 'mobx';
2+
import { BaseModel, persist, restore, toggle } from 'mobx-restful';
3+
4+
import { isServer } from './configuration';
5+
6+
export const buffer2hex = (buffer: ArrayBufferLike) =>
7+
Array.from(new Uint8Array(buffer), x => x.toString(16).padStart(2, '0')).join('');
8+
9+
export class SignatureModel extends BaseModel {
10+
algorithm = { name: 'ECDSA', namedCurve: 'P-384', hash: { name: 'SHA-256' } };
11+
12+
@persist()
13+
@observable
14+
accessor privateKey: CryptoKey | undefined;
15+
16+
@persist()
17+
@observable
18+
accessor publicKey = '';
19+
20+
@persist()
21+
@observable
22+
accessor signatureMap = {} as Record<string, string>;
23+
24+
restored = !isServer() && restore(this, 'Signature');
25+
26+
@toggle('uploading')
27+
async makeKeyPair() {
28+
await this.restored;
29+
30+
if (this.publicKey) return this.publicKey;
31+
32+
const { publicKey, privateKey } = await crypto.subtle.generateKey(this.algorithm, true, [
33+
'sign',
34+
'verify',
35+
]);
36+
this.privateKey = privateKey;
37+
38+
const JWK = await crypto.subtle.exportKey('jwk', publicKey);
39+
40+
return (this.publicKey = btoa(JSON.stringify(JWK)));
41+
}
42+
43+
@toggle('uploading')
44+
async sign(value: string) {
45+
await this.restored;
46+
47+
let signature = this.signatureMap[value];
48+
49+
if (signature) return signature;
50+
51+
if (!this.publicKey) await this.makeKeyPair();
52+
53+
const rawSignature = await crypto.subtle.sign(
54+
this.algorithm,
55+
this.privateKey!,
56+
new TextEncoder().encode(value),
57+
);
58+
signature = buffer2hex(rawSignature);
59+
60+
this.signatureMap = { ...this.signatureMap, [value]: signature };
61+
62+
return signature;
63+
}
64+
}

‎package.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
},
1616
"dependencies": {
1717
"@giscus/react": "^3.1.0",
18-
"@koa/router": "^15.2.0",
18+
"@koa/router": "^15.3.0",
1919
"@mdx-js/loader": "^3.1.1",
2020
"@mdx-js/react": "^3.1.1",
21-
"@next/mdx": "^16.1.4",
22-
"core-js": "^3.47.0",
21+
"@next/mdx": "^16.1.6",
22+
"core-js": "^3.48.0",
2323
"echarts-jsx": "^0.6.0",
2424
"file-type": "^21.3.0",
2525
"idea-react": "^2.0.0-rc.13",
@@ -28,64 +28,64 @@
2828
"koa-jwt": "^4.0.4",
2929
"koajax": "^3.1.2",
3030
"license-filter": "^0.2.5",
31-
"marked": "^17.0.1",
31+
"marked": "^17.0.2",
3232
"mime": "^4.1.0",
3333
"mobx": "^6.15.0",
3434
"mobx-github": "^0.6.2",
3535
"mobx-i18n": "^0.7.2",
36-
"mobx-lark": "^2.6.4",
36+
"mobx-lark": "^2.6.5",
3737
"mobx-react": "^9.2.1",
3838
"mobx-react-helper": "^0.5.1",
3939
"mobx-restful": "^2.1.4",
4040
"mobx-restful-table": "^2.6.3",
4141
"mobx-strapi": "^0.8.1",
42-
"next": "^16.1.4",
42+
"next": "^16.1.6",
4343
"next-pwa": "^5.6.0",
4444
"next-ssr-middleware": "^1.1.0",
4545
"open-react-map": "^0.9.1",
46-
"react": "^19.2.3",
46+
"react": "^19.2.4",
4747
"react-bootstrap": "^2.10.10",
48-
"react-dom": "^19.2.3",
48+
"react-dom": "^19.2.4",
4949
"react-typed-component": "^1.0.6",
5050
"remark-frontmatter": "^5.0.0",
5151
"remark-mdx-frontmatter": "^5.2.0",
5252
"web-utility": "^4.6.4",
5353
"yaml": "^2.8.2"
5454
},
5555
"devDependencies": {
56-
"@babel/plugin-proposal-decorators": "^7.28.6",
56+
"@babel/plugin-proposal-decorators": "^7.29.0",
5757
"@babel/plugin-transform-typescript": "^7.28.6",
5858
"@babel/preset-react": "^7.28.5",
59-
"@cspell/eslint-plugin": "^9.6.0",
60-
"@eslint/js": "^9.39.2",
61-
"@next/eslint-plugin-next": "^16.1.4",
59+
"@cspell/eslint-plugin": "^9.6.4",
60+
"@eslint/js": "^10.0.1",
61+
"@next/eslint-plugin-next": "^16.1.6",
6262
"@open-source-bazaar/china-ngo-database": "^0.6.0",
6363
"@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
64-
"@stylistic/eslint-plugin": "^5.7.0",
64+
"@stylistic/eslint-plugin": "^5.8.0",
6565
"@types/eslint-config-prettier": "^6.11.3",
6666
"@types/jsonwebtoken": "^9.0.10",
6767
"@types/koa": "^3.0.1",
6868
"@types/next-pwa": "^5.6.9",
69-
"@types/node": "^24.10.9",
70-
"@types/react": "^19.2.8",
69+
"@types/node": "^24.10.13",
70+
"@types/react": "^19.2.14",
7171
"@types/react-dom": "^19.2.3",
72-
"eslint": "^9.39.2",
73-
"eslint-config-next": "^16.1.4",
72+
"eslint": "^10.0.0",
73+
"eslint-config-next": "^16.1.6",
7474
"eslint-config-prettier": "^10.1.8",
7575
"eslint-plugin-react": "^7.37.5",
7676
"eslint-plugin-simple-import-sort": "^12.1.1",
77-
"globals": "^17.0.0",
77+
"globals": "^17.3.0",
7878
"husky": "^9.1.7",
7979
"jiti": "^2.6.1",
8080
"less": "^4.5.1",
81-
"less-loader": "^12.3.0",
81+
"less-loader": "^12.3.1",
8282
"lint-staged": "^16.2.7",
8383
"next-with-less": "^3.0.1",
84-
"prettier": "^3.8.0",
84+
"prettier": "^3.8.1",
8585
"prettier-plugin-css-order": "^2.2.0",
86-
"sass": "^1.97.2",
86+
"sass": "^1.97.3",
8787
"typescript": "~5.9.3",
88-
"typescript-eslint": "^8.53.1"
88+
"typescript-eslint": "^8.55.0"
8989
},
9090
"resolutions": {
9191
"mobx-react-helper": "$mobx-react-helper",

‎pages/api/signature/[...slug].ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
2+
3+
import { safeAPI } from '../core';
4+
5+
export const config = { api: { bodyParser: false } };
6+
7+
const router = createKoaRouter(import.meta.url);
8+
9+
router.post('/verification', safeAPI, async context => {
10+
const { algorithm, publicKey, value, signature } = Reflect.get(context.request, 'body');
11+
12+
const rawAlgorithm = JSON.parse(atob(algorithm)),
13+
rawPublicKey = JSON.parse(atob(publicKey)),
14+
rawSignature = Buffer.from(signature, 'hex'),
15+
encodedValue = new TextEncoder().encode(value);
16+
17+
const key = await crypto.subtle.importKey('jwk', rawPublicKey, rawAlgorithm, true, ['verify']);
18+
const verified = await crypto.subtle.verify(rawAlgorithm, key, rawSignature, encodedValue);
19+
20+
context.status = verified ? 200 : 400;
21+
context.body = {};
22+
});
23+
24+
export default withKoaRouter(router);

‎pages/signature.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { computed, observable } from 'mobx';
2+
import { textJoin } from 'mobx-i18n';
3+
import { observer } from 'mobx-react';
4+
import { ObservedComponent } from 'mobx-react-helper';
5+
import { compose, RouteProps, router } from 'next-ssr-middleware';
6+
import { Container } from 'react-bootstrap';
7+
import { buildURLData } from 'web-utility';
8+
9+
import { PageHead } from '../components/Layout/PageHead';
10+
import { i18n, I18nContext } from '../models/Translation';
11+
import { SignatureModel } from '../models/Signature';
12+
13+
export const getServerSideProps = compose(router);
14+
15+
@observer
16+
export default class SignaturePage extends ObservedComponent<RouteProps, typeof i18n> {
17+
static contextType = I18nContext;
18+
19+
@observable
20+
accessor signatureStore = new SignatureModel();
21+
22+
@computed
23+
get linkData() {
24+
const { route } = this.observedProps;
25+
const { valueName, algorithmName, publicKeyName, signatureName, value } = route.query,
26+
{ algorithm, publicKey } = this.signatureStore;
27+
const signature = this.signatureStore.signatureMap[value + ''];
28+
29+
return buildURLData({
30+
[valueName + '']: value,
31+
[algorithmName + '']: btoa(JSON.stringify(algorithm)),
32+
[publicKeyName + '']: publicKey,
33+
[signatureName + '']: signature,
34+
});
35+
}
36+
37+
componentDidMount() {
38+
const { value = '' } = this.props.route.query;
39+
40+
if (!value) this.signatureStore.makeKeyPair();
41+
else this.signatureStore.sign(value + '');
42+
}
43+
44+
render() {
45+
const { t } = this.observedContext,
46+
{ value, iframeLink } = this.props.route.query;
47+
48+
const title = value ? textJoin(t('sign'), value + '') : t('generate_key_pair'),
49+
link = `${iframeLink}?${this.linkData}`;
50+
51+
return (
52+
<Container>
53+
<PageHead title={title} />
54+
55+
<h1 className="my-5 text-truncate">{title}</h1>
56+
57+
<section className="markdown-body bg-white py-4">
58+
<blockquote>{t('signature_disclaimer')}</blockquote>
59+
<pre>
60+
<code>
61+
<a href={link} target="_blank" rel="noopener noreferrer">
62+
{link}
63+
</a>
64+
</code>
65+
</pre>
66+
</section>
67+
68+
<iframe
69+
className="border-0 w-100 vh-100"
70+
sandbox="allow-scripts allow-same-origin allow-forms"
71+
src={link}
72+
/>
73+
</Container>
74+
);
75+
}
76+
}

0 commit comments

Comments
 (0)