Implémentation de la vérification d'email dans React Native

vérification de l'email utilisateur pour react native introduction avoir une application mobile avec une inscription utilisateur sans restriction peut causer des problèmes de sécurité et du spam sur votre serveur d'application la vérification de l'email peut vous aider à prévenir cette situation, en exigeant que tout utilisateur enregistré sur votre application dispose d'une adresse email valide dans ce guide, vous apprendrez comment configurer la vérification de l'email dans votre back4app back4app , qui gérera automatiquement cette vérification vous apprendrez également comment vous assurer dans votre application que l'utilisateur est effectivement vérifié à tout moment, vous pouvez accéder au projet android complet construit avec ce tutoriel sur nos dépôts github https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java objectif construire une fonctionnalité de connexion utilisateur utilisant l'authentification apple sur parse pour une application react native prérequis pour compléter ce tutoriel, vous aurez besoin de une application react native créée et https //www back4app com/docs/react native/parse sdk/react native sdk complétez les guides précédents afin d'avoir une meilleure compréhension de https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 configurer la vérification par email vous allez maintenant configurer votre serveur parse sur back4app pour exiger la vérification par email des utilisateurs ouvrez votre https //dashboard back4app com/apps et naviguez vers votre panneau de contrôle des paramètres du serveur trouvez la fonctionnalité emails de vérification emails de vérification et cliquez sur paramètres paramètres allez y et vérifiez le vérifier les e mails des utilisateurs vérifier les e mails des utilisateurs et empêcher la connexion si l'e mail n'est pas vérifié empêcher la connexion si l'e mail n'est pas vérifié cases à cocher n'hésitez pas à mettre à jour et à personnaliser les paramètres de cet écran, comme le corps du message de l'e mail de vérification et l'adresse de réponse après avoir configuré cela, votre parse parse instance de serveur gérera désormais automatiquement la vérification des e mails des utilisateurs remarque activer empêcher la connexion si l'e mail n'est pas vérifié empêcher la connexion si l'e mail n'est pas vérifié n'est pas obligatoire, mais il est bon de demander à vos nouveaux utilisateurs de vérifier avant d'effectuer toute action dans votre application 2 mettez à jour votre composant userregistration vous devez apporter quelques modifications à votre userregistration userregistration composant pour inscrire correctement les utilisateurs avec vérification par e mail tout d'abord, ajoutez un nouveau champ de saisie pour la valeur de l'e mail de votre utilisateur mettez à jour la fonction d'enregistrement de l'utilisateur dans le userregistration js userregistration js ( userregistration tsx userregistration tsx si vous utilisez typescript) fichier afin que vous définissiez maintenant l'attribut e mail sur les données utilisateur 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 }; notez que puisque votre utilisateur n'est pas censé se connecter sans vérifier son email, vous devez le déconnecter après l'inscription pour éviter toute erreur dans l'application actuelle session session testez votre application et maintenant vous devriez voir un message comme celui ci après l'inscription d'un nouvel utilisateur après avoir enregistré avec succès votre nouvel utilisateur, parse enverra un e mail contenant un lien de vérification, ressemblant à ceci 3 configurez votre composant userlogin votre parse parse le serveur bloque désormais automatiquement les tentatives de connexion qui ne proviennent pas d'utilisateurs vérifiés cependant, il est également bon de s'assurer qu'il n'y a aucun moyen pour votre utilisateur non vérifié d'accéder à votre application, alors ajoutons une nouvelle condition à l'intérieur de votre userlogin userlogin composant dans le userlogin js userlogin js ( userlogin tsx userlogin tsx si vous utilisez typescript) fichier 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 testez la vérification de l'email allez y et testez votre application, en essayant de vous connecter en utilisant l'utilisateur non autorisé créé précédemment si vous n'avez pas cliqué sur le lien de vérification dans l'email, vous devriez recevoir un message d'erreur comme celui ci après avoir cliqué sur le lien de vérification, vous pourrez vous connecter et être redirigé vers votre écran d'accueil vous pouvez également vérifier votre utilisateur en ouvrant votre utilisateurs utilisateurs tableau dans votre tableau de bord back4app et en modifiant manuellement la emailvérifié emailvérifié colonne conclusion à la fin de ce guide, vous avez appris comment configurer votre parse parse serveur pour exiger la vérification de l'email de l'utilisateur et également pour appliquer cette restriction dans votre application react native dans le prochain guide, nous vous montrerons comment effectuer des requêtes utilisateur utiles