Une des forces de Ionic réside dans les services qu’elle offre en plus du cadre. Cela inclut des services d'authentification des utilisateurs de votre application, des notifications push et des analyses. Dans cette série, nous allons en apprendre davantage sur ces trois services en créant une application utilisant chacun d'entre eux..
Le premier service que nous allons examiner est le service Auth. Cela nous permet d'implémenter l'authentification dans une application Ionic sans écrire une seule ligne de code back-end. Ou si vous avez déjà un système d'authentification existant, vous pouvez également l'utiliser. Le service prend en charge les méthodes d'authentification suivantes:
Mot de passe de l'email: l'utilisateur est enregistré en fournissant son email et son mot de passe.
Connexion sociale: l'utilisateur est enregistré en utilisant son profil de média social. Cela inclut actuellement Facebook, Google, Twitter, Instagram, LinkedIn et GitHub.
Douane: l'utilisateur est enregistré en utilisant un système d'authentification existant.
Dans ce tutoriel, nous allons seulement couvrir le courrier électronique / mot de passe et la connexion sociale avec Facebook.
Ce que vous allez créer
Avant de poursuivre, il est toujours bon d’avoir une idée générale de ce que nous allons créer et du déroulement de l’application. L'application aura les pages suivantes:
page d'accueil
page d'inscription
page utilisateur
Page d'accueil
La page d'accueil est la page par défaut de l'application où l'utilisateur peut se connecter avec son email / mot de passe ou son compte Facebook.
Lorsque l'utilisateur clique sur le Se connecter avec Facebook bouton, un écran semblable au suivant s’affiche, et une fois que l’utilisateur a accepté, il est connecté à l’application:
Page d'inscription
La page d'inscription est l'endroit où l'utilisateur peut s'inscrire en entrant son email et son mot de passe. La connexion à Facebook ne nécessite aucune inscription car les informations de l'utilisateur sont fournies par l'API de Facebook..
Page utilisateur
La dernière page est la page utilisateur, qui ne peut être vue que lorsque l'utilisateur est déjà connecté.
Démarrer une nouvelle application ionique
Maintenant que vous savez ce que nous faisons, commençons à construire notre application!
Premièrement, nous amorçons une nouvelle application Ionic en utilisant le modèle de démarrage vierge:
début ionique authApp vierge
Naviguer à l'intérieur du nouveau créé authApp dossier. Cela sert de répertoire racine du projet.
Pour vous configurer rapidement avec l'interface utilisateur de l'application, j'ai créé un référentiel GitHub dans lequel vous pouvez trouver les fichiers source de démarrage. Téléchargez le repo, naviguez à l'intérieur du entrée dossier et copiez le src dossier sur la racine du projet Ionic que vous venez de créer. Ceci contient les fichiers de modèle pour chacune des pages de l'application. Je vais vous expliquer plus en détail ce que chacun de ces fichiers fait dans une section ultérieure..
Servez le projet pour que vous puissiez voir immédiatement vos modifications lors du développement de l'application:
service ionique
Créer un compte ionique
Puisque nous allons utiliser le back-end d'Ionic pour gérer l'authentification des utilisateurs, nous avons besoin d'un moyen de gérer les utilisateurs de l'application. C’est là que le compte Ionic entre en jeu. Il vous permet de gérer vos applications Ionic et les services qu’elles utilisent. Cela inclut la gestion du service Auth. Vous pouvez créer un compte Ionic en visitant la page d'inscription Ionic.io.
Connecter l'application aux services ioniques
Ensuite, accédez au répertoire racine du projet et installez le plugin Ionic Cloud:
npm install @ ionic / cloud-angular --save
Ce plugin permettra à l'application d'interagir facilement avec les services Ionic.
Après cela, vous pouvez initialiser l'application pour utiliser les services Ionic:
ionique io init
Cela vous invite à vous connecter avec votre compte Ionic. Une fois que vous avez entré les informations de connexion correctes, l’outil de ligne de commande crée automatiquement un nouvel enregistrement d’application sous votre compte Ionic. Cet enregistrement est connecté à l'application que vous développez..
Vous pouvez vérifier que cette étape a bien fonctionné en ouvrant le .io-config.json fichier et le ionic.config.json déposer à la racine de votre projet. le app_id doit être identique à l'ID d'application attribué à la nouvelle application dans votre tableau de bord Ionic.
Page d'accueil
Naviguer à l'intérieur du src / pages / home répertoire pour voir les fichiers de la page d'accueil. Ouvrez le home.html fichier et vous verrez ce qui suit:
Ionic2 Auth EmailMot de passe
Cette page demandera à l'utilisateur de saisir son adresse électronique et son mot de passe ou de se connecter avec son compte Facebook. Si l'utilisateur n'a pas encore de compte, il peut cliquer sur le bouton d'inscription pour accéder à la page d'inscription. Nous reviendrons plus tard sur les détails de cette page pour passer à la partie connexion. Je vous le montre simplement pour que vous puissiez voir le code permettant d'accéder à la page d'inscription.
Ensuite, ouvrez le home.ts fichier. Pour l'instant, il ne contient que du code standard permettant de naviguer vers la page d'inscription et d'utilisateur. Plus tard, nous allons revenir à cette page pour ajouter le code permettant de connecter l’utilisateur.
Inscription de l'utilisateur
La mise en page de la page d'inscription se trouve dans src /pages / page d'abonnement / page d'abonnement.html. Regardez ce fichier et vous trouverez un formulaire simple avec un champ email et un champ mot de passe.
Ensuite, jetons un coup d'oeil à la inscription-page.ts fichier.
Décomposons cela. Premièrement, il importe les contrôleurs pour créer des alertes et des chargeurs:
importer AlertController, LoadingController de 'ionic-angular';
Ensuite, il importe les classes nécessaires à partir du client Cloud:
import Auth, UserDetails, IDetailedError de '@ ionic / cloud-angular';
le Auth service traitant de l'enregistrement des utilisateurs, de la connexion et de la déconnexion.
Détails utilisateur est le type utilisé pour définir les détails de l'utilisateur lors de l'enregistrement ou de la connexion d'un utilisateur.
IDetailedError est utilisé pour déterminer la raison exacte de l'erreur survenue. Cela nous permet de fournir des messages d'erreur conviviaux à l'utilisateur chaque fois qu'une erreur se produit..
Déclarez les variables à utiliser pour stocker le courrier électronique et le mot de passe saisis par l'utilisateur. Cela devrait être le même que le nom que vous avez donné à la valeur et ngModel attributs dans le fichier de mise en page.
classe d'exportation SignupPage email: string; mot de passe: chaîne; constructeur (authentification publique: authentification, alerte publique Ctrl: contrôleurContrôleur, chargement publique Ctrl: contrôleurContrôleur) register () …
Suivant est le registre méthode, qui est appelée lorsque le registre bouton est enfoncé. Codons cette méthode ensemble.
D'abord, il lance un chargeur, puis le ferme automatiquement au bout de cinq secondes (de sorte qu'en cas de problème, l'utilisateur ne se retrouve plus avec une animation de chargement qui tourne à l'infini)..
Ensuite, créons un objet pour stocker les détails de l'utilisateur:
let details: UserDetails = 'email': this.email, 'password': this.password;
Enfin, nous appellerons le s'inscrire() méthode de la Auth service et fournir les détails de l'utilisateur comme argument. Cela retourne une promesse, que nous déballons avec puis(). Dès qu'une réponse de succès est reçue du back-end, la première fonction à laquelle vous passez puis() sera exécuté; sinon, la seconde fonction sera exécutée.
Si une réponse d'erreur est reçue d'Ionic Auth, nous allons parcourir le tableau d'erreurs et créer un message d'erreur en fonction du type d'erreur reçu. Vous trouverez ici la liste des erreurs d'authentification pouvant survenir..
loader.dismiss (); var error_message = "; for (laissez e d'err.details) if (e === 'conflict_email') error_message + =" Cet email existe déjà. "; else message_erreur + =" Informations d'identification non valides. "; let alert = this.alertCtrl.create (title: message_erreur, sous-titre: 'Veuillez réessayer.', boutons: ['OK']); alert.present ();
Une fois que cela est fait, vous pouvez essayer l'application dans votre navigateur. L'identifiant email / mot de passe n'a pas de dépendance de plugin ou de matériel, vous devriez donc pouvoir le tester dans le navigateur. Vous pouvez ensuite trouver le nouvel utilisateur enregistré dans le répertoire. Auth onglet de votre tableau de bord de l'application ionique.
Configuration de l'application Facebook
L'étape suivante consiste à configurer l'application de sorte qu'elle puisse gérer les connexions Facebook natives. Tout d'abord, vous devez créer une application Facebook. Vous pouvez le faire en vous connectant à votre compte Facebook, puis en accédant au site de développement de Facebook. À partir de là, créez une nouvelle application:
Une fois l'application créée, cliquez sur le bouton Ajouter un produit lien sur la barre latérale et sélectionnez Identifiant Facebook. Cela ouvrira la Démarrage rapide écran par défaut. On n'a pas vraiment besoin de ça, alors vas-y et clique sur le bouton Réglages lien juste en dessous de la connexion Facebook. Cela devrait vous montrer l'écran suivant:
Ici, vous devez activer le Connexion OAuth du navigateur intégré réglage et ajouter https://api.ionic.io/auth/integrations/facebook comme valeur pour le URI de redirection OAuth valides. Sauvegarder les modifications une fois que c'est fait.
Ensuite, vous devez connecter Ionic Auth à l'application Facebook que vous venez de créer. Accédez à votre tableau de bord Ionic et sélectionnez l'application créée précédemment (voir la section «Connexion de l'application aux services ioniques»). Clique sur le Réglages onglet puis Auth utilisateur. Sous le Fournisseurs sociaux, clique sur le Installer bouton à côté de Facebook:
Entrez l'ID et le secret de l'application de l'application Facebook que vous avez créée précédemment et appuyez sur Activer.
Installer le plugin Facebook
Ensuite, installez le plugin Facebook pour Cordova. Contrairement à la plupart des plugins, cela nécessite que vous fournissiez un peu d'informations: l'identifiant et le nom de l'application Facebook. Vous pouvez simplement copier ces informations à partir du tableau de bord de l'application Facebook..
cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID = "VOTRE ID APP FACEBOOK" --variable APP_NAME = "VOTRE NOM D'APP FACEBOOK"
Configurer le service Facebook
Une fois cela fait, la dernière chose à faire est de revenir à votre projet, d’ouvrir le src / app / app.module.ts fichier et ajoutez le CloudSettings et CloudModule services de la nuage angulaire paquet:
import CloudSettings, CloudModule depuis '@ ionic / cloud-angular';
Déclarer le cloudSettings objet. Cela contient le app_id de votre application Ionic et des autorisations supplémentaires (portée) que vous souhaitez demander aux utilisateurs de votre application. Par défaut, cela demande déjà la email et public_profile.
Si vous souhaitez demander plus de données à vos utilisateurs, vous pouvez trouver une liste d'autorisations sur cette page: Autorisations de connexion à Facebook.
Ensuite, laissez Ionic savoir de la cloudSettings vous venez d'ajouter:
Plus tard, lorsque vous ajoutez d'autres fournisseurs sociaux à votre application, un processus similaire est suivi..
Connexion de l'utilisateur
Il est maintenant temps de revenir à la page d'accueil et d'apporter des modifications. Le modèle HTML contient déjà tout ce dont nous avons besoin. Il suffit donc de mettre à jour le script. Allez-y et ouvrez le src / pages / home / home.ts fichier. En haut du fichier, importez ce qui suit en plus de ce que vous avez déjà précédemment:
importer NavController, AlertController, LoadingController de 'ionic-angular'; import Auth, FacebookAuth, Utilisateur, IDetailedError de '@ ionic / cloud-angular'; importer UserPage de '… / user-page / user-page';
Dans le constructeur, déterminez si un utilisateur est actuellement connecté ou non. Si un utilisateur est déjà connecté, nous nous dirigeons automatiquement vers la page utilisateur..
export class HomePage // déclare des variables pour stocker l'utilisateur et le courrier électronique saisi par l'utilisateur email: string; mot de passe: chaîne; constructeur (public navCtrl: NavController, authentification publique: Auth, public facebookAuth: FacebookAuth, utilisateur public: User, public alertCtrl: AlertController, loadingCtrl: LoadingController) if (this.auth.isAuthenticated ()) this.navCtrl.push ( UserPage); …
Ensuite, quand le S'identifier bouton est enfoncé, on commence par afficher une animation de chargement.
login (type) let loader = this.loadingCtrl.create (content: "Connexion en cours" "); loader.present (); setTimeout (() => loader.dismiss ();, 5000);…
Comme vous l'avez vu dans le src / pages / home / home.html fichier plus tôt, une chaîne qui représente le bouton de connexion qui a été enfoncé (le bouton de connexion email / mot de passe ou le bouton de connexion Facebook) est transmise au s'identifier() une fonction. Cela nous permet de déterminer le code de connexion à exécuter. Si le type est 'fb', cela signifie que le bouton de connexion à Facebook a été enfoncé, nous appelons donc le s'identifier() méthode du FacebookAuth un service.
if (type == 'fb') this.facebookAuth.login (). then ((res) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => / / cache le chargeur et navigue vers la page utilisateur loader.dismiss (); let alert = this.alertCtrl.create (title: "Erreur de connexion à Facebook.", sous-titre: "Veuillez réessayer.", boutons: [ 'OK']); alert.present (););
Sinon, le bouton de connexion email / mot de passe a été enfoncé et nous devrions connecter l’utilisateur avec les détails saisis dans le formulaire de connexion..
Jetez un coup d’œil à la version finale du fichier home.ts pour voir à quoi cela devrait ressembler..
Page utilisateur
La dernière page est la page utilisateur.
La mise en page, en src / pages / user-page / user-page.html, affiche la photo de profil de l'utilisateur et son nom d'utilisateur. Si l'utilisateur s'est inscrit avec son adresse e-mail / mot de passe, le nom d'utilisateur sera l'adresse e-mail de l'utilisateur et la photo de profil sera la photo de profil par défaut attribuée par Ionic. D'autre part, si l'utilisateur s'est inscrit avec Facebook, sa photo de profil sera sa photo de profil Facebook et son nom d'utilisateur sera son nom complet..
Ensuite, regardez le utilisateur-page.ts fichier.
Sous le ionique-angulaire paquet, nous importons le Plate-forme service en dehors de NavController. Ceci est utilisé pour obtenir des informations sur le périphérique actuel. Il propose également des méthodes pour écouter les événements matériels, par exemple lorsque le bouton de retour du matériel dans Android est enfoncé..
importer NavController, Platform de 'ionic-angular';
Et pour le nuage angulaire forfait, nous avons besoin du Auth, FacebookAuth, et Utilisateur prestations de service:
import Auth, FacebookAuth, User de '@ ionic / cloud-angular';
Dans le constructeur de la classe, déterminez si l'utilisateur s'est connecté avec son utilisateur email / mot de passe ou son compte Facebook. Remplissez le Nom d'utilisateur et photo basé sur cela. Ensuite, en-dessous, attribuez une fonction à exécuter lorsque vous appuyez sur le bouton Retour du matériel. le registerBackButtonAction () accepte deux arguments: la fonction à exécuter et la priorité. S'il existe plusieurs applications dans l'application, seule la priorité la plus élevée sera exécutée. Mais comme nous n’avons besoin de cela que sur cet écran, nous venons de mettre en 1.
le logoutUser () Cette méthode contient la logique de déconnexion de l'utilisateur. La première chose à faire est de déterminer si un utilisateur est réellement connecté. Si un utilisateur est connecté, nous déterminons s'il est un utilisateur de Facebook ou un utilisateur de messagerie / mot de passe..
Cela peut être fait en vérifiant la email propriété sous la utilisateur.détails objet. Si cette propriété existe, cela signifie que l'utilisateur est un utilisateur de messagerie / mot de passe. Donc, s'il en va autrement, nous supposons qu'il s'agit d'un utilisateur de Facebook. Appeler le Connectez - Out() méthode en Auth et FacebookAuth efface l'utilisateur actuel de l'application.
logoutUser () if (this.auth.isAuthenticated ()) if (this.user.details.hasOwnProperty ('email')) this.auth.logout (); else this.facebookAuth.logout (); this.navCtrl.pop (); //Retournez à la page d'accueil
Exécution de l'application sur un appareil
Maintenant, nous pouvons essayer notre application! Tout d'abord, configurez la plate-forme et construisez l'apk de débogage:
Pour que la connexion à Facebook fonctionne, vous devez fournir le hachage du fichier apk à l'application Facebook. Vous pouvez déterminer le hachage en exécutant la commande suivante:
Ensuite, allez à la page des paramètres de base de votre application Facebook et cliquez sur le bouton Ajouter une plateforme bouton dans la partie inférieure de l'écran. Sélectionner Android comme la plate-forme. Vous verrez alors le formulaire suivant:
Remplissez le Nom du package Google Play et Clés de hachage. Vous pouvez mettre ce que vous voulez comme valeur pour le Nom du package Google Play tant qu’il respecte le même format que les applications de Google Play (par exemple,. com.ionicframework.authapp316678). Pour le Clés de hachage, vous devez mettre le hachage retourné plus tôt. N'oubliez pas de frapper Sauvegarder les modifications quand tu as fini.
Une fois cela fait, vous pouvez maintenant copier le android-debug.apk du plates-formes / android / build / output / apk dossier sur votre appareil, installez-le, puis exécutez.
Conclusion et prochaines étapes
C'est tout! Dans ce tutoriel, vous avez appris à utiliser le service Ionic Auth pour implémenter facilement l'authentification dans votre application Ionic. Nous avons utilisé l'authentification par e-mail / mot de passe et la connexion à Facebook dans ce tutoriel, mais il existe d'autres options, et il devrait être facile pour vous de les ajouter à votre application également..
Voici quelques étapes que vous pourriez essayer vous-même pour amener votre application au niveau supérieur..
Stocker des informations d'utilisateur supplémentaires-Outre l'adresse e-mail et le mot de passe, vous pouvez également stocker des informations supplémentaires pour vos utilisateurs..
Utilisez d'autres fournisseurs de connexion sociale-Comme mentionné au début de l'article, vous pouvez également implémenter la connexion sociale avec les services suivants: Google, Twitter, Instagram, LinkedIn et GitHub..
Ajouter une fonctionnalité de réinitialisation de mot de passe-Les réinitialisations de mot de passe peuvent être mises en œuvre à l'aide des formulaires de réinitialisation de mot de passe d'Ionic, ou vous pouvez créer votre propre.
Authentification personnalisée-Si vous avez déjà un serveur existant qui gère l'authentification d'utilisateur pour votre service, vous devrez peut-être implémenter une authentification personnalisée..
C'est tout pour le moment. Restez à l'écoute pour plus d'articles sur l'utilisation des services ioniques! Et en attendant, découvrez quelques-uns de nos autres articles sur le développement d'applications mobiles multiplates-formes.
Share
Accentsconagua
