Erste Schritte mit der Firebase-Authentifizierung für iOS

() translation by (you can also view the original English article)

Firebas e ist eine plattformübergreifende mobile Echtzeit-Datenbankplattform, die es Codierern ermöglicht, sich auf das zu konzentrieren, was sie am besten können, ihre Apps zu codieren, ohne sich um DevOps Sorgen wie Serverinfrastruktur und Datenbankmodellierung sorgen zu müssen. Firebase unterstützt von Google den komplizierten Umgang mit Back-End-Echtzeitdatenbanken, der Benutzerauthentifizierung und der Arbeit mit Offline-Synchronisation-Arbeitsablauf.

Für BaaS gibt es viele Lösungen, wie z. B. Realm (lesen Sie mein Realm.io-Tutorial hier auf Envato Tuts+). Firebase erfordert keine vorherige Konfiguration eines Infrastrukturservers, da die Plattform das Hosting übernimmt und im Gegenzug ein SDK bereitstellt.

Neben einer NoSQL-Echtzeitdatenbank erhalten Sie mit Firebase Analysen, Absturzberichte, Benutzerauthentifizierung, Cloud-Messaging, Push-Benachrichtigungen und vieles mehr. Die damit verbundenen Koste n werden mit Ihrem Projekt skaliert. Wenn Sie wachsen, wechseln Sie von einem Freemium-Modell zu einem Modell pro Nutzung.

In diesem Tutorial zeige ich Ihnen, wie Sie Firebase mit CocoaPods für iOS einrichten und wie Sie Benutzer mit zwei gängigen Methoden authentifizieren: E-Mail und Passwort oder per Telefon mit SMS.

Um mehr über Firebase für Android zu erfahren, lesen Sie einige der anderen Tutorials hier auf Envato Tuts+.

Android SDK

Erste Schritte mit Firebase für Android

Ashraff Hathibelagal

Ihre erste Firebase App

Voraussetzungen

Sie benötigen Folgendes:

iOS 10 mit Xcode 8
CocoaPods installiertein
kostenloses Firebas e-Konto

Angenommenes Wissen

Dieses Tutorial setzt voraus, dass Sie über Grundkenntnisse in iOS und Swift sowie einige grundlegende Erfahrungen mit CocoaPods verfügen. Wenn Sie mehr erfahren möchten, lesen Sie unsere Swift-Tutorials und CocoaPods-Tutorials.

Ziele dieses Tutorials

Am Ende dieses Lernprogramms haben Sie mit einer einfachen, von Firebase betriebenen App begonnen, die das Firebase-SDK zur Authentifizierung von Benutzern verwendet, und zwar mithilfe von E-Mail und Kennwort sowie per SMS. Auf dem Weg erfahren Sie:

Einrichten von Firebase mit CocoaPods
Einrichten des App-Delegierten für die Verbindung zu Firebase
Einrichten der Bereitstellungsberechtigungen für die Text-/SMS-Benutzerauthentifizierung
Verwenden von FirebaseUI zum einfachen Authentifizieren von Benutzern

In zukünftigen Lernprogrammen dieser Serie lernen Sie, mit anderen Aspekten der Firebase-Plattform zu arbeiten, beispielsweise mit der Echtzeitdatenbank zum Speichern von App-Daten.

Richten Sie das Projekt ein

In dieser Serie erstellen wir eine To-Do-App namens FirebaseDo. Beginnen wir mit dem Klonen des Projekts aus GitHub:

$ git@github.com:tutsplus/get-started-with-firebase-authentication-for-ios.git
...
$ git fetch --all --tags
...
$ git checkout tags/START

Als Nächstes initialisieren Sie das Projekt, um eine neue PodFile wie folgt zu generieren:

pod init

Sie sollten eine neue Datei mit dem Namen Podfile im Stammverzeichnis des Projekts sehen. Diese Datei enthält im Wesentlichen die Bibliotheken, die wir in unserem Projekt verwenden möchten. Öffnen Sie es und fügen Sie die folgenden Firebase-Deklarationszeilen hinzu:

1	pod 'FirebaseUI'
2
3	Pod 'Firebase'

Speichern Sie und geben Sie in Ihrem Terminal Folgendes ein, um die Pods zu erstellen:

pod install

Wir werden FirebaseDo.xcworkspace anstelle von FirebaseDo.xccodeproj verwenden, sodass wir mit den Abhängigkeitsbibliotheken arbeiten können, die wir für CocoaPods eingerichtet haben. Öffnen Sie also den Arbeitsbereich und wechseln Sie zu Ihrem Browser.

Gehen Sie jetzt zum Firebase-Bedienfeld und erstellen Sie ein neues Projekt:

Klicken Sie anschließend auf Firebase zu Ihrer iOS-App hinzufügen, die Sie Schritt für Schritt durch die Registrierung Ihrer App bei Firebase führt.

Firebase zu Ihrer iOS-App hinzufügenAn einem bestimmten Punkt werden Sie dazu aufgefordert, die Datei GoogleService-info.plist zu Ihrem Xcode-Projekt hinzuzufügen:

Adding GoogleService plist file to your iOS project

Sie haben die Bibliotheken bereits über CocoaPods hinzugefügt, sodass Sie die verbleibenden Anweisungen überspringen und zur Firebase-Konsole zurückkehren können.

Benutzer authentifizieren

Die Firebase-Authentifizierung bietet Backend-Services, benutzerfreundliche SDKs und vorgefertigte UI-Bibliotheken, um Benutzer für Ihre App zu authentifizieren. Es unterstützt die Authentifizierung mit Kennwörtern, Telefonnummern, bekannten Anbietern von Verbundidentitäten wie Google, Facebook und Twitter und mehr. (Quelle: Firebase-Authentifizierun g)

Bevor wir zeigen, wie FirebaseU I zum Automatisieren der Authentifizierung Ihrer Benutzer verwendet wird, werden wir zunächst die SDK-Methoden untersuchen, die Firebase als Teil der FirebaseAuth Framework Reference AP I für die manuelle Erstellung und Anmeldung von Benutzern bereitstellt.

Benutzer anmelden, anmelden und abmelden

Um einen neuen Benutzer zu erstellen, verwenden Sie den Methodenblock Auth.auth().createUser() wie folgt:

1	Auth.auth().createUser(withEmail: email, password: password) { (user, error) in
2	// ...
3	}

Angenommen, das error-Objekt ist null, wird der Benutzer nicht nur erfolgreich angemeldet, sondern auch angemeldet. Um einen vorhandenen Benutzer explizit anzumelden, rufen Sie Folgendes auf:

1	Auth.auth().signIn(withEmail: email, password: password) { (user, error) in
2	// ...
3	}

Das Abmelden eines Benutzers ist so einfach wie das Anrufen von try!FirebaseAuth.signOut():

do {
  try firebaseAuth.signOut()
} catch let signOutError as NSError {
  print ("Error signing out: %@", signOutError)
}

Wir möchten in der Lage sein, verschiedene potenzielle Fehler elegant zu behandeln, falls die Authentifizierungsaufrufe in die Irre gehen und wenn das error-Objekt nicht gleich Null ist (oder umgekehrt das user-Objekt gleich Null ist), ist ein Fehler aufgetreten. In der Firebase-Dokumentatio n finden Sie eine Liste aller gebräuchlichen Fehlercodes. In unserem Code behandeln wir nur einige allgemeine Fehler.

Änderungen des Authentifizierungsstatus verwalten

Während des gesamten App-Lebenszyklus ändert sich der Authentifizierungsstatus. Um festzustellen, ob ein Benutzer sich authentifiziert hat oder eine Sitzung abgelaufen ist, ist es wichtig, sicherzustellen, dass Benutzer keinen Zugriff auf Teile Ihrer App haben, auf die sie nicht zugreifen dürfen.

Durch das Erstellen eines Handlers .addStateDidChangeListener können Sie jetzt erkennen, in welchem Status sich der Benutzer befindet, und auf dieser Grundlage einen bestimmten Aufruf auslösen.

1	handle = Auth.auth().addStateDidChangeListener { (auth, user) in
2	// ...
3	}

Benutzer verwalten

Nachdem der Benutzer sich authentifiziert hat, können Sie auf das user-Objekt zugreifen und Benutzerinformationen abrufen, z. B. die Benutzer-ID, die Email-Adresse und den Foto-Avatar (sofern angegeben). Mit der folgenden Methode wird auch bestätigt, dass der Benutzer tatsächlich mit dem user-Objekt authentifiziert wird, das nicht gleich Null ist:

if Auth.auth().currentUser != nil {
  // User is signed in.
  let uid = user.uid
  let email = user.email
  let photoURL = user.photoURL
  // ...
} else {
  // User is not signed in
}

Email an Benutzer

Firebase bietet hervorragende Unterstützung für das Senden von Email-Überprüfungen an Benutzer oder eine Email mit der Anforderung zum Zurücksetzen des Kennworts.

Auth.auth().currentUser?.sendEmailVerification { (error) in
  // ...
}

Auth.auth().sendPasswordReset(withEmail: email) { (error) in
  // ...
}

Anonyme Benutzer

Firebase bietet auch eine Möglichkeit zum Verwalten des anonymen Authentifizierungsworkflows, bei dem es sich im Wesentlichen um ein temporäres Konto handelt, mit dem Benutzer authentifiziert und ihnen eingeschränkten Zugriff gewährt werden können. Die Idee ist zu einem bestimmten Zeitpunkt, anonyme Benutzer entscheiden sich möglicherweise für die Anmeldung, und Firebase kann dann eine Brücke bereitstellen, um ihre anonymen Konten mit ihren Anmeldeinformationen zu verknüpfen, ohne dass die Daten während ihres anonymen Status verloren gehen. Um einen anonymen Benutzer anzumelden, rufen Sie an:

1	Auth.auth().signInAnonymously() { (user, error) in
2	// ...
3	}

Um den Benutzer von einem anonymen Konto zu einem authentifizierten Konto zu wechseln (mithilfe von Email und Kennwort), rufen Sie die folgende Methode in einem Controller für die Registrierungsansicht auf, fordern die E-Mail und das Kennwort an und rufen dann die Methode user.link() auf.

let credential = EmailAuthProvider.credential(withEmail: email, password: password)

user.link(with: credential) { (user, error) in
  // ...
}

Firebase unterstützt auch Methoden für die anderen Verbundauthentifizierungsmechanismen.

Da haben Sie es - wir haben die wichtigen API-Methoden durchlaufen, die Firebase für die Verarbeitung und Authentifizierung von Benutzern bereitgestellt hat. Während der Code, den ich Ihnen gezeigt habe, keineswegs kompliziert ist, macht Firebase dies mit der Einführung von FirebaseU I noch einfacher. In dieser zweiten Hälfte dieses Tutorials fügen wir unserer Beispiel-To-Do-App eine Authentifizierung hinzu.

Implementieren von FirebaseUI

FirebaseU I bietet eine Drop-In-Authentifizierungslösung, die die UI-Flows für die Anmeldung von Benutzern mit E-Mail-Adressen und Kennwörtern, Telefonnummern und bei bekannten Anbietern von Verbundidentitäten, einschließlich Google Sign-In und Facebook-Login, übernimmt.

Als Nächstes zeigen wir Ihnen, wie Sie die Authentifizierung mit FirebaseUI implementieren.

Wechseln Sie in der Firebase-Konsole zur Registerkarte Authentifizierung und aktivieren Sie die folgenden Authentifizierungsmodi:

Email/Passwort
Telefon

Adding EmailPassword and Phone support to app

Hinzufügen der Unterstützung für EmailPassword und Telefon zur AppWir haben gerade gesehen, wie Benutzer manuell mit den verfügbaren Firebase-SDKs verwaltet und authentifiziert werden. Wir werden jetzt sehen, wie FirebaseU I alle schweren Aufgaben für uns erledigen lässt. Importieren Sie in HomeViewController.swift die folgenden Bibliotheken:

1	import UIKit
2	import Firebase
3	import FirebaseAuthUI
4	import FirebasePhoneAuthUI

Fügen Sie in der UIViewController.swift-Deklaration das FUIAuthDelegate hinzu:

1	class HomeViewController: UIViewController, FUIAuthDelegate {
2	...

Unter dieser Klassendeklaration werden drei private Variablen deklariert, mit denen wir arbeiten werden. Damit können wir auf unser aktuelles Authentifizierungsobjekt, die AuthUI-Instanz und unsere Authentifizierungslistener verweisen:

1	fileprivate(set) var auth:Auth?
2	fileprivate(set) var authUI: FUIAuth? //only set internally but get externally
3	fileprivate(set) var authStateListenerHandle: AuthStateDidChangeListenerHandle?

Als Nächstes verbinden wir unseren View Controller so, dass beim ersten Laden ein Listener angeschlossen wird, um festzustellen, ob sich der Authentifizierungsstatus mithilfe eines Handlers ändert. Wenn sich der Auth-Status ändert, rufen wir die self.loginAction(sender: self) -Methode auf, um unseren FirebaseUI-Authentifizierungscontroller aufzurufen.

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.
        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(sender: self)
                return
            }
        }
    }

In dieser Methode instanziieren wir auch die zuvor deklarierten privaten Variablen, setzen den authUI-Delegaten auf unsere eigene Klasse und legen schließlich die Liste der anderen Anbieter fest, die wir unterstützen werden. In unserem Fall wird dies FUIPhoneAuth sein.

Wenn wir Google, Facebook oder andere Drittanbieter unterstützen möchten, können wir sie zu dieser Liste hinzufügen. Beachten Sie außerdem, dass wir E-Mail und Passwort nicht explizit angeben müssen, da dies implizit ist, sofern dies in der Firebase-Konsole aktiviert ist.

Zeigt die Login-Benutzeroberfläche an

Als Nächstes behandeln wir die loginAction()-Methode, die aufgerufen wird, wenn der Ereignislistener feststellt, dass der Benutzer derzeit nicht authentifiziert ist. In diesem Fall müssen Sie nur die modale FirebaseUI von authUI.authViewController vorlegen. Dazu gehören auch die zugehörigen Authentifizierungsanbieter, die wir zuvor deklariert haben.

Hier beginnt die Magie, da FirebaseUI alles abdeckt: den Benutzer auffordern, seine Email-Adresse einzugeben, festzustellen, ob der Benutzer existiert (in diesem Fall wird der Benutzer nach seinem Passwort gefragt) oder nach einem neuen Benutzer, der seine Benutzer abholt benennen und ein Passwort festlegen.

    @IBAction func loginAction(sender: AnyObject) {
        // Present the default login view controller provided by authUI
        let authViewController = authUI?.authViewController();
        self.present(authViewController!, animated: true, completion: nil)

    }

Wenn wir die Authentifizierungsmethoden manuell implementieren müssten, müssten wir all diese unterschiedlichen Szenarien behandeln, einschließlich des Zurücksetzens von Email-Kennwörtern usw.

Umgang mit Auth-Statusänderungen

Abschließend implementieren wir das erforderliche Protokoll für unseren FIRAuthUIDelegate-Delegierten, wodurch wir die Authentifizierungszustände abhören und handhaben können. Diese Methode wird nur fortgesetzt, wenn tatsächlich ein Fehler aufgetreten ist, aber wir können sogar erfolgreiche Authentifizierungen handhaben.

    // Implement the required protocol method for FIRAuthUIDelegate

    func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?) {
        guard let authError = error else { return }

        let errorCode = UInt((authError as NSError).code)

        switch errorCode {
        case FUIAuthErrorCode.userCancelledSignIn.rawValue:
            print("User cancelled sign-in");
            break

        default:
            let detailedError = (authError as NSError).userInfo[NSUnderlyingErrorKey] ?? authError
            print("Login error: \((detailedError as! NSError).localizedDescription)");
        }
    }

Telefonauthentifizierung einrichten

Bevor wir die App auf den Prüfstand stellen, müssen wir einige weitere Schritte hinzufügen, um die telefonbasierte Authentifizierung durchführen zu können. Bei der Telefonauthentifizierung können Benutzer ihre Telefonnummern eingeben und ihre Identität anhand einer SMS-Nachricht überprüfen, die einen Einmalcode enthält.

Um das vom Firebase-Server benötigte APNs-Token zu erhalten, implementieren Sie Folgendes in der Datei AppDelegate.swift:

1	func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
2	// Pass device token to auth
3	Auth.auth().setAPNSToken(deviceToken, type: .prod)
4	}

Da wir die Anmeldung der Telefonnummer bereits in der Firebase-Konsole aktiviert haben, müssen Sie als Nächstes FirebaseDo für den Empfang von APN s von Firebase bereitstellen. Das ist eine Aufgabe, die Sie auch ausführen würden, wenn Sie Push-Benachrichtigungen im Allgemeinen unterstützen möchten. In diesem Fall sendet Firebase jedoch eine unbeaufsichtigte Push-Benachrichtigung an das Gerät, um die Anmeldeanforderung für die Telefonnummer zu überprüfen.

Sie können diese Authentifizierungsmethode nicht über Xcode Simulator testen, sondern müssen Ihr iPhone anschließen, um die App zu installieren und auszuführen.

Wechseln Sie in Xcode zu Capabilities und aktivieren Sie Push-Benachrichtigungen. Die App stellt automatisch eine FirebaseDo.entitlements-Datei bereit und erstellt diese, wie im Projektnavigator gezeigt.

Als Nächstes erstellen wir einen Apple Push-Benachrichtigungsauthentifizierungsschlüssel, der in Firebase hochgeladen wird. Geben Sie im Apple Developer Porta l unter Keys den Namen Ihres Projekts ein und vergewissern Sie sich, dass APNs angekreuzt sind. Laden Sie die resultierende .p8-Datei herunter und notieren Sie sich die Schlüssel-ID, da wir sie in Kürze eingeben müssen.

Creating a new Key in the Developer Portal

Wechseln Sie wieder zur Firebase-Konsole, und wählen Sie unter Projekteinstellungen (Zahnradsymbol) die Registerkarte Cloud-Messaging aus. Wählen Sie unter iOS-App-Konfiguration und APNs-Authentifizierungsschlüssel die Schaltfläche Hochladen aus, und laden Sie die .p8-Datei zusammen mit der Schlüssel-ID und der App-ID hoch. Der resultierende Einstellungsbildschirm sollte folgendermaßen aussehen:

App testen

Und das ist es - wir mussten unserer App nicht viel zusätzlichen Code hinzufügen, um einen vollständigen Anmelde- und Login-Authentifizierungsworkflow einzurichten. Lassen Sie uns die App in Xcode erstellen und ausführen, um FirebaseUI in Aktion zu sehen. Wenn Sie die App zum ersten Mal ausführen, werden Sie nicht authentifiziert. Sie erhalten eine generische Vorlage mit den Authentifizierungsoptionen, die Sie in der Firebase-Konsole ausgewählt haben.

Es sieht ein bisschen langweilig aus, aber Sie können fast jeden Aspekt der Vorlage anpasse n.

Wenn Sie die Email-Adresse eines neuen Benutzers eingeben, wird der Bildschirm Konto erstellen angezeigt, in dem Sie nach Ihrem Namen und Kennwort gefragt werden.

Firebase UI authentication determining the user is new prompting for the rest of the information

Wenn Sie dieses Formular ausfüllen, werden Sie als neuer Benutzer registriert (obwohl unsere App nur einen leeren Bildschirm anzeigt). Um zu bestätigen, dass ein neuer Benutzer erstellt wurde, können Sie in der Firebase-Konsole Authentifizierung > Benutzer aufrufen.

Testen Sie jede Authentifizierungsmethode. Denken Sie daran, dass Sie sich abmelden müssen, um die Authentifizierungsaufforderung erneut auszulösen. Lösen Sie auth erneut aus, indem Sie den folgenden Code als erste Zeile in viewDidLoad() nach dem Superaufruf hinzufügen:

1	try firebaseAuth.signOut()

Dadurch wird die Anwendung in den Ausgangszustand zurückversetzt, sodass Sie die Authentifizierung per Telefon-SMS testen können. Führen Sie die App erneut aus, und wählen Sie diesmal Mit Telefon anmelden aus.

Schlussfolgerung

In diesem Lernprogramm haben Sie eine Einführung in die Verwendung von Firebase als Back-End-Plattform für Ihre App erhalten. Außerdem haben Sie erfahren, wie Benutzer mit der herkömmlichen Kombination aus E-Mail und Kennwort sowie mit Telefon und SMS authentifiziert werden wie WhatsApp.

Wir haben dann angefangen, unsere einfache FirebaseDo-App zu entwickeln, und obwohl sie noch keine der eigentlichen Erinnerungsfunktionen bietet, werden wir im nächsten Tutorial daran arbeiten. In wenigen Zeilen haben wir jedoch Folgendes erreicht:

integrierte Firebase zur Einrichtung eines Authentifizierungsmechanismus für Email und Passwort
Möglichkeit der Authentifizierung per SMS hinzugefügt
Verfolgte Authentifizierungszustände
Fehler elegant behandelt

In der restlichen Serie erhalten Sie einen Überblick über einige andere Komponenten von Firebase.

Und während Sie hier sind, lesen Sie einige der anderen Beiträge zur Entwicklung von iOS-Apps!