Firebase电话身份验证反应js

时间:2018-07-25 07:12:57

标签: reactjs firebase firebase-authentication

我试图在 react js 中实现 firebase 电话身份验证,而不使用 firebase UI 。 我该怎么办?

代码

requestVerificationCode = () => {
    const { phoneNumber } = this.state;
    const appVerifier = new firebase.auth.RecaptchaVerifier(
      "recaptcha-container"
    );
    if (phoneNumber < 10) {
      this.setState({ error: true });
    } else {
      this.setState({ message: "Sending code ..." });

      firebase
        .auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(confirmResult =>
          this.setState({ confirmResult, verifying: true })
        )
        .catch(error =>
          this.setState({
            message: `Sign In With Phone Number Error: ${error.message}`
          })
        );
    }
  };

错误


auth.esm.js:282 未被捕获的K {code:“ auth / argument-error”,消息:“未找到reCAPTCHA容器或已经包含内部元素!”}

1 个答案:

答案 0 :(得分:0)

重要的是要在Vue JS中等待componentDidMount()mounted(),以便装入包含"recaptcha-container"的dom元素。

HTML

<input id="recaptcha-container" type="button" onClick="this.onClick" />

JS

componentDidMount () {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier("recaptcha-container",
    {
       size:"invisible"
        // other options
    });
}

onClick() {
    const phoneNumber = this.phone;
    const appVerifier = window.recaptchaVerifier;
    firebase
    .auth()
    .signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(confirmResult => {
      // success
    })
    .catch(error => {
      // error
    });
}

如果您将用户重定向到id="recaptcha-container"所在的组件之外,则Recaptcha将可以正常工作,但会在控制台中引发与样式相关的错误,但这是因为它想要在页面上保留一个永久的位置。