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.
Einführung
Die Entwicklung einer Android-App bietet viele Vorteile. Wenn Sie Nutzern die Möglichkeit bieten, in Ihrer App eine Identität zu erstellen, bieten Sie Ihnen mehr Möglichkeiten, mit der App zu interagieren.
Mit personalisierten Konten können Nutzer die In-App-Nutzung anpassen, mit anderen Nutzern interagieren und ihre Daten dauerhaft speichern und übertragen, wenn sie die App auf einem anderen Gerät verwenden, z. B. auf einem Web oder einem neuen Smartphone.
In diesem Codelab lernen Sie die Grundlagen der Anmeldung mit Ihrer Firebase-Bibliothek kennen. Die FirebaseUI-Bibliothek erleichtert u. a. die Arbeit mit Entwicklerkonten, die einen Anmeldevorgang erstellen möchten.
Was Sie bereits wissen sollten
- Grundlagen zum Entwickeln einer Android-App
- LiveData und ViewModel
Lerninhalte
- Firebase Ihrem Projekt hinzufügen
- Anmeldung bei der Android-App unterstützen
- Aktuellen Authentifizierungsstatus Ihrer App beobachten
- Nutzer abmelden
Aufgaben
- Verwenden Sie die Firebase Console, um Firebase in Ihre App einzubinden.
- Implementiere die Anmeldefunktion.
- Du kannst in der App Anpassungen für angemeldete Nutzer vornehmen.
- Melden Sie Nutzer ab.
Weitere Informationen zu LiveData und ViewModel
Für die App in diesem Codelab benötigen Sie ein grundlegendes Verständnis von LiveData und ViewModel. Einen kurzen Überblick über diese Konzepte erhalten Sie mit den Übersichten für LiveData und ViewModel.
Sie können auch den Kurs „Android-Apps mit Kotlin entwickeln“ betrachten, um mehr über grundlegende Android-Themen zu erfahren, die Sie im Rahmen dieses Codelabs kennenlernen werden. Dieser Kurs ist als Udacity-Kurs und als Codelab-Kurs verfügbar.
In diesem Codelab erstellen Sie eine App, in der unterhaltsame Android-Fakten angezeigt werden. Noch wichtiger ist, dass die App die Schaltfläche Anmelden/Abmeldung hat. Wenn der Nutzer in der App angemeldet ist, wird bei jeder Meldung über Android eine Begrüßung angezeigt, um dem Nutzer eine Personalisierung zu ermöglichen.
Sie haben folgende Möglichkeiten, die Beispiel-App herunterzuladen:
... oder das GitHub-Repository mit dem folgenden Befehl über die Befehlszeile klonen und zum Zweig start
des Repositorys wechseln:
$ git clone https://github.com/googlecodelabs/android-kotlin-login
Wichtig: Da Sie die App in Firebase einbinden möchten, müssen Sie die App starten. Dies führst du im nächsten Schritt des Codelabs aus.
Schritt 1: Firebase-Projekt erstellen
Bevor Sie Firebase zu Ihrer Android-App hinzufügen können, müssen Sie ein Firebase-Projekt erstellen, das mit Ihrer Android-App verbunden wird.
- Klicken Sie in der Firebase Console auf Projekt hinzufügen.
- Wählen Sie einen Projektnamen aus oder geben Sie einen ein. Sie können Ihrem Projekt einen beliebigen Namen geben, aber versuchen, einen Namen zu wählen, der für die App relevant ist, die Sie erstellen.
- Klicken Sie auf Weiter.
- Sie können das Einrichten von Google Analytics überspringen und die Option Nicht jetzt auswählen.
- Klicken Sie auf Projekt erstellen, um die Einrichtung des Firebase-Projekts abzuschließen.
Schritt 2: App bei Firebase registrieren
Nachdem Sie nun ein Firebase-Projekt haben, können Sie Ihre Android-App hinzufügen.
- Klicken Sie in der Mitte der Projektübersichtsseite von Firebase auf das Symbol Android, um den Einrichtungsworkflow zu starten.
- Geben Sie im Feld Android-Paketname die App-ID Ihrer App ein. Achten Sie darauf, die ID einzugeben, die Ihre App verwendet, da Sie diesen Wert nicht hinzufügen oder ändern können, nachdem Sie Ihre App in Ihrem Firebase-Projekt registriert haben.
- Eine Anwendungs-ID wird manchmal als Paketname bezeichnet.
- Suchen Sie die Anwendungs-ID in der Gradle-Datei des Moduls (auf App-Ebene), normalerweise
app/build.gradle
(Beispiel-ID:com.yourcompany.yourproject
). - Geben Sie das SHA-1-Zertifikat für das Debug-Signaturzertifikat ein. Sie können diesen Schlüssel generieren, indem Sie den folgenden Befehl in Ihr Befehlszeilenterminal eingeben.
keytool -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v -storepass android
- Klicken Sie auf App registrieren.
Schritt 3: Firebase-Konfigurationsdatei zu einem Projekt hinzufügen
Fügen Sie Ihrer App die Firebase-Android-Konfigurationsdatei hinzu:
- Klicken Sie auf google-services.json herunterladen, um Ihre Firebase-Android-Konfigurationsdatei (
google-services.json
) abzurufen.
- Sie können Ihre Firebase-Android-Konfigurationsdatei jederzeit herunterladen.
- Die Konfigurationsdatei darf keine zusätzlichen Zeichen enthalten und darf nur den Namen
google-services.json
haben.
- Verschieben Sie Ihre Konfigurationsdatei in das Modulverzeichnis Ihrer App.
Schritt 4: Android-Projekt konfigurieren, um Firebase-Produkte zu aktivieren
- Wenn Sie Firebase-Produkte in Ihrer App aktivieren möchten, fügen Sie Ihren Gradle-Dateien das Google-Dienste-Plug-in hinzu.
- In Ihrer Gradle-Datei auf Stammebene (auf Projektebene) (
build.gradle
) fügen Sie Regeln hinzu, um das Google-Dienste-Plug-in einzuschließen. Prüfen Sie, ob Sie auch das Maven-Repository von Google haben.
build.gradle
buildscript {
repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
}
dependencies {
// ...
// Add the following line:
classpath 'com.google.gms:google-services:4.3.0' // Google Services plugin
}
}
allprojects {
// ...
repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
// ...
}
}
- Fügen Sie in der Gradle-Datei des Moduls (auf App-Ebene) (normalerweise
app/build.gradle
) eine Zeile am Ende der Datei ein.
app/build.gradle
apply plugin: 'com.android.application'
android {
// ...
}
// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services' // Google Play services Gradle plugin
Schritt 4: Firebase-Abhängigkeit hinzufügen
Der Hauptgrund für die Einbindung von Firebase besteht darin, Nutzer zu erstellen und zu verwalten. Dazu müssen Sie eine Firebase-Bibliothek hinzufügen, mit der Sie sich anmelden können.
- Fügen Sie die folgende Abhängigkeit in Ihre
build.gradle (Module:app)
-Datei ein, damit Sie das SDK in Ihrer App verwenden können. Dasfirebase-auth
SDK ermöglicht die Verwaltung authentifizierter Nutzer Ihrer App.
app/build.gradle:
implementation 'com.firebaseui:firebase-ui-auth:5.0.0'
- Synchronisieren Sie Ihr Projekt mit Gradle-Dateien, um dafür zu sorgen, dass alle Abhängigkeiten für Ihre App verfügbar sind. Falls Sie nicht dazu aufgefordert werden, wählen Sie File > Sync Project with Gradle Files in Android Studio oder in der Symbolleiste aus.
Schritt 5: App ausführen und Code prüfen
- Führen Sie die App auf einem Emulator oder physischen Gerät aus, um sicherzugehen, dass Ihre Umgebung für die Entwicklung eingerichtet ist.
Wenn dies erfolgreich war, sollte der Startbildschirm eine lustige Android-Fassade und eine Anmeldeschaltfläche links oben anzeigen. Wenn du auf die Schaltfläche zum Anmelden tippst, passiert noch nichts.
Auf übergeordneter Ebene ist dies eine App mit einer einzigen Aktivität und mehreren Fragmenten. MainFragment
enthält alle UI-Elemente, die Sie auf dem Bildschirm unten sehen. (Sie arbeiten mit den LoginFragment
und den SettingsFragment
in einem Folge-Codelab.)
- Mach dich mit dem Code vertraut. Beachten Sie insbesondere Folgendes:
FirebaseUserLiveData
ist die Klasse, die Sie implementieren, um den aktuellen Firebase-Nutzer zu beobachten, der mit der App verknüpft ist. Sie verwenden die InstanzFirebaseAuth
als Einstiegspunkt, um diese Nutzerinformationen in einem späteren Schritt abzurufen.- Der
MainFragment
ist mit demLoginViewModel
verknüpft.LoginViewModel
ist die Klasse, die Sie implementieren, um mitFirebaseUserLiveData
eine VariableauthenticationState
zu erstellen. Mit dieserauthenticationState
-Variable kannMainFragment
dann den Wert beobachten, um die UI entsprechend zu aktualisieren.
In diesem Schritt richten Sie mit der Firebase Console die Authentifizierungsmethoden ein, die Ihre App unterstützen soll. Bei diesem Codelab konzentrieren Sie sich darauf, dass sich Nutzer mit einer von ihnen angegebenen E-Mail-Adresse oder dem Google-Konto anmelden können.
- Rufen Sie die Firebase Console auf. Hinweis: Wenn Sie sich noch im Workflow zum Hinzufügen von Firebase befinden, klicken Sie links oben auf das X, um zur Konsole zurückzukehren.
- Wählen Sie Ihr Projekt aus, wenn Sie sich noch nicht in Ihrem Projekt befinden.
- Öffnen Sie den Navigationsbereich links und wählen Sie Authentifizierung entwickeln aus.
- Wählen Sie oben in der Navigationsleiste den Tab Anmeldemethode aus.
- Klicken Sie auf die Zeile Email/Password.
- Klicken Sie im Pop-up auf den Schieberegler Aktiviert und dann auf Speichern.
- Klicken Sie dann auf die Zeile Google.
- Stelle den Schalter Aktiviert ein, gib eine E-Mail-Adresse für den Projektsupport ein und klicke auf Speichern.
In dieser Aufgabe implementieren Sie die Anmeldefunktion für Ihre Nutzer.
- Öffnen Sie
MainFragment.kt
. - Beachten Sie im Layout von
MainFragment
dasauth_button
. Es ist zurzeit nicht für Nutzereingaben eingerichtet. - Fügen Sie in
onViewCreated(),
einonClickListener
zuauth_button
hinzu, umlaunchSignInFlow()
aufzurufen.
Hauptfragment.kt
binding.authButton.setOnClickListener { launchSignInFlow() }
- Suchen Sie die Methode
launchSignInFlow()
inMainFragment.kt
. Es enthält derzeit einenTODO
. - Vervollständigen Sie die Funktion
launchSignInFlow()
wie unten beschrieben.
Hauptfragment.kt
private fun launchSignInFlow() {
// Give users the option to sign in / register with their email or Google account.
// If users choose to register with their email,
// they will need to create a password as well.
val providers = arrayListOf(
AuthUI.IdpConfig.EmailBuilder().build(), AuthUI.IdpConfig.GoogleBuilder().build()
// This is where you can provide more ways for users to register and
// sign in.
)
// Create and launch sign-in intent.
// We listen to the response of this activity with the
// SIGN_IN_REQUEST_CODE
startActivityForResult(
AuthUI.getInstance()
.createSignInIntentBuilder()
.setAvailableProviders(providers)
.build(),
MainFragment.SIGN_IN_REQUEST_CODE
)
}
Dies ermöglicht Nutzern, sich mit ihrer E-Mail-Adresse oder ihrem Google-Konto anzumelden. Wenn sich der Nutzer mit seiner E-Mail-Adresse registriert, ist die von ihm erstellte Kombination aus E-Mail-Adresse und Passwort eindeutig für Ihre App. Er kann sich also mit Ihrer E-Mail-Adresse und Kennwort in Ihrer App anmelden, bedeutet aber nicht, dass er sich mit denselben Anmeldedaten auch in anderen von Firebase unterstützten Apps anmelden kann.
- In
MainFragment.kt
kannst du das Ergebnis der Anmeldung beobachten, indem du die MethodeonActivityResult()
implementierst (siehe unten). Da Sie den Anmeldevorgang mitSIGN_IN_REQUEST_CODE
gestartet haben, können Sie sich auch das Ergebnis des Anmeldevorgangs anhören, indem Sie filtern, wannSIGN_IN_REQUEST_CODE
anonActivityResult()
zurückgegeben wird. Als Erstes sollten Sie einige Loganweisungen haben, um zu wissen, ob der Nutzer sich angemeldet hat.
Hauptfragment.kt
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == SIGN_IN_REQUEST_CODE) {
val response = IdpResponse.fromResultIntent(data)
if (resultCode == Activity.RESULT_OK) {
// User successfully signed in
Log.i(TAG, "Successfully signed in user ${FirebaseAuth.getInstance().currentUser?.displayName}!")
} else {
// Sign in failed. If response is null the user canceled the
// sign-in flow using the back button. Otherwise check
// response.getError().getErrorCode() and handle the error.
Log.i(TAG, "Sign in unsuccessful ${response?.error?.errorCode}")
}
}
}
Deine App sollte jetzt in der Lage sein, Nutzer zu registrieren und sich anzumelden.
- Führen Sie die App aus und prüfen Sie, ob der Anmeldebildschirm angezeigt wird, wenn Sie auf die Schaltfläche Anmelden tippen.
- Sie können sich jetzt mit Ihrer E-Mail-Adresse und einem Passwort oder mit Ihrem Google-Konto anmelden.
- Nach der Anmeldung ändert sich nichts an der Benutzeroberfläche. Im nächsten Schritt wird die Benutzeroberfläche aktualisiert. Wenn jedoch alles ordnungsgemäß funktioniert, sollte nach dem Registrierungsvorgang die Meldung
Successfully signed in user ${your name}!
angezeigt werden. - Sie können auch die Firebase Console aufrufen und zu Entwicklung > Authentifizierung &Nutzer gehen, um zu prüfen, ob es für die App jetzt einen registrierten Nutzer gibt.
- Wenn Nutzer ein Konto für Ihre App erstellen, ist dieses Konto ausschließlich mit Ihrer App und nicht mit einer App verknüpft, die Firebase für die Anmeldung verwendet.
Bei dieser Aufgabe implementieren Sie die UI gemäß dem Authentifizierungsstatus. Wenn der Nutzer angemeldet ist, können Sie den Startbildschirm personalisieren, indem Sie seinen Namen anzeigen. Wenn der Nutzer angemeldet ist, ändert sich auch die Schaltfläche Log-in zu Abmelden.
- Öffnen Sie den Kurs
FirebaseUserLiveData.kt
, der bereits für Sie erstellt wurde. Als Erstes müssen Sie anderen Kursen in der App mitteilen, wann sich ein Nutzer an- oder abgemeldet hat. Die Klasse tut jedoch noch nichts, da der Wert vonLiveData
nicht aktualisiert wird. - Da du die
FirebaseAuth
-Bibliothek verwendest, kannst du Änderungen an dem angemeldeten Nutzer mit demFirebaseUser.AuthStateListener
-Callback anhören, der als Teil der FirebaseUI-Bibliothek für dich implementiert wurde. Dieser Callback wird ausgelöst, wenn sich ein Nutzer in Ihrer App an- oder abmeldet. - Beachten Sie, dass
FirebaseUserLiveData.kt
die VariableauthStateListener
definiert. Mit dieser Variablen wird der Wert vonLiveData
gespeichert. Die VariableauthStateListener
wurde erstellt, damit Sie Änderungen des Authentifizierungsstatus basierend auf dem Status Ihrer Anwendung richtig starten und beenden können. Wenn ein Nutzer beispielsweise die App in den Hintergrund verschiebt, sollte die App nicht mehr auf Änderungen im Authentifizierungsstatus reagieren, um potenzielle Speicherlecks zu vermeiden. - Aktualisiere
authStateListener
, sodass der Wert vonFirebaseUserLiveData
dem aktuellen Firebase-Nutzer entspricht.
FirebaseUserLiveData.kt
private val authStateListener = FirebaseAuth.AuthStateListener { firebaseAuth ->
value = firebaseAuth.currentUser
}
- Öffnen Sie
LoginViewModel.kt
. - Erstellen Sie in
LoginViewModel.kt
eineauthenticationState
-Variable basierend auf demFirebaseUserLiveData
-Objekt, das Sie gerade implementiert haben. Durch Erstellen dieserauthenticationState
-Variable können andere Klassen jetzt abfragen, ob der Nutzer über dieLoginViewModel
angemeldet ist.
LoginViewModel.kt erfasst.
val authenticationState = FirebaseUserLiveData().map { user ->
if (user != null) {
AuthenticationState.AUTHENTICATED
} else {
AuthenticationState.UNAUTHENTICATED
}
}
MainFragment.kt.
öffnen- In
MainFragment.kt
undobserveAuthenticationState()
können Sie dieauthenticationState
-Variable verwenden, die Sie gerade inLoginViewModel
hinzugefügt haben, und die UI entsprechend ändern. Wenn es einen angemeldeten Nutzer gibt, sollteauthButton
Abmelden anzeigen.
Hauptfragment.kt
private fun observeAuthenticationState() {
val factToDisplay = viewModel.getFactToDisplay(requireContext())
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
when (authenticationState) {
LoginViewModel.AuthenticationState.AUTHENTICATED -> {
binding.authButton.text = getString(R.string.logout_button_text)
binding.authButton.setOnClickListener {
// TODO implement logging out user in next step
}
// TODO 2. If the user is logged in,
// you can customize the welcome message they see by
// utilizing the getFactWithPersonalization() function provided
}
else -> {
// TODO 3. Lastly, if there is no logged-in user,
// auth_button should display Login and
// launch the sign in screen when clicked.
}
}
})
}
- Wenn der Nutzer angemeldet ist, kannst du die Willkommensnachricht außerdem anpassen. Verwende dazu die Funktion
getFactWithPersonalization()
inMainFragment
.
Hauptfragment.kt
binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
- Wenn kein angemeldeter Nutzer vorhanden ist,
authenticationState
beispielsweise alsLoginViewModel.AuthenticationState.AUTHENTICATED
festgelegt ist, sollteauth_button
Anmelden anzeigen und den Anmeldebildschirm nach einem Klick starten. Die angezeigte Nachricht sollte auch nicht personalisiert sein.
Hauptfragment.kt
binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener { launchSignInFlow() }
binding.welcomeText.text = factToDisplay
Wenn Sie alle Schritte ausgeführt haben, sollte Ihre endgültige observeAuthenticationState()
-Methode dem folgenden Code ähneln.
Hauptfragment.kt
private fun observeAuthenticationState() {
val factToDisplay = viewModel.getFactToDisplay(requireContext())
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
// TODO 1. Use the authenticationState variable you just added
// in LoginViewModel and change the UI accordingly.
when (authenticationState) {
// TODO 2. If the user is logged in,
// you can customize the welcome message they see by
// utilizing the getFactWithPersonalization() function provided
LoginViewModel.AuthenticationState.AUTHENTICATED -> {
binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
binding.authButton.text = getString(R.string.logout_button_text)
binding.authButton.setOnClickListener {
// TODO implement logging out user in next step
}
}
else -> {
// TODO 3. Lastly, if there is no logged-in user,
// auth_button should display Login and
// launch the sign in screen when clicked.
binding.welcomeText.text = factToDisplay
binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener {
launchSignInFlow()
}
}
}
})
}
- Führen Sie Ihre App aus. Die Benutzeroberfläche sollte je nachdem, ob ein Nutzer angemeldet ist, aktualisiert werden. Wenn alles richtig funktioniert und Sie angemeldet sind, sollte auf dem Startbildschirm jetzt zusätzlich zu Ihrem Android-Namen auch Ihr Name zu sehen sein. Über die Schaltfläche Anmelden sollte jetzt auch Abmelden angezeigt werden.
In dieser Aufgabe implementieren Sie die Abmeldefunktion.
Da sich Nutzer in der App anmelden können, sollte diese auch die Möglichkeit haben, sich abzumelden. Hier ein Beispiel für die Abmeldung von einem Nutzer mit einer einzigen Codezeile:
AuthUI.getInstance().signOut(requireContext())
- Öffnen Sie
MainFragment.kt
. - Füge in
MainFragment.kt
observeAuthenticationState()
die Abmeldelogik hinzu, damit dieauth_button
korrekt funktioniert, wenn ein angemeldeter Nutzer vorhanden ist. Das Endergebnis der Methode sieht wie unten angegeben aus.
Hauptfragment.kt
private fun observeAuthenticationState() {
val factToDisplay = viewModel.getFactToDisplay(requireContext())
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
when (authenticationState) {
LoginViewModel.AuthenticationState.AUTHENTICATED -> {
binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
binding.authButton.text = getString(R.string.logout_button_text)
binding.authButton.setOnClickListener {
AuthUI.getInstance().signOut(requireContext())
}
}
else -> {
binding.welcomeText.text = factToDisplay
binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener {
launchSignInFlow()
}
}
}
})
}
- Führen Sie die App aus.
- Tippen Sie auf die Schaltfläche Abmelden und überprüfen Sie, ob der Nutzer abgemeldet ist. Der Status der Schaltfläche ändert sich in Anmelden.
Die endgültige Version der abgeschlossenen App finden Sie unter https://github.com/googlecodelabs/android-kotlin-login.
In diesem Codelab haben Sie Folgendes gelernt:
- Firebase durch Hinzufügen der erforderlichen Abhängigkeiten in der Gradle-Datei zu Ihrem Projekt hinzufügen und das Projekt in der Firebase Console einrichten.
- Hier erfahren Sie, wie Sie den Log-in für Ihre App mit der FirebaseUI-Bibliothek implementieren und angeben, wie sich die Nutzer anmelden dürfen. Beachten Sie, dass jedes Konto, das ein Nutzer in Ihrer App erstellt, nur für Ihre App spezifisch ist und nicht für alle Apps freigegeben wird, die Firebase für die Anmeldefunktion verwenden.
- Wie Sie den aktuellen Authentifizierungsstatus Ihrer App mit
LiveData
beobachten können - Nutzer abmelden
In diesem Codelab ging es um die Grundlagen der Unterstützung einer Anmeldung für eine Android-App.
In diesem Codelab konnten Sie Nutzer mit ihrer E-Mail-Adresse registrieren und anmelden. Die FirebaseUI-Bibliothek unterstützt jedoch auch andere Authentifizierungsmethoden wie die Anmeldung mit einer Telefonnummer. In den folgenden Ressourcen finden Sie Informationen zu den Funktionen der Firebase UI-Bibliothek und zu deren Nutzung:
Weitere Informationen zu Best Practices für die Anmeldung finden Sie in den folgenden Ressourcen:
Codelabs:
Android-Entwicklerdokumentation:
Videos:
Links zu weiteren Codelabs in diesem Kurs finden Sie auf der Landingpage des erweiterten Android-Tools in Kotlin.