React Native 邮箱验证的 Parse SDK 配置指南

react native 用户邮箱验证 介绍 拥有一个允许用户无限制注册的移动应用可能会导致安全问题和垃圾邮件在您的应用服务器中。邮箱验证可以帮助您防止这种情况，要求您应用中注册的任何用户都必须拥有一个有效的邮箱地址。 在本指南中，您将学习如何在您的 back4app back4app 服务器上设置邮箱验证，该服务器将自动处理此验证。您还将学习如何确保您的应用程序中的用户确实已通过验证。 您可以随时访问我们 github 仓库中构建的完整 android 项目 kotlin 示例仓库 java 示例仓库 目标 使用 apple 登录在 parse 上为 react native 应用构建用户登录功能。 先决条件 要完成本教程，您需要： 一个创建的 react native 应用并且 连接到 back4app 完成之前的指南，以便更好地理解 parse 用户类 1 配置电子邮件验证 您现在将配置 back4app 上的 parse 服务器以要求用户电子邮件验证。打开您的 back4app 控制面板 https //dashboard back4app com/apps ，并导航到您的服务器设置控制面板。找到 验证电子邮件 验证电子邮件 功能并点击 设置 设置 。 继续检查 验证用户电子邮件 验证用户电子邮件 和 如果电子邮件未验证则阻止登录 如果电子邮件未验证则阻止登录 复选框。随时可以更新和自定义此屏幕中的任何设置，例如验证电子邮件的消息正文和回复地址。 设置完成后，您的 parse parse 服务器实例将自动处理用户电子邮件验证。 注意： 启用 如果电子邮件未验证则阻止登录 如果电子邮件未验证则阻止登录 不是必需的，但要求新用户在应用中执行任何操作之前进行验证是一个好习惯。 2 更新您的用户注册组件 您需要在您的 用户注册 用户注册 组件中进行一些更改，以正确地通过电子邮件验证注册用户。首先，为用户的电子邮件值添加一个新的输入字段。更新 userregistration js userregistration js 中的用户注册函数 ( userregistration tsx userregistration tsx 如果您使用的是 typescript) 文件，这样您就可以在用户数据上设置电子邮件属性 userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 请注意，由于您的用户在未验证其电子邮件的情况下不应登录，因此您需要在注册后将其注销，以避免当前应用程序中的任何错误。 会话 会话 。测试您的应用程序，现在在注册新用户后，您应该看到类似这样的消息： 在成功注册您的新用户后，parse 将发送一封包含验证链接的电子邮件，内容如下： 3 设置您的 userlogin 组件 您的 parse parse 服务器现在自动阻止未经过验证的用户的登录尝试。然而，确保未验证用户无法访问您的应用程序也是一个好习惯，因此让我们在您的 userlogin userlogin 组件中添加一个新条件，位于 userlogin js userlogin js （如果您使用 typescript，则为）文件中 userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 测试电子邮件验证 继续测试您的应用程序，尝试使用之前创建的未授权用户登录。如果您没有点击电子邮件中的验证链接，您应该会收到如下错误消息： 点击验证链接后，您将能够登录并被重定向到您的主屏幕。您还可以通过打开您的 用户 用户 表格，在您的 back4app 控制面板中手动编辑 emailverified emailverified 列 结论 在本指南的最后，您学习了如何设置您的 parse parse 服务器以要求用户电子邮件验证，并在您的 react native 应用程序中强制执行此限制。在下一个指南中，我们将向您展示如何执行有用的用户查询。