Использование библиотеки activ-google-recaptcha-v3 - PullRequest
Новая
       16

Использование библиотеки activ-google-recaptcha-v3

0 голосов
/ 28 января 2019

Я новичок в реакции и пытаюсь использовать библиотеку реагировать-google-recaptcha-v3.

Я использую ее с формой formik и размещаю данные с помощью axios.Это работает, когда я размещаю жестко закодированный токен в моем заголовке.Но когда я пытаюсь использовать токен с библиотекой реагировать-google-recaptcha-v3, он не работает.Я думаю, что я использую это неправильно или что-то. 

return (
  <GoogleReCaptchaProvider reCaptchaKey='MY-KEY'>
    <GoogleReCaptcha onVerify={token => this.setState({ recaptchaToken: token })} />
  <Grid>
    <Row>
      <Col xs={6} xsOffset={3} id='auth-form-container'>
        <Formik
          initialValues={{ email: "" }}
          validationSchema={forgotPasswordSchema}
          onSubmit={(values, { setErrors, setSubmitting }) => {

            const headers = {
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                recaptcha: this.state.recaptchaToken
              }
            };

            const body = {
              UsernameOrEmail: values.email,
              ReturnUrl: "/"
            };

            const url = "http://localhost:5000/api/Users/ResetPassword";

            axios
              .post(url, body, headers)
              .then(result => {
                // Do somthing
                setSubmitting(false);
                this.handleSuccess(result);
              })
              .catch(error => {
                // Do somthing
                setSubmitting(false);
                //TODO: Add logging
                console.log("Fejl");
                if (error.response.status === 400) {
                  console.log("Bad Request ...");
                  this.setState({ errorMessage: "Bad Request" });
                } else {
                  console.log("Something went wrong ...");
                  this.setState({ errorMessage: "Something went wrong" });
                }
              });
          }}>
          {({ isSubmitting }) => (
            <Form>
              {errorMessage ? <Error errorMessage={errorMessage} /> : null}
              <Row>
                <Col xs={12}>
                  <label htmlFor='email'>E-mail:</label>
                  <Field type='email' name='email' />
                  <ErrorMessage name='email'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <button type='submit' disabled={isSubmitting}>
                    Reset password
                  </button>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <ul>
                    <li>
                      <Link to='/'>Back to login</Link>
                    </li>
                  </ul>
                </Col>
              </Row>
            </Form>
          )}
        </Formik>
      </Col>
    </Row>
  </Grid>
  </GoogleReCaptchaProvider>
);
...