firebase.auth.RecaptchaVerifier с reCaptcha v3 - PullRequest
0 голосов
/ 27 апреля 2020

Я пытаюсь внедрить reCaptcha v3 на свой сайт и в настоящее время использую React. js и Firebase для аутентификации. Ранее я использовал reCaptcha (v2?) Со встроенным в Firebase методом аутентификации firebase.auth.RecaptchaVerifier, следуя тому же методу, что и в этом посте . Помимо моей собственной потребности в reCaptcha, Firebase иногда требует ее в целях аутентификации для регистрации / входа.

Я не уверен, как использовать эту библиотеку реагировать-recaptcha-v3 и реализовать это методом firebase.auth.RecaptchaVerifier, как я делал раньше. Есть ли способ передать токен непосредственно в Firebase для проверки подлинности? Или, может быть, я неправильно использую функцию обратного вызова verifyCallback из react-recaptcha-v3 в firebase.auth.RecaptchaVerifier? Может быть, reCaptcha v3 пока недоступен с firebase.auth.RecaptchaVerifier? Может быть, я должен просто использовать невидимую версию reCaptcha v2 для достижения желаемого эффекта?

response-recaptcha-v3 пример кода:

import React, { Component } from 'react';
import { ReCaptcha } from 'react-recaptcha-v3'

class ExampleComponent extends Component {

  verifyCallback = (recaptchaToken) => {
    // Here you will get the final recaptchaToken!!!  
    console.log(recaptchaToken, "<= your recaptcha token")
    // do something with the token?
  }

  render() {
    return (
      <div>
        <ReCaptcha
            sitekey="your_site_key"
            action='action_name'
            verifyCallback={this.verifyCallback}
        />
      </div>
    );
  };
};

export default ExampleComponent;

Current RecaptchaVerifier использование:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha', {
        'callback': (response) => {
          // reCAPTCHA solved, allow.
        },
        'expired-callback': () => {
          // Response expired. Ask user to solve reCAPTCHA again.
          window.recaptchaVerifier.clear()
        }
      })
      window.recaptchaVerifier.render()
...