Aan de slag met Firebase-verificatie voor iOS

Firebase is een platformonafhankelijk realtime mobiel databaseplatform waarmee codeerders zich kunnen concentreren op datgene waarvoor ze hun apps het beste kunnen coderen, zonder zich zorgen te hoeven maken over DevOps-problemen, zoals serverinfrastructuur en databasemodellering. Met ondersteuning van Google neemt Firebase de complexiteit weg uit het omgaan met back-end real-time databases, authenticeren van gebruikers en werken met offline synchronisatie workflows. 

Hoewel er veel oplossingen zijn voor BaaS, zoals Realm (bekijk mijn Realm.io zelfstudie hier op Envato Tuts +) Firebase vereist geen voorafgaande infrastructuurserverconfiguratie, aangezien het platform zorgt voor hosting en in ruil daarvoor een SDK blootlegt.

Voorbij een NoSQL real-time database, met Firebase krijgt u analyses, crash-rapportage, gebruikersauthenticatie, cloud-berichten, pushmeldingen en meer. De bijbehorende kosten worden ook meegewogen met uw project. Naarmate u groeit, gaat u van een freemium-model naar een model voor per gebruik.

In deze zelfstudie laat ik je zien hoe je Firebase instelt op iOS met behulp van CocoaPods en hoe je gebruikers kunt authenticeren met behulp van twee populaire methoden: e-mail en wachtwoord of via de telefoon met sms. 

Bekijk enkele van onze andere zelfstudies hier op Envato Tuts voor meer informatie over Firebase voor Android+. 

Uw eerste Firebase-app

voorwaarden

U heeft het volgende nodig:

  • iOS 10 met Xcode 8
  • CocoaPods geïnstalleerd
  • een gratis Firebase-account

Aangenomen kennis

Deze tutorial gaat ervan uit dat je een praktische kennis hebt van iOS en Swift, evenals enige basiservaring met CocoaPods. Als je meer wilt weten, bekijk dan onze Swift tutorials en CocoaPods-tutorials.

Doel van deze zelfstudie

Aan het einde van deze zelfstudie bent u begonnen met een eenvoudige door Firebase gevoede app die gebruikmaakt van de Firebase-SDK om gebruikers te verifiëren, zowel via e-mail en wachtwoord als per sms. Onderweg leer je over:

  1. Firebase instellen met CocoaPods
  2. de App Delegate instellen om verbinding te maken met Firebase
  3. het instellen van de provisioningrechten voor tekst / sms gebruikersauthenticatie
  4. gebruik van FirebaseUI om gebruikers eenvoudig te verifiëren

In toekomstige zelfstudies in deze serie leert u werken met andere aspecten van het Firebase-platform, zoals het gebruik van de real-time database om app-gegevens op te slaan.

Stel het project in

In deze serie gaan we een taak maken met de naam FirebaseDo. Laten we beginnen met het klonen van het project vanuit GitHub:

$ [email protected]: tutsplus / get-started-with-firebase-authentication-for-ios.git ... $ git fetch --all --tags ... $ git checkout tags / START

Vervolgens gaan we het project initialiseren om een ​​nieuw te genereren PodFile, als volgt:

pod init

Je zou een nieuw bestand moeten zien met de naam Podfile bevindt zich in de hoofdmap van uw project. Dit bestand bevat in principe de bibliotheken die we in ons project willen gebruiken. Open het en voeg de volgende Firebase-aangiftelijnen toe:

pod 'FirebaseUI' Pod 'Firebase'

Sla op en voer vervolgens het volgende in uw terminal in om de pods te bouwen:

pod installeren

We zullen gebruiken FirebaseDo.xcworkspace in plaats van FirebaseDo.xccodeproj, waardoor we kunnen werken met de afhankelijkheidsbibliotheken die we hebben ingesteld op CocoaPods, dus ga je gang en open je de werkruimte en ga je vervolgens naar je browser.

Ga nu naar het Firebase-paneel en maak een nieuw project:

Klik vervolgens op Voeg Firebase toe aan uw iOS-app, die u vervolgens stap voor stap begeleidt bij het registreren van uw app op Firebase.

Op een gegeven moment zal het u instrueren om de. Toe te voegen GoogleService-info.plist bestand in uw Xcode-project:

Je hebt de bibliotheken al toegevoegd via CocoaPods, dus je kunt de resterende instructies overslaan en terugkeren naar de Firebase-console. 

Gebruikers authenticeren

Firebase-verificatie biedt backend-services, gebruiksvriendelijke SDK's en kant-en-klare UI-bibliotheken om gebruikers te verifiëren voor uw app. Het ondersteunt authenticatie met behulp van wachtwoorden, telefoonnummers, populaire federatieve identiteitsproviders zoals Google, Facebook en Twitter, en meer. (bron: Firebase-verificatie)

Voordat we demonstreren hoe u FirebaseUI kunt gebruiken om het verifiëren van uw gebruikers te automatiseren, gaan we eerst de SDK-methoden verkennen die Firebase blootlegt als onderdeel van de FirebaseAuth Framework Reference API voor het handmatig verwerken en aanmelden van gebruikers.

Meld u aan, log in en signeer gebruikers

Als u een nieuwe gebruiker wilt maken, gebruikt u de Auth.auth () createuser. () methode blok, als volgt:

Auth.auth (). CreateUser (withEmail: email, password: password) (user, error) in // ...

Uitgaande van de foutobject is nihil, de gebruiker zal niet alleen succesvol zijn aangemeld, maar zal ook worden aangemeld. Om een ​​bestaande gebruiker expliciet in te loggen, belt u:

Auth.auth (). SignIn (withEmail: email, password: password) (user, error) in // ...

Een gebruiker uitloggen is net zo eenvoudig als bellen proberen! FirebaseAuth.signOut ():

doen try firebaseAuth.signOut () catch let signOutError as NSError print ("Fout afmelden:% @", signOutError)

We willen in staat zijn om verschillende mogelijke fouten op een elegante manier af te handelen, in het geval dat de authenticatieoproepen op een dwaalspoor raken en wanneer de fout object is niet nul (of omgekeerd, de gebruiker object is nul), er is een fout opgetreden. Raadpleeg de Firebase-documentatie voor een lijst met alle gebruikelijke foutcodes. In onze code behandelen we slechts enkele algemene fouten.

Wijzigingen in de verificatiestatus beheren

Gedurende de hele levenscyclus van de app, verandert de verificatiestatus, dus het is belangrijk om te kunnen detecteren wanneer een gebruiker is geverifieerd of dat een sessie is verlopen, om ervoor te zorgen dat gebruikers geen toegang hebben tot delen van uw app waartoe ze geen toegang zouden moeten hebben.

Door een handler te maken, .addStateDidChangeListener, u kunt nu detecteren in welke staat de gebruiker zich bevindt en op basis daarvan een specifieke oproep activeren.

handle = Auth.auth (). addStateDidChangeListener (auth, user) in // ...

Gebruikers beheren

Nadat de gebruiker is geverifieerd, hebt u toegang tot de gebruiker object en verkrijg gebruikersinformatie zoals de ID van de gebruiker, het e-mailadres en de fotoavatar (indien aanwezig). De volgende methode zal ook beweren dat de gebruiker inderdaad is geverifieerd met de gebruiker object niet nul:

if Auth.auth (). currentUser! = nil // Gebruiker is ingelogd. laat uid = user.uid laat email = user.email laat photoURL = user.photoURL // ... else // Gebruiker is niet aangemeld 

Gebruikers e-mailen

Firebase biedt uitstekende ondersteuning voor het verzenden van gebruikers e-mailverificaties of a wachtwoord reset e-mail aanvragen.

Auth.auth (). CurrentUser? .SendEmailVerification (error) in // ... Auth.auth (). SendPasswordReset (withEmail: email) (error) in // ... 

Anonieme gebruikers

Firebase biedt ook een manier om de anonieme verificatie-workflow te beheren, wat in wezen een tijdelijk account is dat kan worden gebruikt om gebruikers te verifiëren en hen beperkte toegang te bieden. Het idee is dat op een bepaald moment anonieme gebruikers kunnen kiezen om zich aan te melden en Firebase kan dan een brug bieden om hun anonieme accounts te koppelen aan hun inlogreferenties zonder gegevens te verliezen tijdens hun anonieme staten. Om een ​​anonieme gebruiker aan te melden, zou u bellen:

Auth.auth (). SignInAnonymously () (user, error) in // ...

Om de gebruiker van een anonieme account over te zetten naar een geverifieerd account (met behulp van e-mail en wachtwoord), roept u de volgende methode binnen een registratieschermweergavecontroller, vraagt ​​u de e-mail en het wachtwoord aan en belt u de user.link ()  methode.

let credential = EmailAuthProvider.credential (withEmail: email, password: password) user.link (with: credential) (user, error) in // ...

Firebase ondersteunt ook methoden voor de andere federatieve authenticatiemechanismen. 

Daar heb je het: we hebben de belangrijke API-methoden doorgenomen die Firebase heeft geboden om gebruikers te verwerken en te verifiëren. Hoewel de code die ik je heb laten zien op geen enkele manier ingewikkeld is, maakt Firebase het nog eenvoudiger dan dit, met de introductie van FirebaseUI. In deze tweede helft van deze zelfstudie gaan we authenticatie toevoegen aan onze voorbeeldtaai-app.

FirebaseUI implementeren

FirebaseUI biedt een drop-in authenticatieoplossing die de UI-flows afhandelt voor het aanmelden van gebruikers met e-mailadressen en wachtwoorden, telefoonnummers en met populaire federatieve identiteitsproviders, waaronder Google Sign-In en Facebook Login. 

Vervolgens gaan we demonstreren hoe authenticatie geïmplementeerd kan worden met FirebaseUI.

Ga in de Firebase-console naar de authenticatie tab en schakel de volgende verificatiemodi in:

  • Email Wachtwoord
  • Telefoon

We hebben zojuist gezien hoe gebruikers handmatig kunnen worden beheerd en geverifieerd met behulp van de beschikbare Firebase-SDK's. We gaan nu kijken hoe FirebaseUI al het zware werk voor ons kan doen. In HomeViewController.swift, importeer de volgende bibliotheken:

import UIKit import Firebase import FirebaseAuthUI importeer FirebasePhoneAuthUI

In de UIViewController.swift verklaring, voeg de FUIAuthDelegate:

class HomeViewController: UIViewController, FUIAuthDelegate ... 

Onder deze klassenverklaring gaan we drie privévariabelen verklaren waarmee we zullen werken. Deze laten ons verwijzen naar ons huidige authenticatieobject, het AuthUI-exemplaar en onze authenticatie-luisteraars, respectievelijk:

 fileprivate (set) var auth: Auth? fileprivate (set) var authUI: FUIAuth? // alleen intern ingesteld, maar extern opgehaald (set) var authStateListenerHandle: AuthStateDidChangeListenerHandle?

Laten we vervolgens onze View Controller zo aansluiten dat wanneer deze de eerste keer wordt geladen, we een luisteraar aansluiten om te detecteren wanneer de authenticatiestatus verandert met een handler. Wanneer de auth-status verandert, roepen we de self.loginAction (afzender: zelf) methode om onze FirebaseUI-authenticatiecontroller te openen.

 override func viewDidLoad () super.viewDidLoad () // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt. self.auth = Auth.auth () self.authUI = FUIAuth.defaultAuthUI () self.authUI? .delegate = self self.authUI? .providers = [FUIPhoneAuth (authUI: self.authUI!),] self.authStateListenerHandle = self .auth? .addStateDidChangeListener (auth, user) in guard user! = nil else self.loginAction (afzender: zelf) retour

In deze methode geven we ook de privévariabelen aan die we eerder hebben verklaard, stelt u de authUI afgevaardigde naar onze eigen klas, en uiteindelijk de lijst met andere providers die we zullen ondersteunen, wat in ons geval zal zijn FUIPhoneAuth.

Als we Google, Facebook of andere externe providers wilden ondersteunen, konden we ze aan deze lijst toevoegen. Houd er ook rekening mee dat we e-mail en wachtwoord niet expliciet hoeven opnemen omdat dit impliciet is, op voorwaarde dat dit is ingeschakeld in de Firebase-console.

De gebruikersinterface voor inloggen weergeven

Vervolgens gaan we om met de loginAction () methode, die zou worden aangeroepen in het geval dat de gebeurtenislistener bepaalt dat de gebruiker momenteel niet is geverifieerd. Alles wat we in dit geval moeten doen, is de authUI.authViewController modale FirebaseUI, en het zou de bijbehorende authenticatieproviders omvatten die we eerder hebben verklaard.

Dit is waar de magie begint, omdat FirebaseUI alles aanpakt: de gebruiker vragen zijn e-mailadres in te voeren, bepalen of de gebruiker bestaat (in welk geval de gebruiker om zijn wachtwoord zal worden gevraagd), of voor een nieuwe gebruiker, en hun naam en nominatie van een wachtwoord.

 @IBAction func loginAction (afzender: AnyObject) // Presenteer de standaard inlogcontroller die wordt geleverd door authUI laat authViewController = authUI? .AuthViewController (); self.present (authViewController !, geanimeerd: true, completion: nil)

Als we de verificatiemethoden handmatig zouden implementeren, zouden we al deze verschillende scenario's moeten afhandelen, inclusief resets voor e-mailwachtwoorden enzovoort.

Veranderingen van Auth-status afhandelen

Ten slotte implementeren we het vereiste protocol voor onze FIRAuthUIDelegate afgevaardigde, waardoor we kunnen luisteren en de authenticatietoestanden kunnen afhandelen. Deze methode zal alleen doorgaan als er inderdaad een fout is opgetreden, maar we kunnen zelfs omgaan met succesvolle authenticaties.

 // Implementeer de vereiste protocolmethode voor FIRAuthUIDelegate func authUI (_ authUI: FUIAuth, didSignInWith user: User?, Error: Error?) Guard let authError = error else return laat errorCode = UInt ((authError as NSError) .code ) switch errorCode case FUIAuthErrorCode.userCancelledSignIn.rawValue: print ("Door gebruiker geannuleerde aanmelding"); standaard onderbreken: laat detailedError = (authError als NSError) .userInfo [NSUnderlyingErrorKey] ?? authError print ("Login error: \ ((detailedError as! NSError) .localizedDescription)"); 

Instellingen voor telefoonauthenticatie

Voordat we de app gebruiken, moeten we nog een paar stappen toevoegen om telefoongebaseerde authenticatie te kunnen verwerken. Met telefoonverificatie kunnen gebruikers hun telefoonnummers invoeren en hun identiteit verifiëren via een sms-bericht met een eenmalige code.

 Voor het verkrijgen van het APN-token dat de Firebase-server nodig heeft, implementeert u het volgende in de AppDelegate.swift het dossier:

toepassing func (_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) // Geef apparaattoken door aan auth Auth.auth (). setAPNSToken (deviceToken, type: .prod)

Omdat we het aanmeldingsnummer voor telefoonnummers in de Firebase-console al hebben ingeschakeld, is onze volgende taak om FirebaseDo te voorzien van APN's van Firebase, een taak die u ook zou doen als u pushmeldingen in het algemeen wilt ondersteunen. In dit geval stuurt Firebase echter een stille pushmelding naar het apparaat om het aanmeldingsverzoek voor telefoonnummer te verifiëren.

U kunt deze authenticatiemethode niet testen via Xcode Simulator, maar u moet uw iPhone verbinden om de app te installeren en uit te voeren.

Ga in Xcode naar mogelijkheden en inschakelen Push-meldingen. De app zorgt automatisch voor en creëert een FirebaseDo.entitlements bestand, zoals getoond in de project-navigator.

Vervolgens gaan we een Apple Push Notification Authentication Key maken om te uploaden naar Firebase. In de Apple Developer Portal, onder Keys, vul de naam van je project in en zorg ervoor dat je aanvinkt APN. Download het resultaat .p8 bestand en noteer de sleutel-ID zoals we deze binnenkort moeten invoeren.

Schakel terug naar de Firebase-console en onder Project instellingen (het tandwielpictogram), selecteer de Cloud Messaging tab. Onder iOS-app-configuratie en APN-verificatiesleutel, selecteer de Uploaden knop en upload de .p8 bestand, samen met de sleutel ID en app-ID. Het resulterende instellingenscherm moet op het volgende lijken:

De app testen

En dat is het - we hoefden niet veel extra code toe te voegen aan onze app om het in te stellen voor een complete registratie en inlogverificatie-workflow. Laten we de app bouwen en uitvoeren in Xcode om FirebaseUI in actie te zien. De eerste keer dat u de app uitvoert, wordt u niet geverifieerd, zodat u een generieke sjabloon krijgt met de verificatieopties die u hebt gekozen in Firebase-console..

Het ziet er een beetje flauw uit, maar je kunt bijna elk aspect van de sjabloon aanpassen. 

Het invoeren van het e-mailadres van een nieuwe gebruiker zal de Maak een account aan scherm waarin u wordt gevraagd om uw naam en wachtwoord.

Als u dit formulier invult, wordt u geregistreerd als nieuwe gebruiker (hoewel onze app alleen een leeg scherm weergeeft). Om te bevestigen dat een nieuwe gebruiker is aangemaakt, kunt u naar authenticatie > gebruikers in uw Firebase-console. 

Test elk van de authenticatiemethoden, onthoud dat u moet uitloggen om de authenticatie prompt opnieuw te activeren. Activeer opnieuw autorisatie door de volgende code toe te voegen als eerste regel in viewDidLoad () na de super call:

probeer firebaseAuth.signOut ()

Hierdoor wordt de toepassing teruggezet naar de oorspronkelijke status, zodat u het verifiëren via sms kunt testen. Voer de app opnieuw uit, maar kies deze keer Aanmelden met telefoon.

Conclusie

In deze zelfstudie heeft u een introductie gekregen over het gebruik van Firebase als back-endplatform voor uw app en zag u hoe u gebruikers kunt verifiëren met behulp van de traditionele combinatie van e-mail en wachtwoord en via telefoon en sms, een aanpak die populair is gemaakt door apps zoals WhatsApp.

We zijn toen begonnen met het bouwen van onze eenvoudige FirebaseDo-app en hoewel het nog geen enkele van de echte functionaliteit van het herinneringstype heeft gedaan, zullen we daar in de volgende tutorial aan werken. Maar in slechts enkele regels slaagden we erin om het volgende te bereiken:

  • geïntegreerde Firebase om een ​​authenticatiemechanisme voor e-mail en wachtwoord in te stellen
  • de mogelijkheid toegevoegd om te authenticeren via sms
  • gevolgde authenticatietoestanden
  • Fouten behandeld

In de rest van de serie zul je enkele van de andere componenten van Firebase bekijken.

En als je er bent, kijk dan eens naar enkele van onze andere berichten over de ontwikkeling van iOS-apps!