在 Next.js 中使用 Google ReCaptcha v3

Question

使用 React ^16.13.1 & Next ^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

Answer 1

我的代码有两个问题：

由于next.js 处理 .env variables的方式， react-google-recaptcha-v3 包被挂起。要将 .env 变量暴露给浏览器，您需要在它前面加上 .env 变量NEXT_PUBLIC_。

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