Implementierung von E-Mail-Verifizierung in React Native

benutzere mail verifizierung für react native einführung eine mobile app mit uneingeschränkter benutzerregistrierung kann sicherheitsprobleme und spam auf ihrem anwendungsserver verursachen die e mail verifizierung kann ihnen helfen, diese situation zu verhindern, indem sie verlangt, dass jeder registrierte benutzer in ihrer app eine gültige e mail adresse hat in diesem leitfaden erfahren sie, wie sie die e mail verifizierung in ihrem back4app back4app server einrichten, der diese verifizierung automatisch verarbeitet sie werden auch lernen, wie sie in ihrer anwendung sicherstellen können, dass der benutzer tatsächlich verifiziert ist jederzeit können sie auf das vollständige android projekt zugreifen, das mit diesem tutorial in unseren github repositories erstellt wurde kotlin beispiel repository java beispiel repository ziel eine benutzeranmeldefunktion mit apple sign in auf parse für eine react native app zu erstellen voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react native app, die erstellt und mit back4app verbunden ist vervollständigen sie die vorherigen anleitungen, damit sie ein besseres verständnis von der parse user klasse 1 e mail verifizierung konfigurieren sie werden jetzt ihren parse server auf back4app so konfigurieren, dass eine e mail verifizierung für benutzer erforderlich ist öffnen sie ihr back4app dashboard https //dashboard back4app com/apps und navigieren sie zu ihrem servereinstellungs panel finden sie die verifizierungs e mails verifizierungs e mails funktion und klicken sie auf einstellungen einstellungen gehen sie voran und überprüfen sie die benutzer e mails überprüfen benutzer e mails überprüfen und anmeldung verhindern, wenn die e mail nicht verifiziert ist anmeldung verhindern, wenn die e mail nicht verifiziert ist fühlen sie sich frei, alle einstellungen auf diesem bildschirm zu aktualisieren und anzupassen, wie z b den text der bestätigungs e mail und die antwortadresse nachdem sie dies eingerichtet haben, wird ihre parse parse serverinstanz nun automatisch die benutzer e mail verifizierung durchführen hinweis die aktivierung von anmeldung verhindern, wenn die e mail nicht verifiziert ist anmeldung verhindern, wenn die e mail nicht verifiziert ist ist nicht erforderlich, aber es ist eine gute praxis, von ihren neuen benutzern zu verlangen, dass sie sich verifizieren, bevor sie eine aktion in ihrer app durchführen 2 aktualisieren sie ihre userregistration komponente sie müssen einige änderungen an ihrer userregistration userregistration komponente vornehmen, um benutzer korrekt mit e mail verifizierung anzumelden fügen sie zunächst ein neues eingabefeld für den e mail wert ihres benutzers hinzu aktualisieren sie die benutzerregistrierungsfunktion in der userregistration js userregistration js ( userregistration tsx userregistration tsx wenn sie typescript verwenden) datei, sodass sie jetzt das e mail attribut in den benutzerdaten festlegen 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 }; beachten sie, dass ihr benutzer sich nicht anmelden soll, ohne seine e mail zu verifizieren sie müssen ihn nach der registrierung abmelden, um fehler in der aktuellen anwendung zu vermeiden sitzung sitzung testen sie ihre anwendung und jetzt sollten sie eine nachricht wie diese sehen, nachdem sie einen neuen benutzer registriert haben nachdem sie ihren neuen benutzer erfolgreich registriert haben, sendet parse eine e mail mit einem bestätigungslink, der so aussieht 3 richten sie ihre userlogin komponente ein ihr parse parse server blockiert jetzt automatisch anmeldeversuche von nicht verifizierten benutzern es ist jedoch auch eine gute praxis sicherzustellen, dass es keinen weg für ihren nicht verifizierten benutzer gibt, auf ihre anwendung zuzugreifen lassen sie uns also eine neue bedingung in ihre userlogin userlogin komponente in der userlogin js userlogin js ( userlogin tsx userlogin tsx wenn sie typescript verwenden) datei 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 testen sie die e mail verifizierung gehen sie voran und testen sie ihre anwendung, indem sie versuchen, sich mit dem zuvor erstellten nicht autorisierten benutzer anzumelden wenn sie den bestätigungslink in der e mail nicht angeklickt haben, sollten sie eine fehlermeldung wie diese erhalten nachdem sie auf den bestätigungslink geklickt haben, können sie sich anmelden und werden zu ihrem startbildschirm weitergeleitet sie können auch ihren benutzer verifizieren, indem sie ihre benutzer benutzer tabelle in ihrem back4app dashboard öffnen und die emailverified emailverified spalte manuell bearbeiten fazit am ende dieses leitfadens haben sie gelernt, wie sie ihren parse parse server so einrichten, dass eine e mail bestätigung des benutzers erforderlich ist, und diese einschränkung auch in ihrer react native anwendung durchsetzen im nächsten leitfaden zeigen wir ihnen, wie sie nützliche benutzerabfragen durchführen