Next js Firebase Auth 电话号码不可见的recaptcha 第一次尝试 useEffect()第二次尝试：React 组件

问题描述

Nextjs Firebase 电话验证

第一次尝试 useEffect()

useEffect(() => {
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha',{
            'size': 'invisible','callback': (response) => {
                console.log("This is not fired on loading",response)
            }
        })

    },[])

return (
        <>
            <div id="recaptcha"></div>
            <button onClick={clicked}> Click me </button>
        </>
    )

这会运行，但是recaptcha 不起作用...用户被迫选择消防栓。

第二次尝试：React 组件

灵感：https://stackoverflow.com/a/63860925/7451631 将此导入到登录页面

class Recap extends Component {

  constructor(props) {
    super(props);
    this.signIn = this.signIn.bind(this);
  }

  componentDidMount() {
    window.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier(this.recaptcha,{
      'size': 'invisible','callback': function (response) {
        console.log("Magic",response)
      }
    })
  }

  signIn() {
    firebase.auth().signInWithPhoneNumber(phoneNumber,window.reCaptchaVerifier).catch((error) => {
      console.log(error)
    })
  }

  render() {
    return (
      <>
        <div ref={(ref) => this.recaptcha = ref} onClick={this.signIn}> Clik meeeee </div>
      </>
    )
  }
}

有效！在输入这个问题时，我得到了一个丑陋的解决方案。如果有人知道如何让它变得更好，或者可以解释为什么第一次尝试没有成功，那就太糟糕了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）