use*_*670 1 javascript firebase firebase-authentication
我尝试使用以下代码进行 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/ 另外，我想在另一个文件中显示用户数据（电话号码、UID 等）称为details.html。我尝试了这段代码：
<!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>
请也看一下。再次非常感谢。
小智 5
首先，您需要像这样初始化一个 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