在Next.js中使用Google ReCaptcha v3

问题描述

使用React ^ 16.13.1和下一个^ 9.4.4

尝试在我的应用中使用react-google-recaptcha-v3。

它似乎挂在const result = await executeRecaptcha("homepage")中的pages/index.js上。

console.log(process.env.GOOGLE_RECAPTCHA_SITE_KEY)返回正确的密钥。

在pages/_app.js中对密钥进行硬编码会在浏览器中引发一些错误：

A cookie associated with a resource at http://google.com/ was set with `SameSite=None` but without `Secure`. It has been blocked,as Chrome Now only delivers cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.

A cookie associated with a cross-site resource at https://www.google.com/ was set without the `SameSite` attribute. It has been blocked,as Chrome Now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and 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

pages/index.js

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软件包由于next.js handles .env variables的方式而挂起。要将.env变量公开给浏览器，您需要在其前面加上NEXT_PUBLIC_。

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