Implementazione Verifica Email con Ionic e Parse Server

registrazione utente con verifica email introduzione questa sezione spiega come puoi creare un'app con registrazione utente e verifica email utilizzando le funzionalità principali di parse server tramite back4app ecco come apparirà in qualsiasi momento, puoi accedere al progetto ionic completo costruito con questo tutorial nel nostro repository github requisiti per completare questo quickstart, hai bisogno di visual studio code (o qualsiasi ide web tu preferisca) ionic framework un'app creata su back4app segui il tutorial nuova app parse per imparare a creare un'app parse su back4app seguito il tutorial registrazione utente per imparare a implementare la registrazione, il login e il logout con back4app 1 configurazione in questo tutorial, partiremo da dove ci siamo fermati nel precedente tutorial registrazione utente https //www back4app com/docs/ionic/ionic framework login screen 2 abilita la verifica dell'email vai alla tua app su sito web di back4app https //www back4app com/ e clicca su impostazioni del server impostazioni del server trova il blocco “email di verifica” e clicca su impostazioni impostazioni il blocco “email di verifica” appare così 3\ clicca su verifica email utente verifica email utente è proprio qui 4\ compila i campi vuoti e modifica quelli già compilati in base alle tue preferenze 5\ clicca sul salva salva pulsante 3 iscriviti i due attributi fondamentali della parseuser parseuser classe sono username e password c’è un terzo attributo speciale che dovresti impostare, ovvero l' email per implementare la registrazione con verifica email, utilizzerai lo stesso metodo della registrazione base dell'utente ma questa volta, invece di inviare l'utente alla pagina principale, gli chiederai di verificare la sua email per accedere una volta completata la creazione dell'utente, viene automaticamente aggiunto a parse dashboard dashboard e il suo emailverified attributo booleano è impostato su false a questo punto, l'utente non dovrebbe essere autorizzato ad accedere alla tua piattaforma una volta che verifica la sua email, cliccando sul link inviato alla sua casella di posta, il emailverified booleano sarà automaticamente impostato su true , consentendogli di accedere completamente alla tua piattaforma per far funzionare signupactivity signupactivity segui questi passaggi aggiungi le issigningup issigningup e email email variabili a login ts login ts per attivare e mantenere l'input email login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; fai in modo che il signup() signup() metodo invii l'indirizzo e mail alla funzione user signup() user signup() login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } ora, riflettiamo quelle modifiche nella vista login html login html aggiungendo ngif ngif per mostrare/nascondere gli elementi html ogni volta che l'utente si sta registrando ( issigningup è uguale a true ) o accedendo ( issigningup è uguale a false ) login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 accedi ora, aggiungiamo la emailverified verifica booleana prima di inviare l'utente alla home home pagina nota anche se l'utente accede quando viene chiamata la funzione parse user login() parse user login() non può accedere all'app fino a quando la verifica dell'e mail non è completata inoltre, poiché viene creato un oggetto session nel database quando si chiama login(), è importante chiamare parse user logout() parse user logout() ogni volta che un utente che non ha verificato la propria e mail cerca di accedere all'applicazione per non lasciare sessioni sessioni aperte ora, implementiamo la emailverified verifica per decidere se l'utente accede o riceve un avviso che dice che l'e mail deve essere verificata login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 testa la tua app testa la tua app eseguendo ionic serve ionic serve e creando un paio di utenti, prova anche a effettuare il login dopo la registrazione senza verificare l'email per vedere se l'errore viene effettivamente visualizzato accedi a sito web di back4app https //www back4app com/ trova la tua app e clicca su dashboard dashboard > core core > browser browser > utente utente per vedere gli utenti che hai creato! è fatto! a questo punto, puoi accedere, registrarti o disconnetterti dalla tua app utilizzando la verifica dell'email con le funzionalità principali di parse server tramite back4app!