在sapper中使用recaptcha

Question

我正在尝试将recaptcha与sapper一起使用，实际上我在svelte的onMount事件中以动态方式将recaptcha CDN加载到了这里，一切都运行良好：

但是我需要从服务器端加载reCAPTCHA站点密钥，类似于.env文件，但是我无法从官方文档中找到实现此目的的方法，有一种官方方法可以从以下位置将信息加载到组件中在服务器端的服务器端？

Answer 1

您没有从服务器端加载密钥，因为它在客户端中运行。密钥需要出现在客户端JavaScript捆绑包中。包含它的最简单方法是配置replace插件（如果您使用汇总）或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。它使页面更易于搜索，使用辅助技术的人员也可以访问，并且意味着人们可以复制和粘贴代码，而不必重新输入代码。