Share
Firebase est une plate-forme de base de données mobile multi-plateformes en temps réel qui permet aux codeurs de se concentrer sur ce qu'ils font le mieux en codant leurs applications, sans avoir à se soucier des préoccupations de DevOps telles que l'infrastructure de serveur et la modélisation de base de données. Avec le soutien de Google, Firebase simplifie le traitement des bases de données temps réel, l’authentification des utilisateurs et l’utilisation des flux de travail de synchronisation hors connexion..
Bien qu'il existe de nombreuses solutions pour BaaS, telles que Realm (consultez mon tutoriel Realm.io ici sur Envato Tuts +), Firebase ne nécessite aucune configuration préalable du serveur d'infrastructure, car la plate-forme prend en charge l'hébergement et expose en retour un SDK..
Au-delà d'une base de données en temps réel NoSQL, avec Firebase, vous obtenez des analyses, des rapports d'incidents, l'authentification des utilisateurs, la messagerie en nuage, des notifications push, etc. Les coûts associés évoluent également avec votre projet: au fur et à mesure que vous avancez, vous passez d'un modèle freemium à un modèle à l'utilisation..
Dans ce tutoriel, je vais vous montrer comment configurer Firebase sur iOS à l'aide de CocoaPods et comment authentifier les utilisateurs à l'aide de deux méthodes courantes: email et mot de passe ou via le téléphone avec SMS..
Pour en savoir plus sur Firebase pour Android, consultez certains de nos autres tutoriels ici sur Envato Tuts.+.
Vous aurez besoin des éléments suivants:
Ce tutoriel suppose que vous ayez une connaissance pratique d’iOS et de Swift, ainsi qu’une expérience de base de CocoaPods. Si vous souhaitez en savoir plus, consultez nos didacticiels Swift et CocoaPods..
À la fin de ce didacticiel, vous aurez démarré avec une application simple, optimisée par Firebase, qui utilise le SDK Firebase pour authentifier les utilisateurs, à l'aide d'un email et d'un mot de passe, ainsi que par SMS. En chemin, vous apprendrez:
Dans les prochains tutoriels de cette série, vous apprendrez à utiliser d'autres aspects de la plate-forme Firebase, tels que l'utilisation de la base de données en temps réel pour stocker les données d'applications..
Dans cette série, nous allons créer une application appelée "FirebaseDo". Commençons par cloner le projet depuis GitHub:
$ [email protected]: tutsplus / démarrer-avec-firebase-authentication-for-ios.git… $ git fetch --all --tags… $ balises de contrôle git / START
Ensuite, nous allons initialiser le projet pour générer un nouveau PodFile, comme suit:
pod init
Vous devriez voir un nouveau fichier nommé Podfile situé dans le répertoire racine de votre projet. Ce fichier définit essentiellement les bibliothèques que nous souhaitons utiliser dans notre projet. Ouvrez-le et ajoutez les lignes de déclaration Firebase suivantes:
pod 'FirebaseUI' Pod 'Firebase'
Enregistrez puis entrez les informations suivantes dans votre terminal pour créer les modules:
installation de pod
Nous allons utiliser FirebaseDo.xcworkspace au lieu de FirebaseDo.xccodeproj, nous permettant de travailler avec les bibliothèques de dépendances que nous avons configurées sur CocoaPods, ouvrez l’espace de travail, puis passez à votre navigateur..
Allez maintenant dans le panneau Firebase et créez un nouveau projet:
Ensuite, cliquez sur Ajouter Firebase à votre application iOS, qui vous guidera pas à pas tout au long du processus d’enregistrement de votre application sur Firebase.
À un moment donné, il vous demandera d’ajouter le GoogleService-info.plist déposer dans votre projet Xcode:
Vous avez déjà ajouté les bibliothèques via CocoaPods, vous pouvez donc ignorer les instructions restantes et revenir à la console Firebase..
L'authentification Firebase fournit des services d'arrière-plan, des kits de développement logiciel (SDK) faciles à utiliser et des bibliothèques d'interface utilisateur prêtes à l'emploi pour authentifier les utilisateurs auprès de votre application. Il prend en charge l'authentification à l'aide de mots de passe, de numéros de téléphone, de fournisseurs d'identité fédérés populaires tels que Google, Facebook et Twitter, etc. (source: Authentification Firebase)
Avant de montrer comment utiliser FirebaseUI pour automatiser l'authentification de vos utilisateurs, nous allons d'abord explorer les méthodes de SDK exposées par Firebase dans le cadre de l'API de référence du framework FirebaseAuth pour gérer manuellement la création et la connexion des utilisateurs..
Pour créer un nouvel utilisateur, vous utiliseriez le Auth.auth (). CreateUser () bloc de méthode, comme suit:
Auth.auth (). CreateUser (withEmail: email, mot de passe: mot de passe) (utilisateur, erreur) dans //…
En supposant que Erreurobjet est nil, l'utilisateur sera non seulement inscrit avec succès mais sera également connecté. Pour vous connecter explicitement à un utilisateur existant, vous devez appeler:
Auth.auth (). Connexion (avec Email: email, mot de passe: mot de passe) (utilisateur, erreur) dans //…
Déconnecter un utilisateur est aussi simple que d'appeler essayer! FirebaseAuth.signOut ():
Accentsconagua
do try firebaseAuth.signOut () catch laisse signOutError en tant que NSError print ("Erreur de déconnexion:% @", signOutError)Nous voulons pouvoir gérer diverses erreurs potentielles avec élégance, au cas où les appels d’authentification s’égareraient et lorsque Erreur l'objet n'est pas nul (ou inversement, le utilisateur objet est nil), une erreur est survenue. Consultez la documentation de Firebase pour obtenir une liste de tous les codes d'erreur courants. Dans notre code, nous ne traiterons que quelques erreurs générales.
L'état d'authentification change tout au long du cycle de vie de l'application. Il est donc important de pouvoir détecter le moment où un utilisateur s'est authentifié ou une session expirée pour s'assurer que les utilisateurs n'ont pas accès à des éléments de votre application auxquels ils ne devraient pas avoir accès..
En créant un gestionnaire, .addStateDidChangeListener, vous êtes maintenant en mesure de détecter l'état dans lequel se trouve l'utilisateur et de déclencher un appel spécifique, basé sur celui-ci..
handle = Auth.auth (). addStateDidChangeListener (auth, utilisateur) dans //…
Une fois que l'utilisateur s'est authentifié, vous pouvez accéder au utilisateur objecter et obtenir des informations sur l'utilisateur telles que son identifiant, son adresse électronique et son avatar photo (le cas échéant). La méthode suivante affirmera également que l'utilisateur est effectivement authentifié avec le utilisateur l'objet n'est pas nul:
if Auth.auth (). currentUser! = nil // l'utilisateur est connecté. let uid = utilisateur.uid let email = user.email let photoURL = utilisateur.photoURL //… else // l'utilisateur n'est pas connecté
Firebase fournit un excellent support pour les utilisateurs expéditeurs vérifications d'email ou un réinitialiser le mot de passe demande email.
Auth.auth (). CurrentUser? .SendEmailVerification (erreur) dans //… Auth.auth (). SendPasswordReset (withEmail: email) (erreur) dans //…
Firebase propose également un moyen de gérer le flux de travaux d’authentification anonyme, qui consiste essentiellement en un compte temporaire pouvant être utilisé pour authentifier les utilisateurs et leur fournir un accès limité. L’idée est qu’à un moment donné, les utilisateurs anonymes choisissent de s’inscrire et Firebase peut alors fournir un pont permettant de relier leurs comptes anonymes à leurs informations d’identification de connexion sans perdre les données persistantes au cours de leurs états anonymes. Pour vous connecter à un utilisateur anonyme, vous devez appeler:
Auth.auth (). SignInAnonymously () (utilisateur, erreur) dans //…
Pour faire passer l'utilisateur d'un compte anonyme à un compte authentifié (à l'aide de l'email et du mot de passe), appelez la méthode suivante dans un contrôleur d'affichage d'enregistrement, demandant l'e-mail et le mot de passe, puis appelez le user.link () méthode.
let credential = EmailAuthProvider.credential (withEmail: email, mot de passe: mot de passe) user.link (avec: credential) (utilisateur, erreur) dans //…
Firebase prend également en charge des méthodes pour les autres mécanismes d'authentification fédérée..
Voilà, nous avons examiné les importantes méthodes d'API fournies par Firebase pour gérer et authentifier les utilisateurs. Bien que le code que je vous ai montré ne soit en aucun cas compliqué, Firebase le rend encore plus facile avec l'introduction de FirebaseUI. Dans cette seconde partie de ce didacticiel, nous allons ajouter une authentification à notre exemple d'application To-Do..
FirebaseUI fournit une solution d'authentification ouverte qui gère les flux d'interface utilisateur pour connecter les utilisateurs avec des adresses de messagerie et des mots de passe, des numéros de téléphone et des fournisseurs d'identité fédérés populaires, notamment Google Sign-In et Facebook Login..
Ensuite, nous allons montrer comment implémenter l'authentification à l'aide de FirebaseUI..
Dans la console Firebase, accédez à la Authentification et activez les modes d’authentification suivants:
Nous venons de voir comment gérer et authentifier les utilisateurs manuellement à l'aide des SDK Firebase disponibles. Nous allons maintenant voir comment laisser FirebaseUI faire le gros du travail pour nous. Dans HomeViewController.swift, importer les bibliothèques suivantes:
import UIKit import Firebase import FirebaseAuthUI import FirebasePhoneAuthUI
dans le UIViewController.swift déclaration, ajoutez le FUIAuthDelegate:
classe HomeViewController: UIViewController, FUIAuthDelegate …
En dessous de cette déclaration de classe, nous allons déclarer trois variables privées avec lesquelles nous allons travailler. Celles-ci nous permettront de référencer notre objet d'authentification actuel, l'instance AuthUI et nos écouteurs d'authentification, respectivement:
fileprivate (set) var auth: Auth? fileprivate (set) var authUI: FUIAuth? // défini uniquement en interne mais en externe fileprivate (set) var authStateListenerHandle: AuthStateDidChangeListenerHandle?
Connectons ensuite notre contrôleur View afin que, lorsqu’il se charge pour la première fois, nous connectons un écouteur afin de détecter le changement de l’état de l’authentification à l’aide d’un gestionnaire. Lorsque l'état d'autorisation change, nous convoquerons le self.loginAction (expéditeur: self) méthode pour faire apparaître notre contrôleur d'authentification FirebaseUI.
override func viewDidLoad () super.viewDidLoad () // Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib. self.auth = Aut.auth () self.authUI = FUIAuth.defaultAuthUI () .auth? .addStateDidChangeListener (auth, utilisateur) dans l'utilisateur de garde! = nil else self.loginAction (sender: self) return
Dans cette méthode, nous instancions également les variables privées que nous avons déclarées précédemment, définissons la authUI déléguer à notre propre classe et enfin définir la liste des autres fournisseurs que nous soutiendrons, qui dans notre cas seront FUIPhoneAuth.
Si nous souhaitions prendre en charge Google, Facebook ou d'autres fournisseurs tiers, nous pourrions les ajouter à cette liste. Notez également qu'il n'est pas nécessaire d'inclure explicitement l'e-mail et le mot de passe car ils sont implicites, à condition qu'ils soient activés dans la console Firebase..
Ensuite nous traitons le loginAction () méthode, qui serait appelée dans le cas où l'écouteur d'événements détermine que l'utilisateur n'est pas authentifié pour le moment. Dans ce cas, tout ce que nous devons faire est de présenter le authUI.authViewController FireBaseUI modal, et il inclurait les fournisseurs d’authentification associés déclarés précédemment.
C’est là que la magie commence, puisque FirebaseUI s’occupe de tout: demander à l’utilisateur de saisir son adresse e-mail, déterminer s’il existe (dans ce cas, il lui sera demandé son mot de passe) ou un nouvel utilisateur, collecter ses informations. nommer et nommer un mot de passe.
@IBAction func loginAction (expéditeur: AnyObject) // Présente le contrôleur de vue de connexion par défaut fourni par authUI laissez authViewController = authUI? .AuthViewController (); self.present (authViewController !, animé: true, complétion: nil)
Si nous devions implémenter les méthodes d'authentification manuellement, nous aurions besoin de gérer tous ces différents scénarios, y compris les réinitialisations de mot de passe de messagerie, etc..
Enfin, nous mettons en œuvre le protocole requis pour notre FIRAuthUIDelegate délégué, ce qui nous permettra d’écouter et de gérer les états d’authentification. Cette méthode ne fonctionnera que si une erreur s'est effectivement produite, mais nous pouvons même gérer des authentifications réussies.
// Implémente la méthode de protocole requise pour FIRAuthUIDelegate func authUI (_ authUI: FUIAuth, didSignInWith utilisateur: User ?, error: Error?) Garde let authError = erreur else retour let errorCode = UInt ((authError as NSError) .code ) switch errorCode case FUIAuthErrorCode.userCancelledSignIn.rawValue: print ("Connexion annulée de l'utilisateur"); break par défaut: let detailedError = (authError as NSError) .userInfo [NSUnderlyingErrorKey] ?? authError print ("Erreur de connexion: \ ((detailError as! NSError) .localizedDescription)"); Avant de lancer l'application, nous devons ajouter quelques étapes supplémentaires pour pouvoir gérer l'authentification par téléphone. L'authentification téléphonique permet aux utilisateurs d'entrer leurs numéros de téléphone et de vérifier leur identité via un message SMS comprenant un code à usage unique.
Pour obtenir le jeton APN requis par le serveur Firebase, implémentez les éléments suivants dans AppDelegate.swift fichier:
Fonction func (_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Données) // Passer le jeton de périphérique à auth Auth.auth (). setAPNSToken (deviceToken, type: .prod)
Comme nous avons déjà activé la connexion de numéro de téléphone dans la console Firebase, notre tâche suivante consiste à configurer FirebaseDo pour recevoir les APN de Firebase, tâche que vous exécuteriez également si vous souhaitez prendre en charge les notifications push en général. Dans ce cas, toutefois, Firebase enverra une notification push silencieuse au périphérique afin de vérifier la demande de connexion au numéro de téléphone..
Vous ne pourrez pas tester cette méthode d'authentification via Xcode Simulator, vous devrez plutôt connecter votre iPhone pour installer et exécuter l'application..
Dans Xcode, accédez à Les capacités et permettre Notifications push. L'application va automatiquement mettre en place et créer un FirebaseDo.entitlements fichier, comme indiqué dans le navigateur de projet.
Ensuite, nous allons créer une clé d’authentification de notification Apple Push à télécharger sur Firebase. Dans le portail des développeurs Apple, sous Clés, indiquez le nom de votre projet en cochant bien APN. Télécharger le résultat .p8 fichier et prendre note de l'ID clé que nous allons devoir entrer bientôt.
Revenez à la console Firebase, et sous Paramètres du projet (l'icône d'engrenage), sélectionnez le Messagerie Cloud languette. Sous Configuration de l'application iOS et Clé d'authentification APN, sélectionnez le Télécharger bouton et télécharger le .p8 fichier, avec l’ID clé et l’ID application. L’écran des paramètres qui en résulte devrait ressembler à ce qui suit:
Et ça y est, nous n'avons pas eu à ajouter beaucoup de code supplémentaire à notre application pour la configurer pour un flux de travail complet d'inscription et d'authentification de connexion. Construisons et exécutons l'application dans Xcode pour voir FirebaseUI en action. La première fois que vous exécutez l'application, vous ne serez pas authentifié. Vous obtiendrez ainsi un modèle générique avec les options d'authentification que vous avez choisies dans la console Firebase..
Il semble un peu fade, mais vous pouvez personnaliser presque tous les aspects du modèle.
La saisie de l'adresse e-mail d'un nouvel utilisateur poussera le Créer un compte écran, vous demandant votre nom et mot de passe.
En remplissant ce formulaire, vous serez enregistré en tant que nouvel utilisateur (bien que notre application affiche uniquement un écran vide). Pour confirmer qu'un nouvel utilisateur a été créé, vous pouvez aller à Authentification > Utilisateurs dans votre console Firebase.
Testez chacune des méthodes d'authentification, en vous rappelant qu'il vous faudra vous déconnecter pour relancer l'invite d'authentification. Redéclenchez l'authentification en ajoutant le code suivant comme première ligne de viewDidLoad () après le super appel:
essayez firebaseAuth.signOut ()
Cela forcera l'application à revenir à son état initial afin que vous puissiez tester l'authentification via SMS par téléphone. Exécutez l'application à nouveau, cette fois en choisissant Se connecter avec un téléphone.
Dans ce didacticiel, vous avez découvert comment utiliser Firebase en tant que plate-forme back-end pour votre application et vous avez appris à authentifier les utilisateurs à l'aide de la combinaison classique adresse électronique et mot de passe, ainsi que par téléphone et SMS, une approche rendue populaire par les applications. comme WhatsApp.
Nous avons ensuite commencé à créer notre application FirebaseDo simple et, bien qu’elle ne réalise pas encore la fonctionnalité de type rappel, nous allons commencer à travailler sur cela dans le prochain tutoriel. Mais en quelques lignes, nous avons réussi à accomplir les tâches suivantes:
Dans la suite de la série, vous découvrirez quelques-uns des autres composants de Firebase..
Et pendant que vous êtes ici, assurez-vous de consulter certains de nos autres articles sur le développement d'applications iOS.!
