@gahojin-inc/react-google-recaptcha 2025.9.0 → 2025.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +29 -28
- package/dist/index.mjs.map +1 -1
- package/dist/types.d.mts +1 -1
- package/dist/utils.d.mts +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -3,9 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
|
|
4
4
|
//#region src/utils.ts
|
|
5
5
|
const getRecaptchaScriptSrc = (render, language, useRecaptchaNet, useEnterprise) => {
|
|
6
|
-
|
|
7
|
-
const script = useEnterprise ? "enterprise.js" : "api.js";
|
|
8
|
-
return `https://${hostName}/recaptcha/${script}?render=${render}${language ? `&hl=${language}` : ""}`;
|
|
6
|
+
return `https://${useRecaptchaNet ? "recaptcha.net" : "google.com"}/recaptcha/${useEnterprise ? "enterprise.js" : "api.js"}?render=${render}${language ? `&hl=${language}` : ""}`;
|
|
9
7
|
};
|
|
10
8
|
const injectScriptTag = (scriptId, language, useRecaptchaNet, useEnterprise, onLoad) => {
|
|
11
9
|
const script = document.createElement("script");
|
|
@@ -15,9 +13,10 @@ const injectScriptTag = (scriptId, language, useRecaptchaNet, useEnterprise, onL
|
|
|
15
13
|
script.async = true;
|
|
16
14
|
script.defer = true;
|
|
17
15
|
script.onload = onLoad;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
document.head.appendChild(script);
|
|
17
|
+
return () => {
|
|
18
|
+
document.head.removeChild(script);
|
|
19
|
+
};
|
|
21
20
|
};
|
|
22
21
|
const removeScriptTag = () => {
|
|
23
22
|
removeRecaptchBadge();
|
|
@@ -40,15 +39,16 @@ const GoogleReCaptchaContext = createContext({
|
|
|
40
39
|
const GoogleReCaptchaProvider = ({ siteKey, language, useRecaptchaNet, useEnterprise, container, badge, theme, children }) => {
|
|
41
40
|
const id = useId();
|
|
42
41
|
const containerId = useMemo(() => container ? container : `${id}-container`, [id, container]);
|
|
43
|
-
const [state, setState] = useState({
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
const [state, setState] = useState({ isLoading: true });
|
|
43
|
+
const widgetId = useRef(siteKey);
|
|
44
|
+
const grecaptcha = useRef(null);
|
|
45
|
+
const scriptLoaded = useRef(false);
|
|
47
46
|
const successHandler = useRef(null);
|
|
48
47
|
const errorHandler = useRef(null);
|
|
49
48
|
const handleSuccess = useCallback((token) => {
|
|
50
49
|
if (successHandler.current) {
|
|
51
50
|
successHandler.current?.(token);
|
|
51
|
+
grecaptcha.current?.reset(widgetId.current);
|
|
52
52
|
successHandler.current = null;
|
|
53
53
|
errorHandler.current = null;
|
|
54
54
|
}
|
|
@@ -61,27 +61,27 @@ const GoogleReCaptchaProvider = ({ siteKey, language, useRecaptchaNet, useEnterp
|
|
|
61
61
|
}
|
|
62
62
|
}, []);
|
|
63
63
|
const onLoad = useCallback(() => {
|
|
64
|
-
const
|
|
65
|
-
if (!
|
|
64
|
+
const instance = window.grecaptcha?.enterprise ?? window.grecaptcha;
|
|
65
|
+
if (!instance) {
|
|
66
66
|
setState({
|
|
67
67
|
isLoading: false,
|
|
68
|
-
|
|
69
|
-
error: /* @__PURE__ */ new Error("ReCaptcha is not available")
|
|
68
|
+
error: /* @__PURE__ */ new Error("reCaptcha is not available")
|
|
70
69
|
});
|
|
71
70
|
return;
|
|
72
71
|
}
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
if (scriptLoaded.current) return;
|
|
73
|
+
scriptLoaded.current = true;
|
|
74
|
+
instance.ready(() => {
|
|
75
|
+
widgetId.current = instance.render(containerId, {
|
|
75
76
|
sitekey: siteKey,
|
|
76
77
|
badge,
|
|
77
78
|
theme,
|
|
78
79
|
size: "invisible",
|
|
79
|
-
callback:
|
|
80
|
-
"error-callback":
|
|
80
|
+
callback: handleSuccess,
|
|
81
|
+
"error-callback": handleError
|
|
81
82
|
});
|
|
83
|
+
grecaptcha.current = instance;
|
|
82
84
|
setState({
|
|
83
|
-
widgetId,
|
|
84
|
-
grecaptcha,
|
|
85
85
|
error: null,
|
|
86
86
|
isLoading: false
|
|
87
87
|
});
|
|
@@ -94,28 +94,29 @@ const GoogleReCaptchaProvider = ({ siteKey, language, useRecaptchaNet, useEnterp
|
|
|
94
94
|
handleSuccess,
|
|
95
95
|
handleError
|
|
96
96
|
]);
|
|
97
|
+
const reset = useCallback(() => {
|
|
98
|
+
grecaptcha.current?.reset(widgetId.current);
|
|
99
|
+
}, []);
|
|
97
100
|
const execute = useCallback((action) => {
|
|
98
|
-
const
|
|
99
|
-
if (
|
|
101
|
+
const instance = grecaptcha.current;
|
|
102
|
+
if (instance?.execute) {
|
|
100
103
|
const promise = new Promise((resolve, reject) => {
|
|
101
104
|
successHandler.current = resolve;
|
|
102
105
|
errorHandler.current = reject;
|
|
103
106
|
});
|
|
104
|
-
return
|
|
107
|
+
return Promise.resolve(instance.execute(widgetId.current, action ? { action } : void 0)).then((token) => {
|
|
105
108
|
if (token) handleSuccess(token);
|
|
106
109
|
return promise;
|
|
107
110
|
});
|
|
108
111
|
}
|
|
109
112
|
return Promise.reject("ReCaptcha is not available");
|
|
110
|
-
}, [
|
|
111
|
-
const reset = useCallback(() => {
|
|
112
|
-
state?.grecaptcha?.reset(state.widgetId);
|
|
113
|
-
}, [state]);
|
|
113
|
+
}, [handleSuccess]);
|
|
114
114
|
useEffect(() => {
|
|
115
115
|
const removeScript = injectScriptTag(id, language, useRecaptchaNet, useEnterprise, onLoad);
|
|
116
116
|
return () => {
|
|
117
|
-
removeScript
|
|
117
|
+
removeScript();
|
|
118
118
|
removeScriptTag();
|
|
119
|
+
scriptLoaded.current = false;
|
|
119
120
|
};
|
|
120
121
|
}, [
|
|
121
122
|
id,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["GoogleReCaptchaContext: Context<GoogleReCaptchaContextType>","value: GoogleReCaptchaContextType"],"sources":["../src/utils.ts","../src/context.tsx","../src/hooks.ts"],"sourcesContent":["export const getRecaptchaScriptSrc = (\n render: string,\n language: string | null | undefined,\n useRecaptchaNet: boolean | undefined,\n useEnterprise: boolean | undefined,\n): string => {\n const hostName = useRecaptchaNet ? 'recaptcha.net' : 'google.com'\n const script = useEnterprise ? 'enterprise.js' : 'api.js'\n\n return `https://${hostName}/recaptcha/${script}?render=${render}${language ? `&hl=${language}` : ''}`\n}\n\nexport const injectScriptTag = (\n scriptId: string,\n language: string | null | undefined,\n useRecaptchaNet: boolean | undefined,\n useEnterprise: boolean | undefined,\n onLoad: () => void,\n):
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["GoogleReCaptchaContext: Context<GoogleReCaptchaContextType>","value: GoogleReCaptchaContextType"],"sources":["../src/utils.ts","../src/context.tsx","../src/hooks.ts"],"sourcesContent":["export const getRecaptchaScriptSrc = (\n render: string,\n language: string | null | undefined,\n useRecaptchaNet: boolean | undefined,\n useEnterprise: boolean | undefined,\n): string => {\n const hostName = useRecaptchaNet ? 'recaptcha.net' : 'google.com'\n const script = useEnterprise ? 'enterprise.js' : 'api.js'\n\n return `https://${hostName}/recaptcha/${script}?render=${render}${language ? `&hl=${language}` : ''}`\n}\n\nexport const injectScriptTag = (\n scriptId: string,\n language: string | null | undefined,\n useRecaptchaNet: boolean | undefined,\n useEnterprise: boolean | undefined,\n onLoad: () => void,\n): (() => void) => {\n const script = document.createElement('script')\n script.type = 'text/javascript'\n script.id = scriptId\n script.src = getRecaptchaScriptSrc('explicit', language, useRecaptchaNet, useEnterprise)\n script.async = true\n script.defer = true\n script.onload = onLoad\n\n document.head.appendChild(script)\n return () => {\n document.head.removeChild(script)\n }\n}\n\nexport const removeScriptTag = (): void => {\n removeRecaptchBadge()\n\n const script = document.querySelector('script[src^=\"https://www.gstatic.com/recaptcha/releases\"]')\n if (script) {\n script.remove()\n }\n}\n\nexport const removeRecaptchBadge = (): void => {\n const nodeBadge = document.querySelector('.grecaptcha-badge')\n if (nodeBadge?.parentNode) {\n document.body.removeChild(nodeBadge.parentNode)\n }\n}\n","import { type Context, createContext, type JSX, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type { GoogleReCaptchaContextType, GoogleReCaptchaProviderProps, Grecaptcha } from './types'\nimport { injectScriptTag, removeScriptTag } from './utils.ts'\n\nconst GoogleReCaptchaContext: Context<GoogleReCaptchaContextType> = createContext<GoogleReCaptchaContextType>({\n isLoading: true,\n error: null,\n execute: () => Promise.reject('useGoogleRecaptcha must be used within an GoogleReCaptchaProvider'),\n reset: () => [],\n})\n\ntype State = {\n isLoading: boolean\n error?: Error | null\n}\n\nconst GoogleReCaptchaProvider = ({\n siteKey,\n language,\n useRecaptchaNet,\n useEnterprise,\n container,\n badge,\n theme,\n children,\n}: GoogleReCaptchaProviderProps): JSX.Element => {\n const id = useId()\n const containerId = useMemo(() => (container ? container : `${id}-container`), [id, container])\n const [state, setState] = useState<State>({ isLoading: true })\n\n const widgetId = useRef<string>(siteKey)\n const grecaptcha = useRef<Grecaptcha>(null)\n const scriptLoaded = useRef(false)\n const successHandler = useRef<(token: string) => void>(null)\n const errorHandler = useRef<(error: Error | undefined) => void>(null)\n\n const handleSuccess = useCallback((token: string) => {\n if (successHandler.current) {\n successHandler.current?.(token)\n // トークンを再度取得できるよう、リセットする\n grecaptcha.current?.reset(widgetId.current)\n successHandler.current = null\n errorHandler.current = null\n }\n }, [])\n\n const handleError = useCallback((error: Error | undefined) => {\n if (errorHandler.current) {\n errorHandler.current?.(error)\n successHandler.current = null\n errorHandler.current = null\n }\n }, [])\n\n // ReCaptcha初期化\n const onLoad = useCallback(() => {\n const instance = window.grecaptcha?.enterprise ?? window.grecaptcha\n if (!instance) {\n setState({\n isLoading: false,\n error: new Error('reCaptcha is not available'),\n })\n return\n }\n\n // 二重にrender実行されることを抑止\n if (scriptLoaded.current) {\n return\n }\n scriptLoaded.current = true\n\n instance.ready(() => {\n widgetId.current = instance.render(containerId, {\n sitekey: siteKey,\n badge,\n theme,\n size: 'invisible',\n callback: handleSuccess,\n 'error-callback': handleError,\n })\n grecaptcha.current = instance\n setState({\n error: null,\n isLoading: false,\n })\n })\n }, [siteKey, containerId, badge, theme, handleSuccess, handleError])\n\n const reset = useCallback(() => {\n grecaptcha.current?.reset(widgetId.current)\n }, [])\n\n const execute = useCallback(\n (action?: string) => {\n const instance = grecaptcha.current\n if (instance?.execute) {\n const promise = new Promise<string>((resolve, reject) => {\n successHandler.current = resolve\n errorHandler.current = reject\n })\n return Promise.resolve(instance.execute(widgetId.current, action ? { action } : undefined)).then((token) => {\n if (token) {\n handleSuccess(token)\n }\n // token = nullの場合、v2動作\n return promise\n })\n }\n return Promise.reject('ReCaptcha is not available')\n },\n [handleSuccess],\n )\n\n // scriptタグを追加/削除する\n useEffect(() => {\n const removeScript = injectScriptTag(id, language, useRecaptchaNet, useEnterprise, onLoad)\n return () => {\n removeScript()\n removeScriptTag()\n scriptLoaded.current = false\n }\n }, [id, language, useRecaptchaNet, useEnterprise, onLoad])\n\n const value: GoogleReCaptchaContextType = useMemo(\n () => ({\n isLoading: state.isLoading,\n error: state.error ?? null,\n execute,\n reset,\n }),\n [state, execute, reset],\n )\n\n return (\n <GoogleReCaptchaContext.Provider value={value}>\n {children}\n {container ? null : <div id={`${id}-container`} />}\n </GoogleReCaptchaContext.Provider>\n )\n}\n\nexport { GoogleReCaptchaProvider, GoogleReCaptchaContext }\nexport type { GoogleReCaptchaContextType, GoogleReCaptchaProviderProps }\n","import { useContext } from 'react'\nimport { GoogleReCaptchaContext, type GoogleReCaptchaContextType } from './context'\n\nconst useGoogleRecaptcha = (): GoogleReCaptchaContextType => {\n return useContext(GoogleReCaptchaContext)\n}\n\nexport { useGoogleRecaptcha }\n"],"mappings":";;;;AAAA,MAAa,yBACX,QACA,UACA,iBACA,kBACW;AAIX,QAAO,WAHU,kBAAkB,kBAAkB,aAG1B,aAFZ,gBAAgB,kBAAkB,SAEF,UAAU,SAAS,WAAW,OAAO,aAAa;;AAGnG,MAAa,mBACX,UACA,UACA,iBACA,eACA,WACiB;CACjB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,QAAO,OAAO;AACd,QAAO,KAAK;AACZ,QAAO,MAAM,sBAAsB,YAAY,UAAU,iBAAiB,cAAc;AACxF,QAAO,QAAQ;AACf,QAAO,QAAQ;AACf,QAAO,SAAS;AAEhB,UAAS,KAAK,YAAY,OAAO;AACjC,cAAa;AACX,WAAS,KAAK,YAAY,OAAO;;;AAIrC,MAAa,wBAA8B;AACzC,sBAAqB;CAErB,MAAM,SAAS,SAAS,cAAc,8DAA4D;AAClG,KAAI,OACF,QAAO,QAAQ;;AAInB,MAAa,4BAAkC;CAC7C,MAAM,YAAY,SAAS,cAAc,oBAAoB;AAC7D,KAAI,WAAW,WACb,UAAS,KAAK,YAAY,UAAU,WAAW;;;;;ACzCnD,MAAMA,yBAA8D,cAA0C;CAC5G,WAAW;CACX,OAAO;CACP,eAAe,QAAQ,OAAO,oEAAoE;CAClG,aAAa,EAAE;CAChB,CAAC;AAOF,MAAM,2BAA2B,EAC/B,SACA,UACA,iBACA,eACA,WACA,OACA,OACA,eAC+C;CAC/C,MAAM,KAAK,OAAO;CAClB,MAAM,cAAc,cAAe,YAAY,YAAY,GAAG,GAAG,aAAc,CAAC,IAAI,UAAU,CAAC;CAC/F,MAAM,CAAC,OAAO,YAAY,SAAgB,EAAE,WAAW,MAAM,CAAC;CAE9D,MAAM,WAAW,OAAe,QAAQ;CACxC,MAAM,aAAa,OAAmB,KAAK;CAC3C,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,iBAAiB,OAAgC,KAAK;CAC5D,MAAM,eAAe,OAA2C,KAAK;CAErE,MAAM,gBAAgB,aAAa,UAAkB;AACnD,MAAI,eAAe,SAAS;AAC1B,kBAAe,UAAU,MAAM;AAE/B,cAAW,SAAS,MAAM,SAAS,QAAQ;AAC3C,kBAAe,UAAU;AACzB,gBAAa,UAAU;;IAExB,EAAE,CAAC;CAEN,MAAM,cAAc,aAAa,UAA6B;AAC5D,MAAI,aAAa,SAAS;AACxB,gBAAa,UAAU,MAAM;AAC7B,kBAAe,UAAU;AACzB,gBAAa,UAAU;;IAExB,EAAE,CAAC;CAGN,MAAM,SAAS,kBAAkB;EAC/B,MAAM,WAAW,OAAO,YAAY,cAAc,OAAO;AACzD,MAAI,CAAC,UAAU;AACb,YAAS;IACP,WAAW;IACX,uBAAO,IAAI,MAAM,6BAA6B;IAC/C,CAAC;AACF;;AAIF,MAAI,aAAa,QACf;AAEF,eAAa,UAAU;AAEvB,WAAS,YAAY;AACnB,YAAS,UAAU,SAAS,OAAO,aAAa;IAC9C,SAAS;IACT;IACA;IACA,MAAM;IACN,UAAU;IACV,kBAAkB;IACnB,CAAC;AACF,cAAW,UAAU;AACrB,YAAS;IACP,OAAO;IACP,WAAW;IACZ,CAAC;IACF;IACD;EAAC;EAAS;EAAa;EAAO;EAAO;EAAe;EAAY,CAAC;CAEpE,MAAM,QAAQ,kBAAkB;AAC9B,aAAW,SAAS,MAAM,SAAS,QAAQ;IAC1C,EAAE,CAAC;CAEN,MAAM,UAAU,aACb,WAAoB;EACnB,MAAM,WAAW,WAAW;AAC5B,MAAI,UAAU,SAAS;GACrB,MAAM,UAAU,IAAI,SAAiB,SAAS,WAAW;AACvD,mBAAe,UAAU;AACzB,iBAAa,UAAU;KACvB;AACF,UAAO,QAAQ,QAAQ,SAAS,QAAQ,SAAS,SAAS,SAAS,EAAE,QAAQ,GAAG,OAAU,CAAC,CAAC,MAAM,UAAU;AAC1G,QAAI,MACF,eAAc,MAAM;AAGtB,WAAO;KACP;;AAEJ,SAAO,QAAQ,OAAO,6BAA6B;IAErD,CAAC,cAAc,CAChB;AAGD,iBAAgB;EACd,MAAM,eAAe,gBAAgB,IAAI,UAAU,iBAAiB,eAAe,OAAO;AAC1F,eAAa;AACX,iBAAc;AACd,oBAAiB;AACjB,gBAAa,UAAU;;IAExB;EAAC;EAAI;EAAU;EAAiB;EAAe;EAAO,CAAC;CAE1D,MAAMC,QAAoC,eACjC;EACL,WAAW,MAAM;EACjB,OAAO,MAAM,SAAS;EACtB;EACA;EACD,GACD;EAAC;EAAO;EAAS;EAAM,CACxB;AAED,QACE,qBAAC,uBAAuB;EAAgB;aACrC,UACA,YAAY,OAAO,oBAAC,SAAI,IAAI,GAAG,GAAG,cAAe;GAClB;;;;;ACtItC,MAAM,2BAAuD;AAC3D,QAAO,WAAW,uBAAuB"}
|
package/dist/types.d.mts
CHANGED
|
@@ -26,7 +26,7 @@ export type Action = {
|
|
|
26
26
|
export type Grecaptcha = {
|
|
27
27
|
ready: (onReady: () => void) => void;
|
|
28
28
|
render: (container: string | HTMLElement, params: Parameters) => string;
|
|
29
|
-
execute: (widgetId: string, params?: Action) =>
|
|
29
|
+
execute: (widgetId: string, params?: Action) => PromiseLike<string | null>;
|
|
30
30
|
reset: (widgetId: string) => void;
|
|
31
31
|
};
|
|
32
32
|
export type GoogleReCaptchaContextType = {
|
package/dist/utils.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare const getRecaptchaScriptSrc: (render: string, language: string | null | undefined, useRecaptchaNet: boolean | undefined, useEnterprise: boolean | undefined) => string;
|
|
2
|
-
export declare const injectScriptTag: (scriptId: string, language: string | null | undefined, useRecaptchaNet: boolean | undefined, useEnterprise: boolean | undefined, onLoad: () => void) =>
|
|
2
|
+
export declare const injectScriptTag: (scriptId: string, language: string | null | undefined, useRecaptchaNet: boolean | undefined, useEnterprise: boolean | undefined, onLoad: () => void) => (() => void);
|
|
3
3
|
export declare const removeScriptTag: () => void;
|
|
4
4
|
export declare const removeRecaptchBadge: () => void;
|