Email Verification in React Native with Parse

verifica dell'email dell'utente per react native introduzione avere un'app mobile con registrazione degli utenti senza restrizioni può causare problemi di sicurezza e spam nel server della tua applicazione la verifica dell'email può aiutarti a prevenire questa situazione, richiedendo che ogni utente registrato nella tua app abbia un indirizzo email valido in questa guida, imparerai come impostare la verifica dell'email nel tuo back4app back4app server, che gestirà automaticamente questa verifica imparerai anche come assicurarti che l'utente sia effettivamente verificato nella tua applicazione in qualsiasi momento, puoi accedere al progetto android completo costruito con questo tutorial nei nostri repository github repository di esempio kotlin repository di esempio java obiettivo costruire una funzionalità di accesso utente utilizzando l'accesso apple su parse per un'app react native prerequisiti per completare questo tutorial, avrai bisogno di un'app react native creata e collegata a back4app completa le guide precedenti in modo da avere una migliore comprensione di la classe parse user 1 configura la verifica dell'email ora configurerai il tuo parse server su back4app per richiedere la verifica dell'email dell'utente apri il tuo dashboard di back4app https //dashboard back4app com/apps e naviga nel pannello di controllo delle impostazioni del server trova la verifica email verifica email funzione e clicca su impostazioni impostazioni vai avanti e controlla il verifica le email degli utenti verifica le email degli utenti e impedisci l'accesso se l'email non è verificata impedisci l'accesso se l'email non è verificata caselle di controllo sentiti libero di aggiornare e personalizzare qualsiasi impostazione in questa schermata, come il corpo del messaggio dell'email di verifica e l'indirizzo di risposta dopo aver impostato questo, il tuo parse parse l'istanza del server gestirà ora automaticamente la verifica delle email degli utenti nota attivare impedisci l'accesso se l'email non è verificata impedisci l'accesso se l'email non è verificata non è obbligatorio, ma è buona pratica richiedere ai tuoi nuovi utenti di verificare prima di eseguire qualsiasi azione nella tua app 2 aggiorna il tuo componente userregistration devi apportare alcune modifiche al tuo userregistration userregistration componente per registrare correttamente gli utenti con verifica email prima di tutto, aggiungi un nuovo campo di input per il valore email del tuo utente aggiorna la funzione di registrazione utente nel userregistration js userregistration js ( userregistration tsx userregistration tsx se stai usando typescript) file in modo che ora stai impostando l'attributo email sui dati dell'utente 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 }; nota che poiché il tuo utente non dovrebbe accedere senza verificare la sua email, devi disconnetterlo dopo la registrazione per evitare errori nell'applicazione attuale sessione sessione testa la tua applicazione e ora dovresti vedere un messaggio come questo dopo aver registrato un nuovo utente dopo aver registrato con successo il tuo nuovo utente, parse invierà un'email contenente un link di verifica, che apparirà così 3 configura il tuo componente userlogin il tuo parse parse server ora blocca automaticamente i tentativi di accesso che non provengono da utenti verificati tuttavia, è anche una buona pratica assicurarsi che non ci sia modo per il tuo utente non verificato di accedere alla tua applicazione, quindi aggiungiamo una nuova condizione all'interno del tuo userlogin userlogin componente nel userlogin js userlogin js ( userlogin tsx userlogin tsx se stai usando typescript) file 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 testa la verifica dell'email procedi e testa la tua applicazione, cercando di accedere utilizzando l'utente non autorizzato creato in precedenza se non hai cliccato sul link di verifica nell'email, dovresti ricevere un messaggio di errore come questo dopo aver cliccato sul link di verifica, sarai in grado di accedere e verrai reindirizzato alla tua schermata principale puoi anche verificare il tuo utente aprendo il tuo utenti utenti nel tuo dashboard di back4app e modificando manualmente la colonna emailverificata emailverificata conclusione alla fine di questa guida, hai imparato come configurare il tuo parse parse server per richiedere la verifica dell'email dell'utente e anche per imporre questa restrizione all'interno della tua applicazione react native nella prossima guida, ti mostreremo come eseguire query utili sugli utenti