Mettre en œuvre la vérification e-mail avec Parse et Ionic

inscription des utilisateurs avec vérification par e mail introduction cette section explique comment vous pouvez créer une application avec inscription des utilisateurs et vérification par e mail en utilisant les fonctionnalités principales de parse server via back4app voici à quoi cela ressemblera à tout moment, vous pouvez accéder au projet ionic complet construit avec ce tutoriel sur notre dépôt github prérequis pour compléter ce démarrage rapide, vous avez besoin de visual studio code (ou tout ide web que vous aimez) ionic framework une application créée sur back4app suivez le tutoriel de nouvelle application parse pour apprendre à créer une application parse sur back4app avez suivi le tutoriel d'inscription des utilisateurs pour apprendre à mettre en œuvre l'inscription, la connexion et la déconnexion avec back4app 1 configuration dans ce tutoriel, nous commencerons là où nous nous sommes arrêtés dans le précédent tutoriel d'inscription des utilisateurs https //www back4app com/docs/ionic/ionic framework login screen 2 activer la vérification par e mail allez sur votre application à site web back4app https //www back4app com/ et cliquez sur paramètres du serveur paramètres du serveur trouvez le bloc “e mails de vérification” et cliquez sur paramètres paramètres le bloc “e mails de vérification” ressemble à ceci 3\ cliquez sur vérifier l'e mail de l'utilisateur vérifier l'e mail de l'utilisateur c'est juste ici 4\ remplissez les champs vides et modifiez ceux qui ont déjà été remplis en fonction de vos préférences 5\ cliquez sur le enregistrer enregistrer bouton 3 s'inscrire les deux attributs fondamentaux de parseuser parseuser classe sont nom d'utilisateur et mot de passe il y a un troisième attribut spécial que vous devez également définir, c'est à dire l' email pour mettre en œuvre l'inscription avec vérification par e mail, vous utiliserez la même méthode que l'enregistrement de base des utilisateurs mais cette fois, au lieu d'envoyer l'utilisateur à la page d'accueil, vous lui demanderez de vérifier son e mail pour se connecter une fois la création de l'utilisateur terminée, il est automatiquement ajouté à parse dashboard dashboard et son emailverified attribut booléen est défini comme false à ce stade, l'utilisateur ne devrait pas être autorisé à se connecter à votre plateforme une fois qu'il/elle vérifie son e mail, en cliquant sur le lien envoyé à sa boîte aux lettres, le emailverified booléen sera automatiquement défini sur true , lui permettant d'accéder entièrement à votre plateforme pour faire fonctionner signupactivity signupactivity suivez ces étapes ajoutez les issigningup issigningup et email email variables à login ts login ts pour basculer et maintenir l'entrée d'e mail login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; faites en sorte que la signup() signup() méthode envoie l'adresse e mail à la fonction 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 } maintenant, réfléchissons ces changements dans la vue login html login html en ajoutant ngif ngif pour afficher/masquer les éléments html chaque fois que l'utilisateur s'inscrit ( issigningup est égal à true ) ou se connecte ( issigningup est égal à 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 connexion maintenant, ajoutons la vérification booléenne emailverified avant d'envoyer l'utilisateur à la accueil accueil page remarque bien que l'utilisateur se connecte lorsque la fonction parse user login() parse user login() est appelée, il/elle ne peut pas accéder à l'application tant que la vérification de l'e mail n'est pas effectuée de plus, parce qu'un objet session est créé dans la base de données lors de l'appel de login(), il est important d'appeler parse user logout() parse user logout() chaque fois qu'un utilisateur qui n'a pas vérifié son e mail essaie d'accéder à l'application afin de ne pas laisser des sessions sessions ouvertes maintenant, implémentons la vérification emailverified pour décider si l'utilisateur se connecte ou reçoit une alerte disant que l'e mail doit être vérifié 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 testez votre application testez votre application en exécutant ionic serve ionic serve et en créant quelques utilisateurs, essayez également de vous connecter après vous être inscrit sans vérifier l'email pour voir si l'erreur est effectivement affichée connectez vous à back4app website https //www back4app com/ trouvez votre application et cliquez sur tableau de bord tableau de bord > noyau noyau > navigateur navigateur > utilisateur utilisateur pour voir les utilisateurs que vous avez créés ! c'est fait ! à ce stade, vous pouvez vous connecter, vous inscrire ou vous déconnecter de votre application en utilisant la vérification par email avec les fonctionnalités de base de parse server via back4app !