kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-16 06:58:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

암호 키 생성 후 내보내기 페이지로 이동하도록 구현

Browse Source
This commit is contained in:
static
2024-12-27 21:23:47 +09:00
parent 98512a0710
commit 400438c395
9 changed files with 107 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/routes/(fullscreen)/auth/generateKey/+page.svelte
View File

@@ -1,58 +0,0 @@
<script lang="ts">
import { Button, TextButton } from "$lib/components/buttons";
import { TitleDiv, BottomDiv } from "$lib/components/divs";
import Order from "./Order.svelte";
import IconKey from "~icons/material-symbols/key";
const orders = [
{
title: "암호 키는 공개 키와 개인 키로 구성돼요.",
description: "공개 키로 암호화된 데이터는 개인 키로만 복호화할 수 있어요.",
},
{
title: "공개 키는 서버에 저장돼요.",
description: "대신, 개인 키는 이 디바이스에만 저장돼요.",
},
{
title: "다른 디바이스에서 공개 키를 이용해 데이터를 암호화하면,",
},
{
title: "이 디바이스에서만 안전하게 복호화할 수 있어요.",
description:
"서버를 포함한 제3자는 데이터의 내용을 알 수 없어요. 개인 키가 이 디바이스에만 저장되기 때문이에요.",
},
];
</script>
<svetle:head>
<title>암호 키 생성하기</title>
</svetle:head>
<div class="flex h-full flex-col justify-between">
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">암호 키 생성하기</h1>
<p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div class="mb-4">
<IconKey class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
</div>
<div>
{#each orders as { title, description }, i}
<Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
{/each}
</div>
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button>새 암호 키 생성하기</Button>
</div>
<div class="w-fit">
<TextButton>키를 갖고 있어요</TextButton>
</div>
</BottomDiv>
</div>

33
src/routes/(fullscreen)/auth/generateKey/Order.svelte
View File

@@ -1,33 +0,0 @@
<script lang="ts">
interface Props {
order: number;
isLast?: boolean;
title: string;
description?: string;
}
let { order, isLast = false, title, description }: Props = $props();
</script>
<div class="items-strech flex gap-x-3 {isLast ? 'mb-0' : 'mb-2'}">
<div class="flex flex-col">
<p
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-lg font-bold text-gray-700"
>
{order}
</p>
{#if !isLast}
<div class="mx-auto mt-2 w-0.5 flex-grow rounded-full bg-gray-300"></div>
{/if}
</div>
<div>
<p class="flex min-h-8 items-center break-keep text-lg font-medium">
{title}
</p>
<p class="mb-5 mt-1 break-keep text-gray-600">
{#if description}
{description}
{/if}
</p>
</div>
</div>

29
src/routes/(fullscreen)/auth/generateKey/done/+page.svelte
View File

@@ -1,29 +0,0 @@
<script lang="ts">
import { Button, TextButton } from "$lib/components/buttons";
import { BottomDiv } from "$lib/components/divs";
import IconCheckCircle from "~icons/material-symbols/check-circle";
</script>
<svetle:head>
<title>암호 키 생성하기</title>
</svetle:head>
<div class="flex h-full flex-col justify-between">
<div class="mt-[40%] space-y-4">
<IconCheckCircle class="mx-auto text-8xl text-primary-500" />
<p class="text-center text-2xl font-bold text-primary-500">암호 키가 생성되었어요!</p>
<div class="space-y-2 break-keep text-center text-gray-800">
<p>모든 디바이스의 암호 키가 유실되면 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.</p>
<p>복원을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
</div>
</div>
<BottomDiv>
<div class="w-full">
<Button>암호 키 내보내기</Button>
</div>
<div class="w-fit">
<TextButton>내보내지 않을래요</TextButton>
</div>
</BottomDiv>
</div>

57
src/routes/(fullscreen)/auth/generateKey/service.ts
View File

@@ -1,57 +0,0 @@
import { storeKeyPairIntoIndexedDB } from "$lib/indexedDB";
type KeyType = "public" | "private";
const generateRSAKeyPair = async () => {
const keyPair = await window.crypto.subtle.generateKey(
{
name: "RSA-OAEP",
modulusLength: 4096,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256",
} satisfies RsaHashedKeyGenParams,
true,
["encrypt", "decrypt"],
);
return keyPair;
};
const exportKeyAsPem = async (key: CryptoKey, type: KeyType) => {
const exportedKey = await window.crypto.subtle.exportKey(
type === "public" ? "spki" : "pkcs8",
key,
);
const exportedKeyBase64 = btoa(String.fromCharCode(...new Uint8Array(exportedKey)))
.match(/.{1,64}/g)!
.join("\n");
const pemHeader = type === "public" ? "PUBLIC" : "PRIVATE";
const pem = `-----BEGIN ${pemHeader} KEY-----\n${exportedKeyBase64}\n-----END ${pemHeader} KEY-----\n`;
return pem;
};
const makeRSAKeyNonextractable = async (key: CryptoKey, type: KeyType) => {
const format = type === "public" ? "spki" : "pkcs8";
const keyUsage = type === "public" ? "encrypt" : "decrypt";
return await window.crypto.subtle.importKey(
format,
await window.crypto.subtle.exportKey(format, key),
{
name: "RSA-OAEP",
hash: "SHA-256",
} satisfies RsaHashedImportParams,
false,
[keyUsage],
);
};
export const generateKeyPair = async () => {
const keyPair = await generateRSAKeyPair();
const privKeySecure = await makeRSAKeyNonextractable(keyPair.privateKey, "private");
await storeKeyPairIntoIndexedDB(keyPair.publicKey, privKeySecure);
const pubKeyPem = await exportKeyAsPem(keyPair.publicKey, "public");
const privKeyPem = await exportKeyAsPem(keyPair.privateKey, "private");
return { pubKeyPem, privKeyPem };
};