Introduction à Firebase

Nous sommes à l'ère du prototypage rapide. Nous pouvons avoir des idées brillantes, mais parfois, elles ne sont pas mises en œuvre si elles prennent trop de travail. Le back-end est souvent le facteur limitant: de nombreuses idées ne sont jamais mises en œuvre par manque de connaissances ou de temps pour le codage côté serveur..

En tant que développeur mobile, utiliser une plate-forme back-end en tant que service (BaaS) peut vous aider à mettre rapidement en œuvre vos idées..

Firebase possède toutes les fonctionnalités clés dont vous avez besoin pour le prototypage rapide et le test rapide de vos idées. En utilisant Firebase, vous pouvez raccourcir la création de fonctionnalités telles que l’authentification, la base de données et le stockage d’objets. Firebase est également fourni avec d'autres fonctionnalités pouvant s'avérer utiles pour la validation de prototypes, telles que l'analyse, les tests A / B et les notifications push.. 

Le meilleur de tous, Firebase est gratuit pour les petits projets!

Configurer une application iOS pour utiliser Firebase

Créons un exemple de projet Xcode utilisant Firebase. Nous l'appellerons MyFirstFirebaseApp.

Créer un nouveau projet Xcode

Choisis un Single View App modèle pour votre projet.

Maintenant que le projet est créé, commençons à le configurer pour Firebase..

Créer un podfile

CocoaPods est un gestionnaire de dépendance pour les projets Swift et Objective-C Cocoa. Nous devons l'initialiser dans notre projet. Cela peut être fait avec le pod init commander.

$ cd votre répertoire projet $ pod init

Ajouter les pods Firebase 

Nous voulons ajouter le Firebase / Core pod à notre projet. Cela inclut les bibliothèques prérequises nécessaires pour que Firebase soit opérationnel et fonctionne correctement.. 

$ pod 'Firebase / Core'

Voilà comment votre Podfile jettera un coup d'oeil:

Installer les pods et ouvrir le projet dans Xcode

Après avoir inclus les détails du pod, installons-les avec le installation de pod commander. Ensuite, nous pouvons ouvrir le projet dans Xcode en ouvrant le .xcworkspace fichier.

$ pod install $ ouvre votre-projet.xcworkspace

Créez et configurez votre compte Firebase

Créer un compte Firebase

Maintenant, configurons-nous avec un compte Firebase! Comme nous le savons tous, Firebase est un produit Google. Nous pouvons donc créer un compte Firebase Console à l'aide de notre compte Gmail.. 

Cependant, notez bien que Firebase n'est pas totalement gratuit. Nous pouvons commencer avec une version gratuite pour le prototypage initial, mais si vous envisagez de passer en production avec Firebase, vous devez connaître la structure de tarification.. 

Créer un nouveau projet dans la console Firebase

Maintenant que nous nous sommes connectés à notre compte Firebase, créons un projet. Cliquer sur Ajouter un projet.

Une fois le projet créé, la base de données Firebase, la gestion des utilisateurs et la configuration à distance peuvent être partagés avec iOS, Android et le Web..

Une fois le projet créé, vous serez dirigé vers le Aperçu du projet écran. Sous Commencer, cliquer sur iOS pour démarrer sur notre prototype iOS.

Enregistrer l'application pour iOS

Pour enregistrer notre application, nous devons fournir un identifiant de projet.

Maintenant, cliquez Enregistrer l'application. Vous serez invité à télécharger un .plist fichier qui devra être ajouté à votre projet Xcode.

Ce GoogleService-Info.plist contiendra des informations de base telles que l'ID client, la clé API, l'URL de la base de données et le compartiment de stockage. Regardez et voyez une fois que vous le téléchargez. Vous devez ensuite l'ajouter à votre projet en le faisant glisser dans le dossier indiqué ci-dessous dans Xcode..

Ajoutez le code d'initialisation à votre application

Maintenant, vous pouvez ajouter le code d'initialisation Firebase à votre application! Ouvrir AppDéléguer, et importer Firebase. Puis ajouter FirebaseApp.configure () dans didFinishLaunchingWithOptions. Votre code ressemblera à ceci:

import UIKit import Firebase @UIApplicationMain, classe AppDelegate: UIResponder, UIApplicationDelegate var window: UIWindow? application func (_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool FirebaseApp.configure () return true

Vérifier que Firebase fonctionne dans votre application

La configuration est enfin terminée et vous êtes prêt à vérifier que Firebase est correctement installé dans votre application. Quand vous cliquez Suivant sur le Ajouter Firebase à votre application iOS page de la console Firebase, vous verrez ceci:  

Nettoyons, construisons et exécutons l'application via Xcode. Aucune erreur ne devrait y avoir. Vous pouvez également voir des journaux liés à Firebase dans votre console. Si tout fonctionne correctement, la console Firebase vous le fera savoir..

Hourra! Maintenant, nous avons réussi à configurer Firebase pour notre application. 

Firebase User Management

Comme mentionné précédemment, Firebase peut être utilisé pour la gestion des utilisateurs. Configurez donc notre application pour l'authentification et la gestion des utilisateurs. Tout d’abord, passons à la section Authentification du tableau de bord Firebase, comme indiqué ci-dessous..

Cliquer sur Configurer la méthode de connexion. Ici, nous pouvons voir un certain nombre de possibilités. Vous pouvez en choisir plusieurs, ou si vous préférez ne pas vous connecter, vous pouvez choisir Anonyme. 

• Mot de passe de l'email: Permet aux utilisateurs de s'inscrire en utilisant leur adresse email et leur mot de passe. Les SDK Firebase fournissent également des primitives de vérification d’adresse électronique, de récupération de mot de passe et de changement d’adresse électronique..
• Téléphone: Autoriser les utilisateurs à se connecter avec un numéro de téléphone mobile à l'aide d'outils de vérification de téléphone Firebase SDK et d'authentification d'utilisateur. Dans le cadre du plan Spark gratuit de Firebase, vous obtenez 10 000 connexions téléphoniques par mois, mais vous devrez ensuite payer. Jetez un coup d'œil à la section des prix avant d'opter pour cela. 
• Google: La connexion Google est automatiquement configurée sur vos applications iOS et Web connectées. Pour configurer la connexion Google pour vos applications Android, vous devez ajouter une empreinte digitale SHA1 pour chaque application dans les paramètres de votre projet..
• Jouer à des jeux: Configurer l'ID client et le secret client.
• Facebook: Pour utiliser Facebook pour l'authentification, vous devez ajouter un URI de redirection OAuth à la configuration de votre application Facebook..
• Gazouillement: Pour utiliser Twitter pour l'authentification, vous allez ajouter une URL de rappel à la configuration de votre application Twitter.
• GitHub: Pour configurer l'authentification avec GitHub, vous allez ajouter une URL de rappel d'autorisation à la configuration de votre application GitHub..
• Anonyme: Sélectionnez cette option pour activer les comptes invités anonymes dans votre application, ce qui vous permet d'appliquer des règles de sécurité et Firebase spécifiques à l'utilisateur sans exiger d'informations d'identification.

Configurer l'authentification du téléphone

Voyons comment utiliser un téléphone comme méthode de connexion.

Tout d'abord, accédez à Méthode de connexion, cliquer sur Téléphone, et l'activer. Vous verrez un écran comme celui-ci:

Vous devrez également inclure le Firebase / Auth pod dans votre Podfile.

 pod 'Firebase / Auth'

Après avoir ajouté la ligne ci-dessus dans votre Podfile, accédez au dossier du projet et exécutez le installation de pod commander.

Ensuite, vous devez activer les notifications push dans votre projet Xcode..

Pour rechercher ce paramètre, sélectionnez votre application dans la liste. Les cibles panneau et cliquez sur le Les capacités languette. De là, vous pouvez activer Notifications push.

Vérification reCAPTCHA 

Configurons maintenant la vérification reCAPTCHA. reCAPTCHA est utilisé dans le cas où l'envoi ou la réception d'une notification push silencieuse est impossible, par exemple lorsque l'utilisateur a désactivé l'actualisation en arrière-plan pour votre application ou lors du test de votre application sur un simulateur iOS. Dans ce cas, l’authentification Firebase utilise la vérification reCAPTCHA pour compléter le flux de connexion téléphonique..

Cliquer sur GoogleService-Info.plist dans le panneau de gauche de Xcode pour ouvrir le plist. Maintenant, copiez la valeur de REVERSED_CLIENT_ID dans TextEdit ou un autre bloc-notes. 

Ensuite, allez à Les cibles > votre application> Info > Types d'URL. Cliquez sur le bouton "+" et copiez le REVERSED_CLIENT_ID valeur en Schémas d'URL, comme indiqué ci-dessous.

Configurer la messagerie cloud Firebase

Maintenant, configurons Firebase Cloud Messaging avec les APN de notre application.

Ouvrez la console Firebase, puis cliquez sur le bouton Réglages bouton tu verras Paramètres du projet et Utilisateurs et autorisations. Cliquer sur Paramètres du projet et puis le Messagerie Cloud languette. Sur cet écran, vous pouvez trouver la section de configuration de l'application iOS. 

Pour activer la messagerie cloud Firebase, nous allons télécharger nos APN et la clé d'authentification de nos APN dans cette boîte de dialogue..

Vous devez créer une clé d'authentification APN et une clé de certificat APN..

Étapes pour créer une clé d'authentification APNs 

• Dans votre compte de développeur, accédez à Certificats, identifiants et profils, et sous Clés, sélectionner Tout. 
• Cliquez sur le bouton Ajouter (+) dans le coin supérieur droit. 
• Entrez une description pour la clé d’authentification des APN.
• Sous Services clés, sélectionnez le APN case à cocher, et cliquez Continuer.
• Cliquez sur Confirmer et alors Télécharger. Enregistrez votre clé dans un endroit sûr! Ceci est un téléchargement unique, et la clé ne peut pas être récupérée plus tard.

Étapes pour créer une clé de certificat APNs

• Créé un ID de l'application depuis votre compte développeur Apple et activez Notification push en créant. Un identifiant d'application est un identifiant qui identifie de manière unique une application. En tant que convention, il est représenté par un domaine inversé avec le nom de votre société et le nom de l'application (par exemple,. com.mysoft.myfirstfirebaseApp).
• Créer un Profil d'approvisionnement pour l'ID d'application ci-dessus. 

Et c'est tout! Maintenant, toutes les configurations sont terminées et nous pouvons commencer à mettre en œuvre l'enregistrement et le flux de connexion..

Enregistrement d'un utilisateur avec authentification téléphonique

Revenons à Xcode et créons le RegistrationViewController.swift, RegistrationViewController.storyboard, et RegistrationService.swift des dossiers.

Pour le storyboard, j'ai ajouté un UITextField et un UIButton comme indiqué ci-dessous. Ceux-ci devraient être liés dans RegistrationViewController.swift.

Voici comment mon RegistrationViewController.swift jettera un coup d'oeil: 

import Foundation import UIKit class RegistrationViewController: UIViewController, UITextFieldDelegate @IBOutlet faible var phoneNumber: UITextField! remplacer func viewDidLoad () super.viewDidLoad () @IBAction func requestOTPTapped (_ sender: Any) 

Puisque notre objectif principal est Firebase, nous n'implémenterons pas UITextFieldDelegates. Pour garder les choses simples, nous allons capturer le texte en cliquant sur un bouton. 

Ajoutons maintenant le code suivant dans RegistrationService.swift.

import FirebaseAuth class RegistrationService func getVerificationId (phoneNumber: String, completionHandler: @escaping (String ?, Error?) -> Void) PhoneAuthProvider.provider (). verifyPhoneNumber (phoneNumber, uiDelegate: nil) (verificationID, error) in let error = erreur completionHandler (nil, erreur) si let id = ID de vérification completionHandler (id, nil) 

Dans ce code, PhoneAuthProvider.provider (). VerifyPhoneNumber prend un numéro de téléphone en entrée et nous renvoie le ID de vérification. Cela déclenche également l'envoi d'un message de mot de passe à usage unique (OTP) au numéro de téléphone indiqué dans le champ de texte. L'utilisateur recevra l'OTP sur son téléphone et le réintégrera dans une boîte de dialogue d'alerte de l'application..

Remarque: lors de la saisie du numéro de téléphone, assurez-vous que le code du pays est également saisi..

Notez également que nous devons nous rappeler de importer FirebaseAuth en haut du fichier.

Maintenant, revenons à RegistrationViewController.swift et appeler getVerificationId, comme indiqué ci-dessous. Ici, j'imprime l'identifiant sur la console pour vérifier si ID de vérification a été généré.

import Foundation import UIKit class RegistrationViewController: UIViewController, UITextFieldDelegate @IBOutlet faible var phoneNumber: UITextField! redéfinir func viewDidLoad () super.viewDidLoad () @IBAction func requestOTPTapped (_ expéditeur: Any) si let phoneNumber = phoneNumber = phoneNumber.text RegistrationService (). getVerificationId (phoneNumber: phoneNumber) (id, error) in if error ! = nil return si let id = id print (id)

La méthode de connexion

Maintenant, écrivons une méthode de connexion dans RegistrationService. Ici, nous allons créer un objet Credential Firebase en utilisant verificationId et OTP. Voici à quoi ressemblera le code:

 func signIn (verificationId: String, verificationCode: String, completionHandler: @escaping (String ?, Error?) -> Void) let credential = PhoneAuthProvider.provider (). credential (withVerificationID: verificationId, verificationCode: verificationCode: Autodesk) ) .signIn (avec: informations d'identification) (utilisateur, erreur) dans si let erreur = erreur completionHandler ("Erreur", erreur) completionHandler ("succès", nil)

Une fois que nous aurons reçu cet identifiant, nous afficherons une vue d'alerte permettant à l'utilisateur de capturer l'OTP et d'appeler le se connecter méthode en RegistrationService. Voici ce que le RegistrationViewController ressemblera à ces changements: 

import Foundation import UIKit class RegistrationViewController: UIViewController, UITextFieldDelegate @IBOutlet faible var phoneNumber: UITextField! redéfinir func viewDidLoad () super.viewDidLoad () @IBAction func requestOTPTapped (_ expéditeur: Any) si let phoneNumber = phoneNumber = phoneNumber.text RegistrationService (). getVerificationId (phoneNumber: phoneNumber) (id, error) in if error ! = nil return si let id = id self.displayAlert (id: id) func displayAlert (id: String) let alertController = UIAlertController (titre: "OTP?", message: "", preferredStyle : .alert) let cancelAction = UIAlertAction (titre: "Annuler", style: .default, gestionnaire: (action: UIAlertAction!) -> Annuler en) let saveAction = UIAlertAction (titre: "Enregistrer", style: .default , gestionnaire: alert -> Nul dans let otpText = alertController.textFields! [0] comme UITextField si let otp = otpText.text print (otp) RegistrationService (). signIn (verificationId: id, verificationCode: otp) (status , erreur) dans si erreur! = nil return print ("Statut de connexion", statut ?? "inconnu")) alertController.addTextField (textField: UITextField!) -> Nul dans textField.placeholder = "OTP "  alertController.addAction (cancelAction) alertController.addAction (saveAction) self.present (alertController, animé: true, complétion: nil)

Maintenant, vous pouvez exécuter votre application pour l'essayer. Voici ce que vous verrez lorsque vous cliquez sur Demander OTP.

Maintenant, le statut de connexion sera imprimé comme Succès. Nous pouvons vérifier dans la console Firebase qu'un utilisateur a été créé. 

Conclusion

Dans ce tutoriel, nous avons construit une application simple utilisant Xcode et Firebase. J'espère que vous aurez acquis de nouvelles compétences que vous pourrez mettre en pratique dans vos projets à venir.. 

Si vous avez des questions, faites le moi savoir dans les commentaires ci-dessous.