他们的任何功能signupwithphonenumber在firebase就像signupwiththeailandpa

Question

所以，我是一个新手在firebase和团队项目工作。客户希望我们做的是让用户用电话号码和otp登录。首先，我设法使用如下代码登录用户

import React, { useState } from "react";
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { auth } from "../../firebase/config";
const SignInWithNumber = () => {
const [phone, setphone] = useState();
const [otp, setotp] = useState();
const handleRecaptcha = () => {
window.recaptchaVerifier = new RecaptchaVerifier(
"sign-in-button",
{
size: "invisible",
callback: (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
},
},
auth
);
};
const handleSubmitNumber = (e) => {
e.preventDefault();
if (phone >= 10) {
console.log(phone);
handleRecaptcha();
const phoneNumber = "+91" + phone;
const appVerifier = window.recaptchaVerifier;
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
window.confirmationResult = confirmationResult;
// ...
console.log("otp sent");
})
.catch((error) => {
// Error; SMS not sent
// ...
console.log(error + "SMS not sent");
});
}
};
const handleSubmitOtp = (e) => {
e.preventDefault();
const code = otp;
const x = window.confirmationResult;
x.confirm(code)
.then((result) => {
// User signed in successfully.
const user = result.user;
console.log(user);
// ...
})
.catch((error) => {
// User couldn't sign in (bad verification code?)
// ...
console.log(error);
});
};
const handleChange = (e) => {
e.preventDefault();
const { name, value } = e.target;
switch (name) {
case "phone":
setphone(value);
break;
case "otp":
setotp(value);
break;
default:
break;
}
};
return (
<div>
<h2>LogIn</h2>
<form onSubmit={handleSubmitNumber}>
<div id="sign-in-button"></div>
<input type="number" name="phone" required onChange={handleChange} />
<button type="submit">Submit</button>
</form>
<h2>Submit OTP</h2>
<form onSubmit={handleSubmitOtp}>
<input type="number" name="otp" required onChange={handleChange} />
<button type="submit">Submit</button>
</form>
</div>
);
};
export default SignInWithNumber;

现在，我能够登录用户并在控制台中获取其uid，但我还想用他的电话号码+otp注册用户，并获得他的凭据，如姓名，地址等。这可能是一个愚蠢的问题，但我找不到任何解决方案。提前感谢:)

Answer 1

使用基于手机的身份验证时没有任何注册方法。如果用户不存在，则创建该帐户(技术上是注册)，否则用户将登录到现有帐户。

但是，您可以在认证后检查isNewUser属性，以检查用户是否首次登录。

Checkout Check for isNewUser with Firebase email link authentication使用模块化JS SDK

x.confirm(code)
.then((result) => {
// User signed in successfully.
const { isNewUser } = getAdditionalUserInfo(result)

if (isNewUser) {
// New user - sign up
} else {
// Existing user - log in
}
})

Answer 2

首先，这个问题并不愚蠢。

其次，作为解决方案，在使用电话号码成功登录后，假设刚刚创建了帐户(新用户)，现在可以显示一个表单来获取用户的姓名和其他详细信息。

在提交此表单时，使用updateProfile将名称保存到firebase身份验证用户对象。然后将其他数据保存到使用用户uid作为文档id的Firestore文档中，最好保存在用户集合中。

在页面加载时，您可以检查用户是否已登录，如果为true，检查用户是否在Firestore中有数据，如果为false，向用户显示上述表单，否则，继续使用应用程序。