在 sapper 中使用 recaptcha

Use recaptcha in sapper

我正在尝试将 recaptcha 与 sapper 一起使用，实际上我在 svelte 的 onMount 事件中动态加载了 recaptcha CDN，到目前为止一切正常：

但我需要从服务器端加载 reCAPTCHA 站点密钥，类似于 .env 文件，但我无法从官方文档中找到执行此操作的方法，有一种官方方法可以将信息加载到sapper 中服务器端的组件？

您没有从服务器端加载密钥，因为它在客户端中运行。密钥需要存在于客户端 JavaScript 包中。包含它的最简单方法是配置 replace 插件（如果你使用 Rollup）或 DefinePlugin（在 webpack 中）。

在 Rollup 中，update this block 在配置中：

replace({
  'process.browser': true,
  'process.env.NODE_ENV': JSON.stringify(mode),
  'process.env.RECAPTCHA_KEY': my_recaptcha_key
})

在 webpack 中，update this block:

new webpack.DefinePlugin({
  'process.browser': true,
  'process.env.NODE_ENV': JSON.stringify(mode),
  'process.env.RECAPTCHA_KEY': JSON.stringify(my_recaptcha_key)
})

然后，您可以在代码中引用该值：

script.src = `https://www.google.com/recaptcha/api.js?render=${process.env.RECAPTCHA_KEY}`;

以后请避免使用屏幕截图来提供代码示例，而是使用 markdown。它使页面更易于搜索，使用辅助技术的人更容易访问，并且意味着人们可以复制和粘贴代码，而不必重新键入。