iframe

src/app/verification/page.tsx

@@ -0,0 +1 @@
+export default async function Verification() {}

src/components/play/index.tsx

@@ -12,6 +12,7 @@ import Script from "next/script";
 import { useCallback, useState } from "react";
 import { z } from "zod";
 import { useConfirmModal } from "../confirmModal";
+import { useVerificationIframe } from "../verification/VerificationIframe";
 import { AnswerForm } from "./components/answerForm";
 import { AnswerResult } from "./components/answerResult";
 import { Feed } from "./components/feed";
@@ -153,14 +154,17 @@ export function Play({
 		queryFn: () => fetchCanPlay(),
 	});
 	const { confirm, view } = useConfirmModal();
+	const { iframe } = useVerificationIframe();
 	if (canPlayResult && !canPlayResult.canPlay) {
 		switch (canPlayResult.reason) {
 			case "desktop_only":
 				return <MobileLimitation />;
 		}
 	}
+
 	return (
 		<>
+			{iframe}
 			<Script
 				strategy="lazyOnload"
 				src={`https://www.google.com/recaptcha/api.js?render=${CLIENT_KEY}`}

src/components/verification/VerificationIframe.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { VERIFICATION_PARAMETER_NAME } from "./constants";
+
+const getNow = () => new Date().getTime().toString();
+
+export const useVerificationIframe = () => {
+	const [verificationId, setVerificationId] = useState(getNow);
+	useEffect(() => {
+		const id = setInterval(
+			() => {
+				const now = getNow();
+				setVerificationId(now);
+			},
+			1000 * 60 * 5,
+		);
+	}, []);
+
+	return {
+		iframe: (
+			<iframe
+				style={{ display: "none" }}
+				src={`/verification?${VERIFICATION_PARAMETER_NAME}=${verificationId}`}
+			/>
+		),
+	};
+};

src/components/verification/VerificationIframeContent.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+	VERIFICATION_PARAMETER_NAME,
+	createVerificationDonePostMessage,
+} from "./constants";
+
+export const VerificationIframeContent = () => {
+	useEffect(() => {
+		const verificationId = new URLSearchParams(window.location.search).get(
+			VERIFICATION_PARAMETER_NAME,
+		);
+		verificationId &&
+			window.top?.postMessage(
+				createVerificationDonePostMessage(verificationId),
+				"*",
+			);
+	}, []);
+};

src/components/verification/constants.ts

@@ -0,0 +1,4 @@
+export const VERIFICATION_PARAMETER_NAME = "verificationId";
+export const createVerificationDonePostMessage = (messageId: string) => {
+	return `VerificationDone-${messageId}`;
+};