firebase-authentication - Next js Firebase Auth 电话号码不可见recaptcha
问题描述
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>
</>
)
}
}
作品!我在输入这个问题时得到了一个丑陋的解决方案。如果有人知道如何让它变得更好,或者可以解释为什么第一次尝试没有奏效,那就太棒了。
解决方案
推荐阅读
- node.js - Cloudinary:process.versions.node 未定义
- mysql - MySQL 如果不存在则创建表并仅在创建表时插入记录
- angularjs - Can't access $scope variables after changing view with $location.path
- objective-c - Block retaining self for CGFloat ivars?
- python - Jupyter Notebook Python 不会显示输出图表
- assembly - Does the LSL instruction ever set the oVerflow flag in an ARM processor?
- ios - How to check and delete duplicates values in TableView?
- oracle - 如何使用 Oracle 的选择查询格式化日期字段
- javascript - 使用 while 和 continue 时陷入无限循环
- c++11 - 窗户插座。FD_ISSET 总是返回 0