在 sapper 中使用 recaptcha答案

【问题标题】：Use recaptcha in sapper在 sapper 中使用 recaptcha
【发布时间】：2020-04-09 09:33:11
【问题描述】：

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

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

【问题讨论】：

【解决方案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。它使页面更易于搜索，更便于使用辅助技术的人访问，并且意味着人们可以复制和粘贴代码，而无需重新输入。

【讨论】：