在 Angular2 中实现 Google ReCaptcha答案

【问题标题】：Implement Google ReCaptcha In Angular2在 Angular2 中实现 Google ReCaptcha
【发布时间】：2017-07-03 15:13:03
【问题描述】：

我目前正在使用 Angular 2 开发应用程序，并希望使用 Google 的 ReCaptcha 进行用户验证。但是，到目前为止，我所看到的所有社区创建的模块似乎都没有使用服务器端身份验证以及注册 API 后提供的密钥。

我之前使用带有 Javascript 的显式渲染功能实现了 ReCaptcha。但是，我不确定如何在我的 Angular 2 Typescript 代码中实现相同的功能。理想情况下，我想让用户单击 ReCaptcha，一旦 ReCaptcha 完成，就会出现一个提交按钮，允许用户提交表单，然后我的后端服务器将完成包含密钥的最终验证。这将通过 http.post 调用来完成。但是，当用户按照 ReCaptcha 指南中的描述提交表单时，提交通常不会为我提供我应该通过 http.post 发送的“g-recaptcha-response”：

https://developers.google.com/recaptcha/docs/verify

如果有人有任何提示或经验，请告诉我。另外，如果需要其他信息，请询问，我在这里发布问题相对较新。

【问题讨论】：

如果您正在寻找等式的 PHP 方面，您可以查看this answer。对于 ng2 方面，您需要在发布到服务器的帖子中明确包含 recaptcha 值。（angular2-google-recaptcha 提供了如何执行此操作的演示）

标签： javascript php html angular recaptcha

【解决方案1】：

在 angular2 中有一篇很棒的文章解释了这一点。我认为这可能会让您知道如何处理这个问题。
用户单击您的重新验证按钮后，您必须调用您的后端服务器。在此之后，您可以将您的站点密钥发送到 google recaptcha api 进行验证。

app.get('/validate_captcha', (req, res) => {
      const options = {
        method: 'POST',
        uri: 'https://www.google.com/recaptcha/api/siteverify',
        qs: {
          secret,
          response: req.query.token  
        },
        json: true
      };

      rp(options)
        .then(response => res.json(response))
        .catch(() => {});

    });

这将帮助您完成后端。
如本文或文档中所述，您将在前端获得 grecaptcha-response。
查看此链接recaptcha

【讨论】：