Bedingte Navigation mit Anmeldung in Android

Dieses Codelab ist Teil des Kurses „Advanced Android in Kotlin“. Sie können den größten Nutzen aus diesem Kurs ziehen, wenn Sie die Codelabs der Reihe nach durcharbeiten. Das ist jedoch nicht zwingend erforderlich. Alle Codelabs des Kurses sind auf der Landingpage für Codelabs zu „Android für Fortgeschrittene mit Kotlin“ aufgeführt.

Dieses Codelab ist Teil einer Reihe, in der Sie erfahren, wie Sie die Anmeldung für Nutzer unterstützen . Wir empfehlen, alle Codelabs der Reihe nach durchzuarbeiten, da die Aufgaben Schritt für Schritt erklärt werden.

Die Codelabs in dieser Reihe sind:

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

Dieses Codelab baut auf dem Codelab Anmeldung in Android mit FirebaseUI implementieren auf. Sie können den Startercode für dieses Codelab herunterladen, auch wenn Sie das vorherige Codelab nicht durchgearbeitet haben. Es kann jedoch hilfreich sein, zuerst das Codelab Anmeldung unter Android mit FirebaseUI implementieren durchzuarbeiten.

Einführung

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

In solchen Fällen können Sie bedingte Navigation verwenden, um Nutzer je nach Authentifizierungsstatus zum entsprechenden Bildschirm zu leiten.

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

Was Sie bereits wissen sollten

• Navigationskomponente von Android und ihre Verwendung in Android-Apps
• Wie die Anmeldung in Ihrer Android-App mit der FirebaseUI-Bibliothek implementiert wird. Wenn Sie mit diesem Konzept nicht vertraut sind, sollten Sie das Codelab zur Implementierung der Anmeldung in Android mit FirebaseUI durcharbeiten.

Lerninhalte

• So leiten Sie Nutzer je nach Anmeldestatus zu den entsprechenden Bildschirmen Ihrer App weiter.

Aufgaben

• Nutzer nach der erfolgreichen Anmeldung richtig zum richtigen Bildschirm weiterleiten.
• Verhindern Sie, dass Nutzer auf den Bildschirm Einstellungen zugreifen können, wenn sie nicht angemeldet sind, und leiten Sie sie stattdessen zum Bildschirm Anmelden weiter.

Im vorherigen Codelab haben Sie an einer App gearbeitet, in der Android-Fakten angezeigt wurden. Ihre App ermöglichte es Nutzern auch, sich an- und abzumelden. In diesem Codelab fügen Sie der vorhandenen App einen Einstellungsbildschirm hinzu. Der Einstellungsbildschirm ist nur für Nutzer zugänglich, die angemeldet sind.

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

Dieses Codelab baut auf dem Codelab Anmeldung in Android mit FirebaseUI implementieren auf. Sie können den Startercode für dieses Codelab herunterladen, auch wenn Sie das vorherige Codelab nicht durchgearbeitet haben. Es kann jedoch hilfreich sein, zuerst das Codelab Anmeldung unter Android mit FirebaseUI implementieren durchzuarbeiten.

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 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.

Wenn Sie das Projekt in Android Studio geladen haben, gehen Sie so vor:

1. Führen Sie die App auf einem Emulator oder physischen Gerät aus, um zu prüfen, ob Ihre Umgebung für den Beginn der Entwicklung eingerichtet wurde.

Wenn der Vorgang erfolgreich war, sollte auf dem Startbildschirm ein interessanter Android-Fakt und links oben eine Anmeldeschaltfläche angezeigt werden.

Aktuelle Funktionen der Starter-App:

• Wenn der Nutzer nicht angemeldet ist, wird durch Tippen 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.

In dieser Aufgabe fügen Sie dem Startbildschirm eine Schaltfläche hinzu, über die der Nutzer zu den Einstellungen wechseln kann. Auf dem Einstellungsbildschirm kann der Nutzer auswählen, welche Art von interessanten Fakten auf dem Startbildschirm angezeigt werden soll. Auf dem Einstellungsbildschirm können sie entweder Fakten zu Android oder Fakten zum Bundesstaat Kalifornien aufrufen.

1. Öffnen Sie fragment_main.xml.
2. Fügen Sie in fragment_main.xml, eine Schaltfläche Einstellungen ein, die in ConstraintLayout verschachtelt ist, und positionieren Sie sie oben rechts 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ügen Sie eine Aktion in mainFragment ein. Der 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. Legen Sie in onViewCreated() eine onClickListener für settings_btn fest, damit der Nutzer durch Tippen auf die Schaltfläche zu customizeFragment weitergeleitet wird.

MainFragment.kt

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

7. Wenn Sie nicht behobene Fehler sehen, kompilieren Sie die App noch einmal über das Menü Build, um die neuen Navigationsaktionen zu generieren und zu verwenden, die Sie erstellt haben.
8. Starten Sie die App neu. Oben rechts sollte jetzt eine funktionierende Schaltfläche Einstellungen angezeigt werden.
9. Klicken Sie auf die Schaltfläche, die Sie zum Bildschirm Einstellungen führt. Auf dem Bildschirm Einstellungen gibt es nur eine Option, mit der der Nutzer auswählen kann, welche Art von Fun Fact auf dem Startbildschirm angezeigt werden soll.
10. Klicken Sie auf die Zurück-Taste des Android-Geräts, um zum Startbildschirm zurückzukehren.

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

1. Öffnen Sie SettingsFragment.kt.
2. Beobachten Sie in onViewCreated() die authenticationState und leiten Sie den Nutzer zu 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 der Nutzer zur Anmeldeseite weitergeleitet wird, wenn er versucht, auf die Einstellungsseite zuzugreifen, muss die App auch das Verhalten der Schaltfläche „Zurück“ auf der Anmeldeseite verarbeiten. Wenn die App das Verhalten der Zurück-Schaltfläche nicht anpasst, würde der Nutzer in einer Endlosschleife gefangen sein, in der er versucht, zum Einstellungsbildschirm zurückzukehren, aber dann wieder zum Anmeldebildschirm weitergeleitet wird.

3. Öffnen Sie LoginFragment.kt.
4. In onViewCreated() sollten Sie Aktionen für die Zurück-Schaltfläche so verarbeiten, dass der Nutzer zur MainFragment zurückkehrt.
   

LoginFragment.kt

// 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. Starten Sie die App neu und bestätigen Sie, dass Sie bei Versuchen, auf den Einstellungsbildschirm zuzugreifen, nun zum Anmeldevorgang weitergeleitet werden, wenn Sie nicht angemeldet sind.

Sie haben den Nutzer zwar erfolgreich zur Anmeldung weitergeleitet, aber nicht festgelegt, was nach der erfolgreichen Anmeldung passieren soll. Daher sieht es so aus, als ob die Anmeldung nicht funktioniert. Sie beheben das Problem im nächsten Schritt.

Bisher haben Sie Ihre App so eingerichtet, dass der Nutzer zum Anmeldebildschirm weitergeleitet wird, wenn er versucht, auf den Einstellungsbildschirm zuzugreifen, ohne angemeldet zu sein.

Nachdem Sie den Anmeldevorgang durchlaufen haben, werden Sie jedoch wieder zum Anmeldebildschirm zurückgeleitet. Das ist nicht nutzerfreundlich und kann verwirrend sein.

Damit die Nutzerfreundlichkeit gewährleistet ist, sollte der Nutzer nach erfolgreicher Anmeldung in der App zum Einstellungsbildschirm zurückgeleitet werden.

1. Beobachte weiterhin LoginFragment.kt, überall in onViewCreated(), die authenticationState und leite den Nutzer nach erfolgreicher Authentifizierung zurück zu SettingsFragment.

LoginFragment.kt

// 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 einer erfolgreichen Anmeldung jetzt auf der Seite Einstellungen statt auf der Seite Anmelden landen.

Backstack mit popBackStack() entfernen: Während der Nutzer eine App verwendet, verfolgt Android die besuchten Bildschirme. Wenn der Nutzer die Schaltfläche „Zurück“ drückt, durchläuft die App die besuchten Bildschirme in umgekehrter Reihenfolge.

Wenn Sie einen Bildschirm aus dem Backstack entfernen, weisen Sie Android im Grunde an, diesen Bildschirm zu überspringen, wenn der Nutzer die Schaltfläche „Zurück“ drückt.

In diesem Fall wird der aktuelle Bildschirm aus dem Backstack entfernt. Wenn der Nutzer also die Zurück-Taste drückt, wird dieser Bildschirm übersprungen und die App kehrt zum Bildschirm zurück, den der Nutzer vor diesem Bildschirm besucht hat.

Wenn der Nutzer also auf die Schaltfläche „Zurück“ drückt, wird nicht der Anmeldebildschirm, sondern der Bildschirm aufgerufen, den der Nutzer vor dem Anmeldebildschirm besucht hat.

Die vollständige App mit dem gesamten Lösungscode finden Sie in diesem GitHub-Repository: https://github.com/googlecodelabs/android-kotlin-login-navigation.

In diesem Codelab haben Sie Best Practices für die Gestaltung einer guten Nutzererfahrung in einer App kennengelernt, die die Anmeldung unterstützt. Anhand des Authentifizierungsstatus der App können Sie feststellen, auf welche Bildschirme der Nutzer zugreifen kann, und ihn bei Bedarf zum Anmeldebildschirm weiterleiten.

Weitere Informationen zu Best Practices für die Navigation in Android finden Sie in den folgenden Ressourcen:

Android-Entwicklerdokumentation:

• Navigation in Android
• Bedingte Navigation
• Globale Navigationsaktionen

Codelabs:

• Grundlagen von Android und Kotlin: Navigationspfade definieren

Links zu anderen Codelabs in diesem Kurs finden Sie auf der Landingpage für Codelabs zum Thema „Android für Fortgeschrittene mit Kotlin“.