Implementación de Ionic con verificación por correo electrónico

registro de usuario con verificación de correo electrónico introducción esta sección explica cómo puedes crear una aplicación con registro de usuario y verificación de correo electrónico utilizando las características principales de parse server a través de back4app así es como se verá en cualquier momento, puedes acceder al proyecto completo de ionic construido con este tutorial en nuestro repositorio de github requisitos previos para completar este inicio rápido, necesitas visual studio code (o cualquier ide web que prefieras) ionic framework una aplicación creada en back4app sigue el tutorial de nueva aplicación parse para aprender cómo crear una aplicación parse en back4app seguir el registro de usuario tutorial para aprender cómo implementar el registro, inicio de sesión y cierre de sesión con back4app 1 configuración en este tutorial, comenzaremos desde donde lo dejamos en el anterior registro de usuario https //www back4app com/docs/ionic/ionic framework login screen 2 habilitar la verificación de correo electrónico ve a tu aplicación en sitio web de back4app https //www back4app com/ y haz clic en configuración del servidor configuración del servidor encuentra el bloque “correos electrónicos de verificación” y haz clic en configuración configuración el bloque “correos electrónicos de verificación” se ve así 3\ haz clic en verificar correo electrónico del usuario verificar correo electrónico del usuario está justo aquí 4\ completa los campos vacíos y modifica los que ya han sido llenados según tus preferencias 5\ haz clic en el guardar guardar botón 3 registrarse los dos atributos fundamentales de parseuser parseuser clase son nombre de usuario y contraseña hay un tercer atributo especial que también debes establecer, es decir, el correo electrónico para implementar el registro con verificación de correo electrónico, utilizarás el mismo método que el registro básico de usuario pero esta vez, en lugar de enviar al usuario a la página de inicio, le pedirás que verifique su correo electrónico para iniciar sesión una vez que se complete la creación del usuario, se añadirá automáticamente a parse dashboard dashboard y su emailverified atributo booleano se establece como falso en este punto, no se debe permitir que el usuario inicie sesión en tu plataforma una vez que verifique su correo electrónico, haciendo clic en el enlace enviado a su buzón, el emailverified booleano se establecerá automáticamente en verdadero , permitiéndole acceder completamente a tu plataforma para hacer que signupactivity signupactivity funcione, sigue estos pasos agrega las issigningup issigningup y correo electrónico correo electrónico variables a login ts login ts para alternar y mantener la entrada de correo electrónico login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; haz que el signup() signup() método envíe la dirección de correo electrónico a la función 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 } ahora, reflejemos esos cambios en la vista login html login html añadiendo ngif ngif para mostrar/ocultar elementos html cada vez que el usuario se está registrando ( issigningup es igual a true ) o iniciando sesión ( issigningup es igual 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 iniciar sesión ahora, añadamos la emailverified verificación booleana antes de enviar al usuario a la página de inicio página de inicio nota aunque el usuario inicia sesión cuando se llama a la función parse user login() parse user login() , él/ella no puede acceder a la aplicación hasta que se complete la verificación del correo electrónico además, debido a que se crea un objeto de sesión en la base de datos al llamar a login(), es importante llamar a parse user logout() parse user logout() cada vez que un usuario que no ha verificado su correo electrónico intenta acceder a la aplicación para no dejar sesiones sesiones abiertas ahora, implementemos la emailverified verificación para decidir si el usuario inicia sesión o recibe una alerta diciendo que el correo electrónico debe ser verificado 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 prueba tu aplicación prueba tu aplicación ejecutando ionic serve ionic serve y creando un par de usuarios, también intenta iniciar sesión después de registrarte sin verificar el correo electrónico para ver si el error se muestra realmente inicia sesión en sitio web de back4app https //www back4app com/ encuentra tu aplicación y haz clic en tablero tablero > núcleo núcleo > navegador navegador > usuario usuario para ver los usuarios que has creado! ¡está hecho! en esta etapa, puedes iniciar sesión, registrarte o cerrar sesión en tu aplicación utilizando la verificación de correo electrónico con las funciones principales de parse server a través de back4app!