firebase - Firebase RecaptchaVerifier:未知元素
问题描述
我一直在尝试用我的 VueJS 项目实现 Firebase 电话号码身份验证。我已按要求设置了所有内容:firebase 项目设置、启用登录方法、所需的 HTML。每当应用程序尝试验证 firebase recaptcha 时,它都会不断抛出错误我在这里错过了什么?还需要做什么?
<template>
<div>
<h1>{{ state.title }}</h1>
<template v-if="'verify' === state.value">
<input type="number" v-model="verificationCode"/>
<button id="verify-button" :class="{ 'disabled' : !verificationCode }" @click="verifyCode">Verify</button>
</template>
<template v-else>
<vue-tel-input class="phone-input"
:disabled="loading"
:required="true"
v-model="phoneNumber"
@onInput="onNumberChange"></vue-tel-input>
<button id="signInButton" :class="{ 'disabled' : !isPhoneValid, 'allowed': isPhoneValid }"
@click="signInWithPhoneNumber">
Receive verification code
</button>
</template>
</div>
</template>
<script>
import 'vue-tel-input/dist/vue-tel-input.css'
import firebase from 'firebase'
export default {
name: 'login',
data () {
return {
state: {
value: 'login',
title: 'Login'
},
loading: false,
phoneNumber: '',
isPhoneValid: false,
verificationCode: 0,
recaptchaWidgetId: null,
recaptchaVerifier: null,
confirmationResult: null
}
},
mounted () {
const self = this
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('signInButton', {
'size': 'invisible',
'callback': function (response) {
console.log('solveRecaptcha', response)
self.signInWithPhoneNumber()
}
})
this.recaptchaVerifier.render()
.then(function (widgetId) {
self.recaptchaWidgetId = widgetId
})
},
methods: {
/**
* listen to change in phone number and check if input is valid
*
* @param number
* @param isValid
* @param country
*/
onNumberChange ({ number, isValid, country }) {
this.isPhoneValid = isValid
},
/**
* sign in into the application with phone number
*/
signInWithPhoneNumber () {
if (this.isPhoneValid) {
this.loading = true
const phoneNumber = this.phoneNumber
const appVerifier = this.recaptchaVerifier
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
this.confirmationResult = confirmationResult
this.loading = false
this.state = { value: 'verify', title: 'Verify your phone' }
})
.catch(function (error) {
console.log(error)
this.loading = false
})
}
}
}
}
</script>
<style scoped>
.phone-input {
width: 255px;
height: 45px;
padding: 5px 0;
margin: 10px auto;
border: 1px solid lightgray;
}
.phone-input:focus {
border: 1px solid lightgray;
}
button {
width: 215px;
height: 45px;
cursor: pointer;
text-transform: uppercase;
background-color: lightgray;
}
button.disabled {
cursor: not-allowed !important;
}
button.allowed {
color: white;
background-color: steelblue;
}
</style>
解决方案
推荐阅读
- database - 我安装了 Oracle db 19c 并以用户 sys 作为 sysdba 登录错误,“ORA-12154:TNS:无法解析指定的连接标识符”accured
- python - Couldn't integrate a CSS file into my project
- android - api 请求在 react-native 中不起作用
- c# - 尝试在 MVC 中上传图像文件时返回 null
- html - Jekyll 有没有办法为图像设置基本路径?
- javascript - 反应 setInterval 不更新 useState 钩子
- c# - 不再支持的设备 | 在 google playstore 上发布应用程序时
- android - Android房间数据库上的类型转换器错误
- python - 使用带有 Python Paramiko 的非默认 shell 在远程服务器上执行本地脚本
- python - Opencv没有在终端中为python安装