wegmeister/recaptcha

集成 Google reCaptcha 的 Flow Form Framework 表单元素

安装数: 67,255

依赖: 0

建议: 0

安全: 0

星级: 8

关注者: 6

分支: 24

公开问题: 0

类型:neos-package

2.3.7 2024-01-09 15:20 UTC

README

Neos 插件,用于将 Google 的 reCaptcha 集成到表单中。支持以下表单集成

  • Neos.Form (v4): Google reCaptcha v2 和 v3
  • Neos.Form.Builder (v2): Google reCaptcha v2 和 v3
  • Neos.Fusion.Form (v2): Google reCaptcha v3

安装

使用 composer 安装此包

composer require wegmeister/recaptcha

之后,访问 http://www.google.com/recaptcha 并为您的网站创建一个密钥。根据上面的列表选择您希望使用的 API 版本。

配置

HTTP 代理

如果您在服务器上使用 HTTP 代理,您需要添加此配置

Wegmeister:
  Recaptcha:
    requestMethod: 'Wegmeister\Recaptcha\RequestMethod\CurlPostWithProxy'
    httpProxy: 'http://yourproxy.com:1234'

使用 Neos.Form

只需将新的表单元素添加到您的表单定义可渲染项中

type: 'Neos.Form:Form'
identifier: someIdentifier
label: Label
renderables:
  -
    type: 'Neos.Form:Page'
    identifier: page-one
    renderables:
      -
        type: 'Wegmeister.Recaptcha:CaptchaV2'
        identifier: captcha
        label: Captcha
        properties:
          siteKey: your-public-key
          secretKey: your-private-key
          # Optional value if you want to verify the hostname too:
          expectedHostname: 'www.your-domain.com'
          wrapperClassAttribute: 'form-group'
          # Optional values to adjust recaptcha. For further information visit
          # https://developers.google.com/recaptcha/docs/display#config
          theme: 'light'
          type: 'image'
          size: 'normal'
          tabindex: 0
          # If you want to print the recaptche text in a specified language,
          #   you can set that language here.
          # Note: If you use the Neos.Form.Builder package, the language will
          #   automatically be set by your current language dimension.
          #lang: 'de'
        # optionally change the translationPackage
        # if you want to adjust the error message
        #renderingOptions:
        #  validationErrorTranslationPackage: 'Wegmeister.Recaptcha'
finishers:
  -
   <Your finishers here>

使用 Neos.Form.Builder

将 Captcha 表单元素添加到您的表单中 Captch Element

从检查器配置 reCaptcha 站点密钥、秘密密钥和其他设置

❗ 此插件版本 3.x 中将删除带有额外验证器的旧 ReCaptcha 表单元素。请更新到新的表单元素。

Neos.Form 和 Neos.Form.Builder 的全局设置

此插件将自动加载所需的 recaptcha/api.js 文件一次。如果您自己已加载此文件,您可以在设置中禁用它。此外,还有 Element.prototype.closest 的 polyfill。如果您不需要它,也可以禁用它。

Neos:
  Form:
    presets:
      default:
        formElementTypes:
          'Wegmeister.Recaptcha:Captcha':
            renderingOptions:
              # If you have already included the ReCaptcha api.js file yourself, set this to false.
              includeAPIScript: true
              # If you don't need a closest polyfill in js, set this to false.
              includeClosestPolyfill: true
            # Set your siteKey and secretKey in your settings file globally (or if you want to keep it outside your git)
            properties:
              siteKey: 'your-public-key'
              secretKey: 'your-private-key'

使用 Neos.Fusion.Form

❗ 目前,仅支持 Fusion Forms 中的 reCaptcha v3。请随意提供支持 v2 的 PR。

FieldContainerCaptchaV3 元素添加到您的表单中

<Neos.Fusion.Form:FieldContainer field.name="captchaV3">
    <Wegmeister.Recaptcha:FusionForm.CaptchaV3 siteKey="your-site-key" action="your-action-name" includeApiScript={true} />
</Neos.Fusion.Form:FieldContainer>

根据我们的需求设置字段名,但请确保在模式中使用相同的字段名(见下文)。

由于错误消息是在表单元素的当前位置渲染的,因此您应将其放置在表单的开始或结束位置。

以下选项可用

  • siteKey(必需):reCaptcha v3 网站密钥。
  • action:为了统计目的,使用 action 将 captcha 评估根据您的使用分组,例如 "contactForm"。 更多信息
  • includeApiScript:是否包含 reCaptcha API 脚本。如果您已经全局包含它,请将其设置为 false。

然后,将字段添加到模式中并配置验证器

captchaV3 = ${Form.Schema.string().validator('Wegmeister.Recaptcha:IsValid', {secretKey: 'your-secret-key', errorMessage: 'The reCaptcha check failed. Try submitting the form again.'})}

确保密钥(例如 captchaV3)与 FieldContainer 中的密钥(见上文)匹配。

以下选项可用

  • secretKey(必需):reCaptcha v3 秘密密钥。
  • errorMessage:在 captcha 检查失败的情况下使用此选项来覆盖错误消息。

i18n

目前支持以下语言:英语、德语、法语和荷兰语。请随意向我们发送其他语言的标签,以便我们可以将其添加到插件中。

致谢

© 本杰明·克利克斯, die wegmeister gmbh