Bedingte Android-Navigation mit Anmeldung

Dieses Codelab ist Teil des Kurses „Advanced Android in Kotlin“. Sie profitieren von diesem Kurs, wenn Sie die Codelabs nacheinander durcharbeiten. Das ist aber nicht zwingend erforderlich. Alle Kurs-Codelabs finden Sie auf der Landingpage für Codelabs auf Android-Geräten für Fortgeschrittene.

Dieses Codelab ist Teil einer Reihe, die dich durch die Anmeldung für Nutzer unterstützt . Wir empfehlen, alle Codelabs in der richtigen Reihenfolge durchzugehen, da sie Schritt für Schritt ausgeführt werden.

Die Codelabs in dieser Reihe sind:

• 6.1 Android-Anmeldung mit FirebaseUI
• 6.2 Bedingte Navigation mit Android und Anmeldung

Dieses Codelab baut auf dem Artikel Login on Android with FirebaseUI auf. Sie können den Startcode für dieses Codelab herunterladen, falls Sie das vorherige Codelab noch nicht ausgeführt haben. Es kann aber sinnvoll sein, zuerst das Codelab Login on Android with FirebaseUI implementieren durchzuführen.

Einführung

Wenn Ihre App die Anmeldung unterstützt, ist es ein häufiger Anwendungsfall, die Teile der App nur für angemeldete Nutzer zu reservieren. Sie können beispielsweise den Bildschirm Einstellungen Ihrer App für angemeldete Nutzer reservieren.

In solchen Fällen können Sie die bedingte Navigation verwenden, um Nutzer auf der Grundlage ihres Authentifizierungsstatus zum entsprechenden Bildschirm weiterzuleiten.

In diesem Codelab gebaut Sie auf einer vorhandenen App, um einen Einstellungsbildschirm hinzuzufügen, auf den Nutzer nur zugreifen können, wenn sie angemeldet sind. Für diese Aufgabe verwenden Sie Navigationskomponenten von Android.

Was Sie bereits wissen sollten

• Android-Navigationskomponente und Verwendung in Android-Apps
• Informationen zur Implementierung der Anmeldung in der Android-App mit der FirebaseUI-Bibliothek Wenn Sie mit diesem Konzept nicht vertraut sind, sollten Sie das Codelab zur Implementierung von Log-ins auf Android mit FirebaseUI lesen.

Lerninhalte

• Nutzer gelangen zum entsprechenden Bildschirm Ihrer App, je nachdem, ob sie angemeldet sind oder nicht.

Aufgaben

• Sie sollten die Nutzer nach der Anmeldung korrekt zum richtigen Bildschirm bewegen.
• Verhindern Sie, dass Nutzer auf den Bildschirm Einstellungen zugreifen, wenn sie nicht angemeldet sind, und leiten Sie sie stattdessen zum Bildschirm Anmelden weiter.

Im vorherigen Codelab hast du an einer App gearbeitet, in der Android-Fakten angezeigt werden. Außerdem konnten sich Nutzer in Ihrer App anmelden und abmelden. Für dieses Codelab fügst du der vorhandenen App einen Einstellungsbildschirm hinzu. Der Einstellungsbildschirm ist nur verfügbar, wenn der Nutzer angemeldet ist.

Wenn der Nutzer nicht angemeldet ist und er versucht, auf den Einstellungsbildschirm zuzugreifen, wird er von der App zum Anmeldebildschirm weitergeleitet. Sobald der Anmeldevorgang erfolgreich abgeschlossen ist, wird der Nutzer zum Einstellungsbildschirm weitergeleitet, auf den er ursprünglich zugreifen wollte.

Dieses Codelab baut auf dem Artikel Login Login on Android with FirebaseUI auf. Sie können den Startcode für dieses Codelab herunterladen, falls Sie das vorherige Codelab noch nicht ausgeführt haben. Es kann aber sinnvoll sein, zuerst das Codelab Login on Android with FirebaseUI implementieren durchzuführen.

Sie haben folgende Möglichkeiten, die Beispiel-App herunterzuladen:

Zip herunterladen

... oder klonen Sie das GitHub-Repository über die Befehlszeile mit dem folgenden Befehl und wechseln Sie dann zum Zweig start des Repositorys:

$  git clone https://github.com/googlecodelabs/android-kotlin-login-navigation

Wichtig:Der Startcode befindet sich im start-Branch des heruntergeladenen Repositorys.

Sobald das Projekt in Android Studio geladen ist, gehen Sie so vor:

1. Führen Sie die App auf einem Emulator oder physischen Gerät aus, um sicherzugehen, dass Ihre Umgebung für die Entwicklung eingerichtet wurde.

Wenn dies erfolgreich war, sollte der Startbildschirm eine lustige Android-Fassade und eine Anmeldeschaltfläche links oben anzeigen.

Aktuelle Funktionen der Start-App:

• Falls der Nutzer nicht angemeldet ist, wird durch Klicken auf die Schaltfläche Anmelden der Anmeldevorgang gestartet und der Nutzer kann sich mit einer E-Mail-Adresse oder einem Google-Konto anmelden.
• Wenn der Nutzer angemeldet ist, ändert sich die Schaltfläche zu Abmelden, sodass sich der Nutzer abmelden kann.

Bei dieser Aufgabe fügen Sie eine Schaltfläche auf dem Startbildschirm hinzu, über die der Nutzer zum Einstellungsbildschirm gelangt. Auf dem Einstellungsbildschirm kann der Nutzer selbst auswählen, welche lustigen Informationen er auf dem Startbildschirm sehen möchte. In den Einstellungen können sie Informationen zu Android oder Fakten zum US-Bundesstaat Kalifornien aufrufen.

1. Öffnen Sie fragment_main.xml.
2. Fügen Sie in fragment_main.xml, eine Schaltfläche Einstellungen hinzu, die in ConstraintLayout verschachtelt ist, und positionieren Sie sie rechts oben auf dem Bildschirm.

fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

3. Öffnen Sie nav_graph.xml.
4. Füge eine Aktion innerhalb von mainFragment hinzu. id der Aktion ist action_mainFragment_to_customizeFragment und das Ziel ist customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

5. Öffnen Sie MainFragment.kt.
6. Lege in onViewCreated() einen onClickListener für settings_btn fest, sodass der Nutzer durch Tippen auf die Schaltfläche zu customizeFragment gelangt.

Hauptfragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

7. Wenn Sie ungelöste Fehler sehen, kompilieren Sie die App über das Menü Build neu, um die neu erstellten Navigationsaktionen zu generieren und zu verwenden.
8. Starten Sie die App neu. Die Schaltfläche Einstellungen sollte sich rechts oben befinden.
9. Klicken Sie auf die Schaltfläche, um zum Bildschirm Einstellungen zu gelangen. Auf dem Bildschirm Einstellungen gibt es nur eine Option, mit der Nutzer selbst auswählen können, welche Art von Fakten sie auf dem Startbildschirm sehen möchten.
10. Klicke auf die Schaltfläche „Zurück“ des Android-Geräts, um zum Startbildschirm zurückzukehren.

In dieser Aufgabe fügen Sie Code hinzu, um den Nutzer zum Anmeldebildschirm zu bewegen, wenn er versucht, auf den Einstellungsbildschirm zuzugreifen, wenn er nicht angemeldet ist.

1. Öffnen Sie SettingsFragment.kt.
2. Beobachten Sie in onViewCreated() den authenticationState und leiten Sie den Nutzer an LoginFragment weiter, wenn er nicht authentifiziert ist.

SettingsFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

Da die App den Nutzer zum Anmeldebildschirm weiterleitet, wenn er versucht, auf den Einstellungsbildschirm zuzugreifen, muss die App auch die Schaltfläche „Zurück“ auf dem Anmeldebildschirm handhaben. Würde die App die Reaktion auf die Schaltfläche „Zurück“ nicht anpassen, steckte der Nutzer in einer Endlosschleife, bevor er zum Einstellungsbildschirm zurückkehrte, dann wurde er jedoch zum Anmeldebildschirm zurückgeleitet.

3. Öffnen Sie LoginFragment.kt.
4. In onViewCreated() kannst du Aktionen für die Schaltfläche „Zurück“ verwalten, indem der Nutzer zu MainFragment weitergeleitet wird.
   

LoginFragment.kt-DE

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

5. Starte deine App neu und überprüfe, ob du jetzt, wenn du nicht angemeldet bist, zum Einstellungsbildschirm weitergeleitet wirst.

Nachdem Sie den Nutzer zur Anmeldung weitergeleitet haben, den Vorgang anschließend jedoch nicht abgeschlossen haben, sodass Anmeldeversuche so aussehen, als ob sie nicht funktionieren. Dieses Problem wird im nächsten Schritt behoben.

Bislang hast du deine App erfolgreich so eingerichtet, dass der Nutzer auf den Anmeldebildschirm weitergeleitet wird, wenn er versucht, auf den Einstellungsbildschirm zuzugreifen, ohne angemeldet zu sein.

Nach der Anmeldung werden Sie jedoch wieder zum Anmeldebildschirm zurückgeleitet. Dies ist nicht nutzerfreundlich und kann verwirrend sein.

Die App sollte den Nutzer nach der Anmeldung zurück zum Einstellungsbildschirm zurückbringen, um eine optimale Nutzererfahrung zu ermöglichen.

1. Sehen Sie sich an beliebigen Stellen in onViewCreated() in LoginFragment.kt an, wie die authenticationState aussehen und ob der Nutzer bei der Authentifizierung wieder zu SettingsFragment zurückkehrt.

LoginFragment.kt-DE

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

2. Führen Sie Ihre App noch einmal aus und prüfen Sie, ob Sie nach der Anmeldung auf der Seite Settings (Einstellungen) statt auf Login (Anmelden) landen.

Pop-Stack mit PopBackStack() füllen: Wenn der Nutzer eine App verwendet, erfasst Android die Bildschirme, die er besucht. Wenn der Nutzer auf die Schaltfläche „Zurück“ tippt, kehrt die App der Reihe nach durch die besuchten Bildschirme.

Wenn Sie einen Bildschirm vom Backstack entfernen, legen Sie fest, dass Android diesen Bildschirm überspringen soll, wenn der Nutzer die Zurück-Taste drückt.

In diesem Fall entfernt du den aktuellen Bildschirm aus dem Back-Stack. Wenn der Nutzer dann auf die Schaltfläche „Zurück“ drückt, überspringt die App den Bildschirm und kehrt zu dem Bildschirm zurück, den der Nutzer besucht hat, bevor er diesen Bildschirm besucht.

Anders gesagt: Wenn der Nutzer die Schaltfläche „Zurück“ drückt, wird die App nicht zum Anmeldebildschirm zurückgeleitet, sondern zu dem Bildschirm, den der Nutzer besucht hat, bevor er zum Anmeldebildschirm gelangt ist.

Unter diesem Link finden Sie die vollständige App mit dem gesamten Lösungscode: https://github.com/googlecodelabs/android-kotlin-login-navigation.

In diesem Codelab haben Sie Best Practices für eine gute Nutzererfahrung in einer App kennengelernt, die die Anmeldung unterstützt. Durch die Beobachtung des Authentifizierungsstatus der App konnten Sie ermitteln, auf welche Bildschirme der Nutzer zugreifen kann, und ihn bei Bedarf zum Anmeldebildschirm weiterleiten.

Weitere Informationen zur Navigation in Android findest du in den folgenden Ressourcen:

Android-Entwicklerdokumentation:

• Navigation in Android
• Bedingte Navigation
• Globale Navigation – Aktionen

Codelabs:

• Android Kotlin Fundamentals: Navigationspfade definieren

Links zu weiteren Codelabs in diesem Kurs finden Sie auf der Landingpage des erweiterten Android-Tools in Kotlin.