feat(gateway): verify Kakao account ownership

2026-08-08 06:23:16 +00:00
parent 2d92114aa9
commit 3654adbe13
33 changed files with 2047 additions and 138 deletions
@@ -0,0 +1,218 @@
+import { generateKeyPairSync } from 'node:crypto';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+import { expect, test, type Page, type Route } from '@playwright/test';
+
+const artifactRoot = process.env.KAKAO_OTP_ARTIFACT_DIR ? resolve(process.env.KAKAO_OTP_ARTIFACT_DIR) : null;
+const response = (data: unknown) => ({ result: { data } });
+const errorResponse = (path: string, message: string) => ({
+    error: {
+        message,
+        code: -32001,
+        data: {
+            code: 'UNAUTHORIZED',
+            httpStatus: 401,
+            path,
+        },
+    },
+});
+const operationNames = (route: Route): string[] => {
+    const url = new URL(route.request().url());
+    return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6)).split(',');
+};
+
+const { publicKey } = generateKeyPairSync('rsa', { modulusLength: 2048 });
+const publicKeyPem = publicKey.export({ type: 'spki', format: 'pem' }).toString();
+const challenge = {
+    status: 'otp' as const,
+    challengeId: '11111111-1111-4111-8111-111111111111',
+    expiresAt: '2026-08-08T06:00:00.000Z',
+    attemptsRemaining: 3,
+};
+
+const installFixture = async (page: Page, source: 'password' | 'oauth') => {
+    let loggedIn = false;
+    let otpAttempts = 0;
+    await page.route('**/gateway/api/trpc/**', async (route) => {
+        const operations = operationNames(route);
+        const results = await Promise.all(
+            operations.map(async (operation) => {
+                if (operation === 'me') {
+                    return response(
+                        loggedIn
+                            ? {
+                                  id: 'kakao-otp-user',
+                                  username: 'kakao-otp-user',
+                                  displayName: '카카오 인증 사용자',
+                                  roles: [],
+                                  picture: 'default.jpg',
+                                  kakaoVerified: true,
+                                  kakaoGraceStartedAt: '2026-08-08T00:00:00.000Z',
+                                  createdAt: '2026-08-08T00:00:00.000Z',
+                              }
+                            : null
+                    );
+                }
+                if (operation === 'lobby.notice') return response('');
+                if (operation === 'lobby.profiles') return response([]);
+                if (operation === 'auth.passwordKey') {
+                    return response({ keyId: 'playwright-key', publicKeyPem, algorithm: 'RSA-OAEP-256' });
+                }
+                if (operation === 'auth.login') return response({ ...challenge, successStatus: 'login' });
+                if (operation === 'auth.kakaoExchange') {
+                    return response({ ...challenge, successStatus: source === 'oauth' ? 'verified' : 'login' });
+                }
+                if (operation === 'auth.kakaoOtp') {
+                    otpAttempts += 1;
+                    await new Promise((resolveDelay) => setTimeout(resolveDelay, 800));
+                    if (otpAttempts === 1) {
+                        return errorResponse(operation, '인증 번호가 틀렸습니다. 2회 더 시도할 수 있습니다.');
+                    }
+                    loggedIn = true;
+                    return response({
+                        status: 'login',
+                        user: {
+                            id: 'kakao-otp-user',
+                            username: 'kakao-otp-user',
+                            displayName: '카카오 인증 사용자',
+                            roles: [],
+                            picture: 'default.jpg',
+                            kakaoVerified: true,
+                            kakaoGraceStartedAt: '2026-08-08T00:00:00.000Z',
+                            createdAt: '2026-08-08T00:00:00.000Z',
+                        },
+                        sessionToken: 'verified-session-token',
+                        issuedAt: '2026-08-08T05:57:00.000Z',
+                        validUntil: '2026-08-18T05:57:00.000Z',
+                    });
+                }
+                throw new Error(`Unhandled Kakao OTP fixture operation: ${operation}`);
+            })
+        );
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(results),
+        });
+    });
+    return { otpAttempts: () => otpAttempts };
+};
+
+const verifyDialog = async (page: Page, artifactName: string) => {
+    const dialog = page.getByRole('dialog', { name: '인증 코드 필요' });
+    const input = dialog.getByLabel('인증 코드');
+    const submit = dialog.getByRole('button', { name: '제출' });
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toContainText("카카오톡의 '나와의 채팅'란을 확인해 주세요.");
+    await expect(input).toBeFocused();
+
+    const geometry = await dialog.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            backgroundColor: style.backgroundColor,
+            border: style.border,
+            fontSize: style.fontSize,
+        };
+    });
+    expect(geometry.width).toBeLessThanOrEqual(500);
+    expect(geometry.width).toBeGreaterThan(350);
+    expect(geometry.backgroundColor).toBe('rgb(48, 48, 48)');
+    expect(geometry.border).toBe('1px solid rgb(68, 68, 68)');
+
+    await submit.hover();
+    await page.waitForTimeout(200);
+    expect(await submit.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgb(55, 90, 127)');
+    await input.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(submit).toBeFocused();
+    await page.waitForTimeout(200);
+    expect(await submit.evaluate((element) => getComputedStyle(element).boxShadow)).toMatch(
+        /^rgba\(85, 115, 146, 0\.49\d\) 0px 0px 0px 4px$/
+    );
+
+    if (artifactRoot) {
+        await mkdir(artifactRoot, { recursive: true });
+        await page.screenshot({ path: resolve(artifactRoot, `${artifactName}.png`), fullPage: true });
+        await writeFile(
+            resolve(artifactRoot, `${artifactName}.json`),
+            `${JSON.stringify(geometry, null, 2)}\n`,
+            'utf8'
+        );
+    }
+
+    const verifyPointerActive = async () => {
+        const box = await submit.boundingBox();
+        if (!box) throw new Error('OTP submit button has no rendered geometry.');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        expect(await submit.evaluate((element) => element.matches(':active'))).toBe(true);
+        await page.waitForTimeout(200);
+        expect(await submit.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe('rgb(44, 72, 102)');
+        await page.mouse.move(1, 1);
+        await page.mouse.up();
+    };
+    const submitAndObserveDisabled = () =>
+        submit.evaluate(
+            (element) =>
+                new Promise<{ disabled: boolean; opacity: string }>((resolveDisabled) => {
+                    (element as HTMLButtonElement).click();
+                    setTimeout(
+                        () =>
+                            resolveDisabled({
+                                disabled: (element as HTMLButtonElement).disabled,
+                                opacity: getComputedStyle(element).opacity,
+                            }),
+                        200
+                    );
+                })
+        );
+
+    await input.fill('0000');
+    await verifyPointerActive();
+    expect(await submitAndObserveDisabled()).toEqual({ disabled: true, opacity: '0.65' });
+    await expect(dialog.getByRole('alert')).toContainText('2회 더 시도');
+    await expect(input).toBeFocused();
+
+    await input.fill('1234');
+    expect(await submitAndObserveDisabled()).toEqual({ disabled: true, opacity: '0.65' });
+    await expect(page).toHaveURL(/\/gateway\/lobby(?:\?verified=1)?$/);
+    await expect
+        .poll(() => page.evaluate(() => window.localStorage.getItem('sammo-session-token')))
+        .toBe('verified-session-token');
+    return geometry;
+};
+
+for (const viewport of [
+    { name: 'desktop', width: 1200, height: 900 },
+    { name: 'mobile', width: 390, height: 844 },
+] as const) {
+    test(`completes password-login KakaoTalk OTP on ${viewport.name}`, async ({ page }) => {
+        const fixture = await installFixture(page, 'password');
+        await page.setViewportSize(viewport);
+        await page.goto('/gateway/');
+        await page.getByLabel('계정명').fill('kakao-otp-user');
+        await page.getByLabel('비밀번호').fill('password-for-browser-fixture');
+        await page.getByRole('button', { name: '로그인', exact: true }).click();
+
+        const geometry = await verifyDialog(page, `kakao-otp-password-${viewport.name}`);
+        expect(geometry.width).toBe(viewport.name === 'desktop' ? 500 : 374);
+        expect(geometry.y).toBe(viewport.name === 'desktop' ? 28 : 8);
+        expect(fixture.otpAttempts()).toBe(2);
+    });
+}
+
+test('completes the same KakaoTalk OTP flow after OAuth callback', async ({ page }) => {
+    const fixture = await installFixture(page, 'oauth');
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await page.goto('/gateway/oauth/callback?code=oauth-code&state=oauth-state');
+
+    await verifyDialog(page, 'kakao-otp-oauth-callback');
+    await expect(page).toHaveURL(/\/gateway\/lobby\?verified=1$/);
+    expect(fixture.otpAttempts()).toBe(2);
+});
@@ -60,6 +60,9 @@ const loginGame = async (username: string, password: string) => {
        ).toString('base64'),
    };
    const login = await gateway.auth.login.mutate({ username, credential });
+    if (login.status === 'otp') {
+        throw new Error('Live lifecycle fixture requires a currently verified KakaoTalk login.');
+    }
    gatewaySession.token = login.sessionToken;
    const issued = await gateway.auth.issueGameSession.mutate({
        sessionToken: login.sessionToken,
@@ -16,6 +16,7 @@ export default defineConfig({
        'account-icon-sync.spec.ts',
        'legacy-log-html.spec.ts',
        'gateway-notice-html.spec.ts',
+        'kakao-otp.spec.ts',
    ],
    fullyParallel: false,
    workers: 1,