Ajouter un écran de connexion avec Ionic et Back4App

comment ajouter un écran de connexion à votre projet ionic introduction dans cette section, vous apprendrez à créer une page, à mettre en œuvre l'inscription, la connexion et la déconnexion dans votre application ionic voici à quoi cela ressemblera prérequis pour compléter ce guide rapide, vous avez besoin de visual studio code (ou tout autre 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 à tout moment, vous pouvez accéder au projet ionic complet construit avec ce tutoriel sur notre dépôt github 1 installer le sdk parse en supposant que vous avez un projet ionic existant, la première chose que vous devez faire est d'installer le sdk parse vous pouvez le faire en exécutant 2 configurez les identifiants de l'application ouvrez votre app component ts app component ts , importez parse parse et initialisez sa connexion au serveur back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; si vous ne savez pas comment trouver vos clés, consultez le premier tutoriel ionic commencer à partir du modèle 3 créez la page de connexion maintenant, créons notre page de connexion heureusement, ionic fait tout pour nous tout ce que nous avons à faire est d'exécuter la commande suivante dans cette vue de page, nous devons ajouter des champs pour nom d'utilisateur nom d'utilisateur et mot de passe mot de passe et deux boutons, un pour s'inscrire et un autre pour se connecter login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 implémentons maintenant les méthodes signin() signin() et signup() signup() mentionnées dans notre login login vue login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } en savoir plus sur signup() signup() à documentation parse login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } en savoir plus sur parse user login() parse user login() à documentation parse voici à quoi cela devrait ressembler 4 implémenter la déconnexion passons à notre page d'accueil (ou la page vers laquelle l'utilisateur sera dirigé après s'être connecté) et implémentons la déconnexion tout d'abord, ouvrez home html et ajoutez un bouton pour cela login html 1 you are logged in! 2 3 4 5 log out 6 7 maintenant, implémentons le logout() logout() méthode et ajoutons également un toast toast si la demande échoue home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } en savoir plus sur parse user logout() parse user logout() à documentation de parse cela devrait ressembler à ceci 5 définir la page racine une fonctionnalité importante de parse parse est qu'il se souvient si un utilisateur est connecté ou non sur un appareil cela signifie que même si l'utilisateur ferme l'application, vous pouvez toujours restaurer sa session lorsque l'application est ouverte avec cela, nous pouvons déterminer si la page initiale de l'application sera notre loginpage loginpage ou homepage homepage pour ce faire, nous devons simplement appeler currentasync() currentasync() cela renverra l'utilisateur connecté ou null null app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) en savoir plus sur parse user currentasync() parse user currentasync() à documentation de parse enfin, tout est configuré ! à ce stade, il suffit d'exécuter ionic serve ionic serve et vous aurez des fonctionnalités de connexion, d'inscription et de déconnexion qui se souviennent également de l'utilisateur connecté jusqu'à ce qu'il/elle se déconnecte