Reactjs 在Next.js中使用Google ReCaptcha v3

使用React ^16.13.1和Next ^9.4.4

正在尝试在我的应用程序中工作

它似乎挂在

pages/index.js

中的

const result=wait executecaptcha（“主页”）

console.log（process.env.GOOGLE\u RECAPTCHA\u SITE\u键）

返回正确的键

硬编码

pages/_app.js

中的键会在浏览器中引发一些错误：

与位于的资源关联的cookiehttp://google.com/ 设置为'SameSite=None'，但没有'Secure'。它已被阻止，因为Chrome现在只提供标记为“SameSite=None”的cookie，如果它们也标记为“Secure”。您可以在“应用程序>存储>cookies”下的“开发人员工具”中查看cookies，并在中查看更多详细信息https://www.chromestatus.com/feature/5633521622188032.

asyncGeneratorStep @ asyncToGenerator.js:6
_throw @ asyncToGenerator.js:29
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
clickHandler @ index.js:34
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

与位于的跨站点资源关联的cookiehttps://www.google.com/ 设置时没有'SameSite'属性。它已经被阻止，因为Chrome现在只提供带有跨站点请求的cookie，如果它们被设置为'SameSite=None'和'Secure'。您可以在“应用程序>存储>cookies”下的“开发人员工具”中查看cookies，并在中查看更多详细信息https://www.chromestatus.com/feature/5088147346030592 及https://www.chromestatus.com/feature/5633521622188032.

asyncGeneratorStep @ asyncToGenerator.js:6
_throw @ asyncToGenerator.js:29
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
clickHandler @ index.js:34
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

pages/_app.js

import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';

function MyApp({ Component, pageProps }) {
    return (
        <GoogleReCaptchaProvider
            reCaptchaKey={process.env.GOOGLE_RECAPTCHA_SITE_KEY}
        >
            <Component {...pageProps} />
        </GoogleReCaptchaProvider>
    )
}

export default MyApp

import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'

const index = () => {
    const [token, setToken] = React.useState("");
    const { executeRecaptcha } = useGoogleReCaptcha()
    const clickHandler = async () => {
        if (!executeRecaptcha) {
            return;
        }

        const result = await executeRecaptcha("homepage");

        setToken(result);
        console.log(token)
    };
    return (
        <Button type='submit' color='blue' onClick={clickHandler}>Test GRecap</Button>
    )
}

export default index

---

我的代码有两个问题：

react-google-recaptcha-v3软件包因路径问题而挂起。要将.env变量公开给浏览器，需要在其前面加上

NEXT\u PUBLIC\u

---

使用google recaptcha v3进行本地测试时，您需要创建一个新密钥，用于使用localhost作为域的开发人员。

我的代码有两个问题：

react-google-recaptcha-v3软件包因路径问题而挂起。要将.env变量公开给浏览器，需要在其前面加上

NEXT\u PUBLIC\u

---

使用google recaptcha v3在本地进行测试时，您需要创建一个新密钥，用于使用localhost作为域的开发人员。

您最终使用

结果做了什么？你不应该用它来验证用户的行为吗？你最终用
result
做了什么？你不应该用它来验证用户的行为吗？