我尝试使用此代码进行 Firebase 电话号码身份验证:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Firebase Phone Number Auth
</title>
</head>
<body>
Updated
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script>
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign- in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
}); firebase.auth().signInWithPhoneNumber("+91XXXXXXXXXX", window.recaptchaVerifier)
.then((confirmationResult) => {
// At this point SMS is sent. Ask user for code.
alert('A confirmation message was just sent.');
var code = window.prompt('Please enter the 6 digit code');
return confirmationResult.confirm(code);
}).then((result) => {
console.log(result);
// User is now signed in and accessible via result.user.
}).catch((error) => {
// Error occurred.
});
</script>
</body>
</html>
但是它不起作用。 我是 Firebase 的真正新手。请有人帮忙。 (注:您也可以在本地主机上进行测试。) 代码已上线 https://GroupinGer.cu.ma/ph/ 另外，我想在另一个名为details.html的文件中显示用户数据(电话号码、UID等)。 我尝试了这段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logged in</title>
</head>
<body>
Your details are shown below.
<br>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script>
var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);
alert(credential);
alert('nope.');
</script>
</body>
</html>
也请您看一下。 再次非常感谢。
最佳答案
首先，您需要像这样初始化一个 recaptchaVerifier:
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-
in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
其次，您的代码有语法错误。请尝试以下操作:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firebase Phone Number Auth</title>
</head>
<body>
<form>
<input type="text" id="verificationcode" value="enter verification">
<input type="button" value="Submit" onclick="myFunction()">
</form>
<div id="recaptcha-container"></div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script type="text/javascript">
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script type="text/javascript">
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
firebase.auth().signInWithPhoneNumber("replace with your phone number with country code, start with +1 if US.", window.recaptchaVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
console.log(confirmationResult);
});
var myFunction = function() {
window.confirmationResult.confirm(document.getElementById("verificationcode").value)
.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
};
</script>
</body>
</html>
有关更多详细信息，您可以引用 firebase auth 文档中的电话身份验证部分。 https://firebase.google.com/docs/auth/web/phone-auth
关于javascript - Web 上的 Firebase 电话号码身份验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48179294/