• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React i Google reCAPTCHA

Aruba Cloud - Virtual Private Server VPS
0 głosów
118 wizyt
pytanie zadane 7 listopada 2024 w Hostingi, domeny, usługi przez krzysieq18 Początkujący (370 p.)

Cześć,

Próbuję dodać do strony React funkcjonalność abym mógł wysyłać dane do API gdzie "captcha": "string" (więc będzie tam przesyłany token.) Jest jednak problem mianowicie cały czas po wypełnieniu formularza i kliknięciu submita ("Wyślij") pojawia mi się info: "Proszę rozwiązać CAPTCHA!", a w konsoli nie pokazują mi się żadne błędy.

Będę bardzo wdzięczny za pomoc w rozwiązaniu problemu :)

Kod(Member.jsx): 

import React, { useState, useEffect } from 'react';
import axios from 'axios';
...
import ReCAPTCHA from 'react-google-recaptcha'


const Member = () => {
  ...
  const [captchaToken, setCaptchaToken] = useState('');

  const validatePhoneNumber = (number) => {
    const phoneRegex = /^[0-9]{9}$/;
    return phoneRegex.test(number);
  };

  ...

  const handleCaptchaChange = (token) => {
    console.log('Captcha token:', token);
    setCaptchaToken(token);
  };
  

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!captchaToken) {
      setNotification({ type: 'error', message: 'Problem z CAPTCHA' });
      return;
    }

    if (!validatePhoneNumber(phone)) {
      setNotification({ type: 'error', message: 'Numer telefonu powinien się składać z dokładnie 9 cyfr.' });
      return;
    }

    ....

    const data = {
      firstName,
      lastName,
      phone: parseInt(phone, 10),
      ....
      captcha: captchaToken,
    };
    
    console.log(data);

    try {
      await axios.post('https://###, data, {
        headers: {
          'Content-Type': 'application/json',
          'accept': 'application/json'
        },
      });
      setNotification({ type: 'success', message: '...' });
      setFirstName('');
      setLastName('');
      setPhone('');
      ....
    } catch (error) {
      setNotification({ type: 'error', message: '...' });
    }
  };

  const closeNotification = () => {
    setNotification({ type: '', message: '' });
  };

  const handleSelectAll = () => {
    const newSelectAll = !selectAll;
    setSelectAll(newSelectAll);
    setTermsAccepted(newSelectAll);
    ...
  };

  const isFormValid = termsAccepted && ageConfirmed && dataProcessingAccepted && newsletterAccepted;

  useEffect(() => {
    
  }, [showConfetti]);

  return (
    <section className="section member">
      <div className="container">
        <h2 className="title">...</h2>
        <form onSubmit={handleSubmit}>
          <div className="row">
            <input
              type="text"
              id="firstName"
              className="form-control"
              placeholder="Imię"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              required
            />
          </div>
          <div className="row">
            <input
              type="text"
              id="lastName"
              className="form-control"
              placeholder="Nazwisko"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              required
            />
          </div>
         ...
          <ReCAPTCHA
            sitekey="..."
            action="submit"
            verifyCallback={handleCaptchaChange}
            size="normal"
          />
          <button
            type="submit"
            className={`btn btn-primary ${!isFormValid ? 'disabled' : ''}`}
            disabled={!isFormValid}
          >
            Wyślij
          </button>
        </form>
      </div>

     ...
    </section>
  );
};

export default Member;

 

1 odpowiedź

0 głosów
odpowiedź 8 listopada 2024 przez linuxoid Nowicjusz (140 p.)
edycja 8 listopada 2024 przez linuxoid
komentarz 8 listopada 2024 przez linuxoid Nowicjusz (140 p.)
Kolejna sugestia, sprawdzić bibliotekę której używasz, tzn. przeczytać dokumentację

https://www.npmjs.com/package/react-google-recaptcha

Podobne pytania

0 głosów
1 odpowiedź 953 wizyt
pytanie zadane 14 stycznia 2023 w PHP przez kingkushlee Gaduła (3,960 p.)
0 głosów
1 odpowiedź 1,415 wizyt
pytanie zadane 30 grudnia 2020 w JavaScript przez WiktroH Mądrala (6,550 p.)
0 głosów
3 odpowiedzi 394 wizyt
pytanie zadane 3 listopada 2018 w PHP przez StEvo Nowicjusz (170 p.)

93,323 zapytań

142,322 odpowiedzi

322,389 komentarzy

62,652 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...