验证 reCaptcha 令牌 API 平台

Verify reCaptcha Token API Platform

我希望你们中的一些人能给我一些关于如何在服务器上验证我的 reCaptcha 令牌的最佳实践。

我有一个带有 API 平台的 Symfony 6 应用程序。我已经将一些实体定义为 API 资源,因此我可以 POST 数据。在前端,我使用带有 axios 的 Vue 来 POST 到特定的端点。

我想在我的表单数据被 posted 之前验证 reCaptcha 令牌,并提出以下 3 个选项(不确定其中任何一个是否是正确的方法关于这个)

  1. 为 reCaptcha 创建一个单独的端点,我 post 数据并取决于响应 运行 axios post 是否请求表单。

  2. 在我想使用 reCaptcha 的实体上创建一个向上映射 属性,并在其上设置一个自定义验证器,以验证对令牌的响应是否成功。然后我可以将 reCaptcha 令牌作为 post 请求的一部分发送。

  3. 为 PRE_POST 创建事件侦听器并以某种方式在那里验证???

我不确定我是否在正确的轨道上进行上述任何操作,我能找到的文档几乎不存在。

我真的很感激被指出正确的方向,或者也许是我当前设置的最佳实践示例?

对于那些遇到同样问题的人,我通过以下步骤解决了它:(我仍然想从有更多知识的人那里知道,这是否被认为是最佳实践,或者是否有更好的方式)。

  1. 向我发布数据的 Symfony 实体添加了一个未映射的字段(没有 #[ORM\Column 注释),称为 reCaptchaToken。将 set 方法添加到我的 denormalizationContext 组。

  2. 创建了 ReCaptchaConstraint(class 扩展约束)并将 validatedBy 方法设置为 ReCaptchaConstraintValidator::class

  3. 创建了 ReCaptchaConstraintValidator(class 扩展了 ConstraintValidator),将 HttpClientInterface 添加到构造函数并在验证方法中发布到 recaptcha API(此端点的详细信息可以在 reCaptcha 文档中找到) 来验证令牌和分数。如果验证失败或分数太低,则添加违规。

  4. 返回 Symfony 实体,将 #[ReCaptchaConstraint] 注释添加到 reCaptchaToken 字段。

  5. 然后从前端创建Vue方法:

    validateCaptcha() {
          return new Promise((res) => {
            grecaptcha.ready(() => {
              grecaptcha.execute('YOUR_SITE_KEY', {action:
                    'addContact'}).then((token) => {
                return res(token);
              })
            })
          })
        }
    

在 validateCaptcha() 的 .then() 方法中,将令牌添加到我的 JSON 对象并正常发布到 API 端点。

现在,如果我的令牌或分数有问题,我会收到从 POST 返回的验证违规。

希望这可以帮助其他苦苦挣扎的人。