在sapper中使用recaptcha

Question

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

​

​

但是我需要从服务器端加载reCAPTCHA站点密钥，就像.env文件一样，但是我无法从官方文档中找到这样做的方法，有一种官方方法可以在sapper中从服务器端将信息加载到组件中吗？

Answer 1

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

在汇总中，配置中的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。它使页面更容易搜索，更容易被使用辅助技术的人们访问，这意味着人们可以复制和粘贴代码，而不必重新键入它。