Firebase手机登录,在哪里放置firebase recaptcha代码？

Question

编辑:

据我所知,这实际上并不适用于以这种方式做反应,因为它引用了一个具有recaptcha-container来自window对象的id的容器.原因是因为react使用bundle js脚本来加载其渲染数据.这就是为什么无论我把它放在哪里,我都会得到:reCAPTCHA container is either not found or already contains inner elements!

因此,如果我问如何在React中实现它而不是放置这些代码的位置可能会更好.如果有足够的人可以确认这一点,我也会编辑标题.

编辑结束

这可能是一个普遍的问题,但我还没有找到任何关于如何使用电话登录firebase和做出反应的信息.我不知道在哪里将这些代码放入我的反应项目中(在组件中,在根index.js内等...)如果我需要以不同的方式包含或提出这个问题,请告诉我,以便我可以更改它.就位置而言,这是我正在努力的代码:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': function() {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

我试着把它放在里面的一个组件中componentWillMount(),什么都没发生.我也尝试将它放在我的根index.js上面,reactDOM.render并得到类似的东西:

reCAPTCHA container is either not found or already contains inner elements!

再次请让我知道我可以添加到这个或如果我可以改善我的问题.

Answer 1

1. 它之所以不起作用,componentWillMount是因为你给出的容器ID还没有出现在dom中.(会装)
2. RecaptchaVerifier需要一个空div来进行身份验证.当你将函数放在render中时,当div不为空时会再次调用它.

现在来解决方案,

componentDidMount() {
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(this.recaptcha, {
    'size': 'normal',
    'callback': function (response) {
      // reCAPTCHA solved, allow signInWithPhoneNumber.
      // ...
    },
    'expired-callback': function () {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
 });
 window.recaptchaVerifier.render().then(function (widgetId) {
   window.recaptchaWidgetId = widgetId;
 });
}

在HTML中,

<div ref={(ref)=>this.recaptcha=ref}></div>

我们不提供recaptcha div的id,而是提供DOM元素的引用(就像React世界中的实践一样),您可以查看API以RecaptchaVerifier获取更多信息.