response-google-recaptcha: одна рекапча с несколькими формами - PullRequest
Новая
       126

response-google-recaptcha: одна рекапча с несколькими формами

0 голосов
/ 07 мая 2020

Я использую Gatsby для настройки моей целевой страницы с 4 формами на ней. Я хотел бы защитить эти формы с помощью google recaptcha.

Я выбираю для этого пакет npm response-google-recaptcha, потому что он самый популярный. Я хотел бы использовать «невидимую» рекапчу v2, только с одним значком в правом нижнем углу моей страницы.

Моя проблема: как настроить только одну reCaptcha для 4 форм? Я видел много примеров для настройки капчи в одной форме, но с этим методом у меня на странице есть 4 значка: /

Что я сделал:

Настройте компонент ReCaptcha на более высоком уровне уровень моей страницы. Настройте ссылку в том же месте и передайте ее дочерним элементам: 

...
const recaptchaRef = React.createRef()

const IndexPage = () => {
  return (
    <>
      <SEO title=" " />
      <HeroSection recaptchaRef={recaptchaRef} />
      <Layout>
        <FixedHeaderSection recaptchaRef={recaptchaRef} />
        <JointSection />
      </Layout>
      <CommunitySection />
      <Layout>
        <CoachSection />
      </Layout>
      <NumberBannerSection />
      <AlumnisSection />
      <Layout>
        <CampusSection />
        <AlumniProjectSection />
        <PlateformeSection />
      </Layout>
      <ProgrammeSection />
      <Layout>
        <CalendarSection />
      </Layout>
      <CarrySection />
      <LastCallSection recaptchaRef={recaptchaRef} />
      <WhiteBookSection recaptchaRef={recaptchaRef} />
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="myKey"
        badge="bottomright"
      />
    </>
  )
}

После этого у меня есть компонент для моей формы, который вызывается разными компонентами: 

const CustomForm = ({
  subscribe,
  submitText,
  ctaFrom,
  inputColor,
  tags,
  mandrillTemplate,
  subject,
  recaptchaRef,
}) => {
  let email
  const [status, setStatus] = useState("waiting")
  const [message, setMessage] = useState("Chargement...")

  const submit = () => {
    if (email) {
      if (email.value.indexOf("@") > -1) {
        const doc = {
          email: email.value,
          tags: tags,
          mandrillTemplate: mandrillTemplate,
          subject: subject,
          ctaFrom: ctaFrom,
        }
        recaptchaRef.current.execute()

        axios.post(`${websiteURL}/.netlify/functions/mailchimp-subscribe`, doc)
        setStatus("success")
        if (ctaFrom === "candidate") {
          setMessage("Chargement...")
          window.location = `https://url/apply?email=${email.value}`
        } else {
          setMessage("Calendrier envoyé !")
        }
      }
    }
  }

  return (
    <Form>
      {
        <>
          {status === "success" ? (
            <MessageContainer>
              <P color={"#000"} align="center" weight="500">
                {message}
              </P>
            </MessageContainer>
          ) : (
            ""
          )}

          {status !== "success" && (
            <>
              <TextInput
                type="email"
                placeholder={
                  status === "error" ? "Email déja utilisé" : "Adresse mail"
                }
                inputColor={inputColor}
                color={status === "error" ? "#FF0A4D" : "#000"}
                placeholderColor={status === "error" ? "#FF0A4D" : "#505050"}
                ref={node => (email = node)}
              />
              <SubmitInput onClick={submit}>
                {submitText ? submitText : "Je candidate"}
              </SubmitInput>
            </>
          )}
        </>
      }
    </Form>
  )
}

( Просто чтобы знать, компоненты стилизованы с помощью "styled-component", и мои разработчики кодировали не форму html, а просто ввод с помощью кнопки. Я думаю, это не важно для ReCaptcha, но я предпочитаю заметить это )

В настоящее время reCaptcha работает (я должен сделать тест, если я настраиваю свой браузер как робот), но мой запрос ax ios воспроизводится, даже если человек не прошел тест. Думаю, мне придется поместить этот вызов в свойства "onChange" моего компонента на более высоком уровне моего кода. Итак, мне нужно будет настроить контекст для передачи данных.

Это выглядит очень сложно, просто настроить это ... Я читал много примеров, которые выглядят более простыми, но не подражайте моим проблема.

Итак, я в порядке или есть более простой способ? И еще, у меня в панели администратора Google есть сообщение: «Мы обнаружили, что ваш сайт не проверяет решения reCAPTCHA. Это необходимо для правильного использования reCAPTCHA на вашем сайте. Дополнительную информацию см. На нашем сайте для разработчиков», это нормально?

Спасибо за помощь :)

...