Erstellen von Anmelde- und Anmeldefunktionen für Ihre iOS-App mithilfe von Firebase innerhalb von 15 Minuten

Jede erstellte Anwendung ist letztendlich für die Benutzer bestimmt. Ein wichtiger Aspekt bei der Entwicklung einer iOS-App ist es, dem Benutzer das bestmögliche personalisierte Erlebnis zu bieten. Zu diesem Zweck müssen wir den Benutzern erlauben, sich in unserer iOS-App anzumelden und anzumelden. In diesem Artikel werden wir diese Funktionalität mithilfe von Firebase in unserer iOS-App erstellen.

App-Screenshot

Was ist Firebase?

Firebase ist ein One-Stop-Shop für alle Serviceanforderungen einer mobilen App. Je mehr Sie Firebase lernen, desto besser wird Ihre App.

"Firebase hilft Ihnen dabei, bessere mobile Apps zu erstellen und Ihr Unternehmen auszubauen." - Wie von Google bereits erwähnt, bietet es uns verschiedene Dienste wie Authentifizierung, Speicherung, Datenbank, Analyse für unsere App, Tests usw. Für einen iOS-App-Anmeldebildschirm werden wir dies tun Verwenden Sie die Authentifizierungsdienste von Firebase.

Die Firebase-Authentifizierung wird verwendet, um die Benutzeridentität zu überprüfen und ihnen eine personalisierte Erfahrung zu bieten. Die Authentifizierung bei Firebase kann mithilfe eines E-Mail-Passworts, einer Telefonnummer oder der Identität eines Drittanbieters wie Google, Facebook, Twitter und Github erfolgen.

Ersteinrichtung in Xcode:

Erstellen Sie ein Xcode-Projekt mit einer App-Vorlage für die Einzelansicht. Lassen Sie uns 4 View Controller erstellen:

  • StartViewController - erste Seite der App.
  • LoginViewController - der Anmeldebildschirm.
  • SignUpViewController - der Anmeldebildschirm.
  • HomeViewController - die Seite, die nach dem Anmelden des Benutzers angezeigt wird.

Stellen Sie sicher, dass Sie die entsprechenden View Controller im Interface Builder (IB) vom Storyboard aus verknüpfen.

Führen Sie die folgenden Schritte aus, nachdem Sie die 4 Ansichtscontroller erstellt haben:

  • Betten Sie den StartViewController in einen NavigationController ein.
  • Fügen Sie Anmelde- / Anmeldeschaltflächen und Textfelder in Ihrem eigenen Stil hinzu, ähnlich den im folgenden Bild gezeigten. Verbinden Sie die Textfelder und Schaltflächen in LoginViewController und SignUpViewController mit den entsprechenden SWIFT-Dateien.
  • Erstellen Sie die folgenden 5 Segmente: StartViewController zu LoginViewController, StartViewController zu SignupViewController und von StartViewController, LoginViewController, SignUpViewController zu HomeViewController. Sie können auf die Pfeile im Storyboard unten verweisen.
Interface Builder-Setup

Firebase-Setup:

  • Öffnen Sie die Firebase-Konsole.
  • Erstellen Sie ein Projekt „AwesomeProject“ und klicken Sie auf „Firebase zu Ihrer iOS-App hinzufügen“, um Ihre iOS-App hinzuzufügen. Folgen Sie dann den gegebenen Anweisungen.
Sollte so sein
  • Im letzten Schritt werden Sie aufgefordert, dem App-Delegaten Ihres Xcode-Projekts Code hinzuzufügen. Klicken Sie auf Fertig stellen. Ihr AppDelegate sollte folgendermaßen aussehen:
UIKit importieren
Firebase importieren
@UIApplicationMain
Klasse AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application (_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
         FirebaseApp.configure ()
        return true
    }
...

Firebase-Authentifizierungssetup:

Podfile
  • Öffnen Sie die Poddatei in Ihrem Projektordner und fügen Sie den Pod "Firebase / Auth" hinzu. Sie sollten im vorherigen Schritt den Pod 'Firebase / Core' hinzugefügt haben.
  • Führen Sie im Terminal $ pod install im Projektverzeichnis aus.
  • Öffnen Sie den SignUpViewController. Verbinden Sie die Textfelder von IB unter dem Namen E-Mail, Passwort und Passwortbestätigung, falls Sie dies noch nicht getan haben.
  • Fügen Sie eine Aktionsfunktion signUpAction hinzu, um die Anmeldung durchzuführen. Füge folgenden Code zur signUpAction () hinzu
@IBOutlet schwache var email: UITextField!
@IBOutlet schwaches var Passwort: UITextField!
@IBOutlet weak var passwordConfirm: UITextField!
...
@IBAction func signUpAction (_ Absender: Beliebig) {
if password.text! = passwordConfirm.text {
let alertController = UIAlertController (Titel: "Password Incorrect", Meldung: "Please re-type password", preferredStyle: .alert)
let defaultAction = UIAlertAction (Titel: "OK", Stil: .cancel, Handler: nil)
            
alertController.addAction (defaultAction)
self.present (alertController, animiert: true, Vervollständigung: nil)
        }
sonst{
Auth.auth (). CreateUser (withEmail: email.text !, Passwort: password.text!) {(Benutzer, Fehler) in
 if error == nil {
   self.performSegue (withIdentifier: "signupToHome", Absender: self)
                }
 sonst{
   let alertController = UIAlertController (Titel: "Fehler", Meldung: Fehler? .localizedDescription, preferredStyle: .alert)
   let defaultAction = UIAlertAction (Titel: "OK", Stil: .cancel, Handler: nil)
                    
    alertController.addAction (defaultAction)
    self.present (alertController, animiert: true, Vervollständigung: nil)
       }
            }
      }
}

Nehmen wir uns eine Minute Zeit, um zu verstehen, was hier passiert.

  • Im if-Zustand stellen wir sicher, dass das angegebene Passwort und das neu eingegebene Passwort identisch sind. Andernfalls erhalten Sie eine Warnmeldung mit dem Hinweis „Passwort falsch“.
  • Wenn beide gleich sind, speichern wir die Daten in der Firebase. Der folgende Code gibt die Firebase an, um einen Benutzer mit der E-Mail-Adresse und dem Kennwort aus dem Textfeld zu erstellen. Wenn ein Fehler auftritt, geben wir dem Benutzer eine Warnung aus, ansonsten führen wir eine Weiterleitung zum HomeViewController mit der Kennung „signupToHome“ durch, die wir zuvor eingerichtet haben.
Auth.auth (). CreateUser (withEmail: email.text !, Passwort: password.text!) {(Benutzer, Fehler) in
...
}
  • Fügen Sie in LoginViewController der Funktion loginAction () den folgenden Code hinzu.
@IBAction func loginAction (_ Absender: Beliebig) {
      
Auth.auth (). SignIn (withEmail: email.text !, password: password.text!) {(Benutzer, Fehler) in
   if error == nil {
     self.performSegue (withIdentifier: "loginToHome", Absender: self)
                  }
    sonst{
     let alertController = UIAlertController (Titel: "Fehler", Meldung: Fehler? .localizedDescription, preferredStyle: .alert)
     let defaultAction = UIAlertAction (Titel: "OK", Stil: .cancel, Handler: nil)
                    
      alertController.addAction (defaultAction)
      self.present (alertController, animiert: true, Vervollständigung: nil)
         }
}
        
}
  • Die verwendete Firebase-Methode lautet .signIn (withEmail: email, password: password), damit sich der Benutzer mit den Anmeldeinformationen anmeldet, die bei der Anmeldung verwendet wurden.
  • Öffnen Sie abschließend die Firebase-Konsole. Klicken Sie auf der Registerkarte "Authentifizierung" auf "Anmeldemethode" und aktivieren Sie die Option "E-Mail / Passwort".
  • Führen Sie die App jetzt aus, um zu testen, ob die Anmeldung funktioniert.
  • Aktualisieren Sie nun Firebase und unter Benutzer sehen Sie das Konto, mit dem Sie sich angemeldet haben.
  • Beachten Sie, dass Sie jedes Mal, wenn Sie die App ausführen, aufgefordert werden, Anmeldeinformationen einzugeben. Nehmen wir die letzte Ergänzung zum Code vor, damit sich die App an den Benutzer erinnert.
  • Gehen Sie zu Ihrem StartViewController und fügen Sie den folgenden Code hinzu. Mit der Eigenschaft Auth.auth (). CurrentUser wird der aktuelle Benutzer abgerufen, der beim System angemeldet ist.
Überschreibe func viewDidAppear (_ animated: Bool) {
 super.viewDidAppear (animiert)
 if Auth.auth (). currentUser! = nil {
   self.performSegue (withIdentifier: "alreadyLoggedIn", Absender: nil)
}
}
  • Um mich von der App abzumelden, habe ich eine Schaltfläche in HomeViewController hinzugefügt. Fügen Sie zur Aktion dieser Schaltfläche den folgenden Code hinzu, um sich abzumelden, und legen Sie den ViewController auf das Stammverzeichnis fest.
@IBAction func logOutAction (_ Absender: Beliebig) {
     machen {
            versuche Auth.auth (). signOut ()
        }
     catch let signOutError als NSError {
            print ("Fehler beim Abmelden:% @", signOutError)
        }
        
        let storyboard = UIStoryboard (Name: "Main", Bundle: nil)
        let initial = storyboard.instantiateInitialViewController ()
        UIApplication.shared.keyWindow? .RootViewController = initial
 }
  • Wir sind fertig. :) Starten Sie die App.

Hinweis: HomeViewController dieses Projekts ist eine Kamera, die ich in meinem vorherigen Tutorial erstellt habe. Sie könnten sich einfach für einen einfachen ViewController mit nur einer Schaltfläche für LogOut entscheiden.

Das vollständige Projekt ist über den unten genannten GitHub-Link verfügbar.

Ich freue mich über alle Rückmeldungen und Vorschläge. Wenn Sie an weiteren Tutorials interessiert sind, kommentieren Sie die Themen, die Sie interessieren, und ich kann spezielle Tutorials schreiben. Fröhliches Programmieren .. :)