【发布时间】:2022-08-22 00:30:32
【问题描述】:
我需要在我当前的代码中添加必要的功能和确切的代码,以便用户在登录之前必须验证电子邮件。
现在,用户注册并自动访问应用程序及其用户面板的所有功能。我想添加必要的功能,以便当用户注册时,会显示一条消息告诉他:您必须验证您的电子邮件这样我们确保它是有效的电子邮件并避免 SPA 用户的注册。
我需要用户验证她的电子邮件才能登录,在她这样做之前,她可以像以前一样继续使用该应用程序,而无需登录。
你可以看到我做了几个测试,其他用户试图帮助我,但我们没有达到必要的,因为我需要将功能添加到我现在拥有的代码中,因为这是我知道继续构建我的应用程序的唯一方法。
该应用程序已在Firebase 注册,通过电子邮件和密码注册,我使用Formik 控制表单的状态并使用Yup 进行验证。
我已阅读有关 \"Send a verification message to a user\" 的 Firebase 文档,
这是 Firebase 功能:
```
const auth = getAuth();
sendEmailVerification(auth.currentUser)
.then(() => {
// Email verification sent!
// ...
})
```
我现在使用的注册系统是邮件和密码。用户输入电子邮件、密码、验证密码并自动在应用程序中注册。
我做了几个测试,试图将 sendEmailVerification 添加到我的注册系统中,现在我所取得的是确认电子邮件到达用户(SPA 文件夹),但确认电子邮件在用户已经注册并使用该应用程序后到达。
用户必须在收到并确认“确认电子邮件”后才能注册
我需要一个适合我当前应用程序的代码示例,我不知道更改所有代码,这是我的应用程序的基础。
我该怎么做才能正常工作并且验证电子邮件在用户注册之前到达? 我在我的代码中做错了什么?
您可以测试使用Expo 构建的项目:
exp://exp.host/@miguelitolaparra/restaurantes-5-estrellas?release-channel=default
这是我用来注册用户的方法:
const formik = useFormik({
initialValues: initialValues(),
validationSchema: validationSchema(), // validate the form data
validateOnChange: false,
onSubmit: async(formValue) => {
try { // send the data to Firebase
const auth = getAuth()
// sendEmailVerification(auth.currentUser)
await createUserWithEmailAndPassword(
auth,
formValue.email,
formValue.password
)
sendEmailVerification(auth.currentUser)
navigation.navigate(screen.account.account)
} catch (error) {
// We use Toast to display errors to the user
Toast.show({
type: \"error\",
position: \"bottom\",
text1: \"Failed to register, please try again later\",
})
}
},
})
我还向您展示了完整的文件:
import { useFormik } from \'formik\'
import { getAuth, createUserWithEmailAndPassword, sendEmailVerification } from \'firebase/auth\'
export function RegisterForm() {
const [showPassword, setShowPassword] = useState(false)
const [showRepeatPassword, setShowRepeatPassword] = useState(false)
const navigation = useNavigation()
const formik = useFormik({
initialValues: initialValues(),
validationSchema: validationSchema(), // validate the form data
validateOnChange: false,
onSubmit: async (formValue) => {
try { // send the data to Firebase
const auth = getAuth()
//sendEmailVerification(auth.currentUser)
await createUserWithEmailAndPassword(
auth,
formValue.email,
formValue.password
)
sendEmailVerification(auth.currentUser)
navigation.navigate(screen.account.account)
} catch (error) {
// We use Toast to display errors to the user
Toast.show({
type: \"error\",
position: \"bottom\",
text1: \"Error al registrarse, intentelo mas tarde\",
})
}
},
})
// function to hide or show the password
const showHidenPassword = () => setShowPassword((prevState) => !prevState)
const showHidenRepeatPassword = () => setShowRepeatPassword((prevState) => !prevState)
return (
// Registration form interface
<View>
<Input
placeholder=\"Correo electronico\"
keyboardType=\"email-address\"
containerStyle={AuthStyles.input}
rightIcon={
<Icon type=\"material-community\" name=\"at\" iconStyle={AuthStyles.icon} />
}
onChangeText={(text) => formik.setFieldValue(\"email\", text)}
errorMessage={formik.errors.email}
/>
<Input
placeholder=\"Contraseña\"
containerStyle={AuthStyles.input}
secureTextEntry={showPassword ? false : true}
rightIcon={
<Icon
type=\"material-community\"
name={showPassword ? \"eye-off-outline\" : \"eye-outline\"}
iconStyle={AuthStyles.icon}
onPress={showHidenPassword}
/>
}
onChangeText={(text) => formik.setFieldValue(\"password\", text)}
errorMessage={formik.errors.password}
/>
<Input
placeholder=\"Repetir contraseña\"
containerStyle={AuthStyles.input}
secureTextEntry={showRepeatPassword ? false : true}
rightIcon={
<Icon
type=\"material-community\"
name={showRepeatPassword ? \"eye-off-outline\" : \"eye-outline\"}
iconStyle={AuthStyles.icon}
onPress={showHidenRepeatPassword}
/>
}
onChangeText={(text) => formik.setFieldValue(\"repeatPassword\", text)}
errorMessage={formik.errors.repeatPassword}
/>
<Button
title=\"REGISTRATE\"
containerStyle={AuthStyles.btnContainer}
buttonStyle={AuthStyles.btn}
onPress={formik.handleSubmit} // send the form
loading={formik.isSubmitting}// show loading while doing user registration
/>
</View>
)
}
这是使用YupRegistreFormValidar.js 验证表单的文件
import * as Yup from \"yup\"
// object that has the elements of the form
export function initialValues() {
return {
email: \"\",
password: \"\",
repeatPassword: \"\",
}
}
// validate the form data whit Yup
export function validationSchema() {
return Yup.object({
email: Yup.string()
.email(\"El email no es correcto\")
.required(\"El email es obligatorio\"),
password: Yup.string().required(\"La contraseña es obligatoria\"),
repeatPassword: Yup.string() // validate that the passwords are the same
.required(\"La contraseña es obligatoria\")
.oneOf([Yup.ref(\"password\")], \"Las contraseñas tienen que ser iguales\"),
})
}
-
一些 sendmail 服务器支持
VRFY,它可以让您在不发送电子邮件的情况下检查电子邮件地址的有效性,但这并不是通用的。还要确认您可以发送任何电子邮件 -
\"除了向用户发送验证消息之外,还有其他方法可以验证电子邮件是否正确吗?\" 你能澄清一下你的想法吗?我明白你的意思不想做,但是怎么做做那么您希望电子邮件验证机制能够正常工作吗?
-
“确认邮件没有到达他的电子邮件”这很可能意味着它被标记为垃圾邮件,无论是在他们的系统上还是在它到达之前。让用户检查他们的垃圾邮件文件夹,并查看stackoverflow.com/questions/72922475/…
-
好的,只需尝试向自己发送任何电子邮件,以确保您在 Firebase 中启用了“电子邮件发送”
-
为了向用户发送电子邮件,该用户必须登录到 Firebase 身份验证。是否允许已登录的任何人使用您的应用和访问数据,这取决于您并且取决于每个应用(许多应用不需要电子邮件验证,因此 Firebase 不能在 API 上要求这样做)等级)。如果您只想让他们这样做后他们验证了他们的电子邮件地址,您可以在客户端代码、您拥有的任何服务器端代码以及数据库和存储的安全规则中检查他们的令牌/配置文件。
标签: javascript firebase react-native firebase-authentication