Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 9x 9x 9x 4x 1x 3x 1x 2x 2x 2x 9x 5x 1x 1x 4x 4x 3x 1x 1x 2x 2x 1x 1x 9x | "use client";
import { useCallback } from "react";
/**
* reCAPTCHA v3 のトークン取得およびバックエンド検証を行うためのフック。
*
* @returns {Object} reCAPTCHA操作用関数を含むオブジェクト
* - `executeRecaptcha(action)`: Googleサーバーからトークンを取得します。
* - `verifyWithBackend(token, action)`: バックエンドAPIを呼び出してトークンを検証します。
*/
export function useRecaptcha() {
const siteKey = process.env.NEXT_PUBLIC_RECAPTCHA_V3_SITE_KEY;
const backendUrl = process.env.NEXT_PUBLIC_RECAPTCHA_BACKEND_URL;
/**
* reCAPTCHA v3 トークンを取得します。
*
* @param {string} action - 検証のアクション名 (例: 'login', 'submit_form')
* @returns {Promise<string>} 取得したトークン
* @throws {Error} reCAPTCHAがロードされていない、またはキーが設定されていない場合
*/
const executeRecaptcha = useCallback(
async (action: string): Promise<string> => {
if (!siteKey) {
throw new Error("reCAPTCHA site key is not configured");
}
if (!window.grecaptcha) {
throw new Error("reCAPTCHA script not loaded");
}
return new Promise((resolve, reject) => {
window.grecaptcha.ready(() => {
window.grecaptcha.execute(siteKey, { action }).then(resolve, reject);
});
});
},
[siteKey],
);
/**
* 取得したトークンをバックエンドで検証します。
*
* @param {string} token - executeRecaptchaで取得したトークン
* @param {string} action - アクション名
* @returns {Promise<boolean>} 検証成功時は true、失敗またはエラー時は false を返す
*/
const verifyWithBackend = useCallback(
async (token: string, action: string): Promise<boolean> => {
if (!backendUrl) {
console.error("Backend URL is not configured");
return false;
}
try {
// backendUrl は完全なエンドポイントURLとして扱います
const response = await fetch(backendUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ token, action }),
});
if (!response.ok) {
console.error("Failed to verify recaptcha", response.statusText);
return false;
}
const data = await response.json();
return data.success === true;
} catch (error) {
console.error("Error verifying recaptcha:", error);
return false;
}
},
[backendUrl],
);
return { executeRecaptcha, verifyWithBackend };
}
|