מוסיפים בקלות כניסה לאפליקציה ל-Android באמצעות FirebaseUI

‫FirebaseUI אימות ב-Firebase היא ספרייה שמבוססת על Firebase Authentication SDK ומספקת תהליכי ממשק משתמש מוכנים לשימוש באפליקציה.

תהליך הכניסה המומלץ משתמש במסכי כתיבה. אם האפליקציות עדיין משתמשות בפעילויות, אפשר לעיין בסעיף אפליקציות קיימות שמבוססות על פעילויות.

היתרונות של FirebaseUI Auth:

  • מספר ספקים – תהליכי כניסה באמצעות כתובת אימייל/סיסמה, טלפון, Google, פייסבוק, אפל, GitHub, מיקרוסופט, Yahoo,‏ X, אימות אנונימי ו-OAuth בהתאמה אישית.
  • ניהול חשבון – תהליכים לטיפול במשימות של ניהול חשבון, כמו יצירת חשבון ואיפוס סיסמה.
  • קישור חשבונות – תהליכים לקישור מאובטח של חשבונות משתמשים בין ספקי זהויות.
  • שדרוג משתמשים אנונימיים – תהליכים לשדרוג בטוח של משתמשים אנונימיים.
  • עיצובים בהתאמה אישית – תמיכה בממשק משתמש של Material 3 שיכול לרשת את העיצוב של האפליקציה. בנוסף, מכיוון ש-FirebaseUI הוא קוד פתוח, אתם יכולים ליצור עותק של הפרויקט ולהתאים אותו בדיוק לצרכים שלכם.
  • Credential Manager – שילוב אוטומטי עם Credential Manager לכניסה מהירה למכשירים שונים.
  • אימות רב-שלבי – תמיכה ב-SMS וב-TOTP לאבטחה נוספת.

לפני שמתחילים

  1. אם עדיין לא הוספתם את Firebase לפרויקט Android, אתם צריכים להוסיף אותו.
  2. במסוף Firebase, מפעילים את שיטות הכניסה שרוצים לתמוך בהן.
  3. מוסיפים את FirebaseUI Auth למודול האפליקציה:
dependencies {
    // Check Maven Central for the latest version:
    // https://central.sonatype.com/artifact/com.firebaseui/firebase-ui-auth/versions
    implementation("com.firebaseui:firebase-ui-auth:10.0.0-beta02")

    // Required only if Facebook login support is required
    // Find the latest Facebook SDK releases here: https://goo.gl/Ce5L94
    implementation("com.facebook.android:facebook-android-sdk:8.x")
}

הגדרת שיטות כניסה לחשבון

כניסה באמצעות חשבון Google

ההגדרה של הכניסה באמצעות חשבון Google מסופקת באופן אוטומטי על ידי קובץ ההגדרה google-services.json. מוודאים שהפעלתם את הכניסה באמצעות חשבון Google במסוף Firebase.

התחברות באמצעות פייסבוק

אם משתמשים בכניסה באמצעות פייסבוק, מוסיפים את מזהה האפליקציה של פייסבוק אל strings.xml:

<resources>
    <string name="facebook_application_id" translatable="false">YOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_client_token" translatable="false">CHANGE-ME</string>
</resources>

הוראות להגדרה מופיעות במאמרי העזרה של Facebook for Developers.

ספקים אחרים

ספקי Twitter, ‏ GitHub, ‏ Microsoft, ‏ Yahoo ו-Apple דורשים הגדרה במסוף Firebase, אבל לא נדרשת הגדרה נוספת ספציפית ל-Android. הוראות ספציפיות לספק מופיעות במסמכי Firebase Auth.

בוחרים את הספקים הרצויים ב-authUIConfiguration:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Phone(
                defaultCountryCode = "US",
            )
        )
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
        provider(AuthProvider.Facebook())
    }
}

הכניסה באמצעות קישור באימייל נמצאת בהגדרות של ספק האימייל:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(
            AuthProvider.Email(
                isEmailLinkSignInEnabled = true,
                emailLinkActionCodeSettings = actionCodeSettings {
                    url = "https://example.com/auth"
                    handleCodeInApp = true
                    setAndroidPackageName(
                        "com.example.app",
                        true,
                        null,
                    )
                },
            )
        )
    }
}

לצפייה בתהליך המלא של טיפול בקישורים עמוקים, אפשר לעיין בקטע הכניסה באמצעות קישור באימייל בקובץ ה-README ב-GitHub.

כניסה

יוצרים AuthUIConfiguration ואז מציגים FirebaseAuthScreen.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val authUI = FirebaseAuthUI.getInstance()

        setContent {
            MyAppTheme {
                val configuration = authUIConfiguration {
                    context = applicationContext
                    theme = AuthUITheme.fromMaterialTheme()
                    providers {
                        provider(AuthProvider.Email())
                        provider(
                            AuthProvider.Google(
                                scopes = listOf("email"),
                                serverClientId = null,
                            )
                        )
                    }
                }

                if (authUI.isSignedIn()) {
                    HomeScreen()
                } else {
                    FirebaseAuthScreen(
                        configuration = configuration,
                        authUI = authUI,
                        onSignInSuccess = { result ->
                            // User signed in successfully
                        },
                        onSignInFailure = { exception ->
                            // Sign in failed
                        },
                        onSignInCancelled = {
                            finish()
                        },
                    )
                }
            }
        }
    }
}

כך מקבלים תהליך אימות מלא שכולל:

  • אימות סיסמה.
  • כניסה באמצעות חשבון Google.
  • איפוס סיסמה.
  • עיצוב Material 3.
  • תמיכה ב-Credential Manager.
  • טיפול בשגיאות באמצעות קריאות חוזרות ישירות.

יציאה מהחשבון

ב-FirebaseUI Auth יש שיטות נוחות ליציאה מהחשבון ולמחיקת החשבון:

lifecycleScope.launch {
    FirebaseAuthUI.getInstance().signOut(applicationContext)
}
lifecycleScope.launch {
    FirebaseAuthUI.getInstance().delete(applicationContext)
}

התאמה אישית

האימות של FirebaseUI ניתן להתאמה אישית, והדרך הכי פשוטה להתחיל היא להגדיר נושא ישירות ב-authUIConfiguration:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(AuthProvider.Google(scopes = listOf("email"), serverClientId = null))
    }
    theme = AuthUITheme.Adaptive
}

אפשר גם:

  • אפשר להשתמש ב-AuthUITheme.Default, ב-AuthUITheme.DefaultDark או ב-AuthUITheme.Adaptive.
  • העברת העיצוב של האפליקציה באמצעות AuthUITheme.fromMaterialTheme().
  • התאמה אישית של העיצוב שמוגדר כברירת מחדל באמצעות .copy().
  • יצירת AuthUITheme בהתאמה אישית מלאה.
  • מגדירים לוגו, כתובת URL של התנאים וההגבלות וכתובת URL של מדיניות הפרטיות ב-authUIConfiguration.

פרטים מלאים על עיצוב והתאמה אישית, כולל סדר העדיפות של ערכות נושא, עיצוב לחצני ספק וערכות נושא בהתאמה אישית, זמינים בקטע Theming and Customization (עיצוב והתאמה אישית) בקובץ ה-readme ב-GitHub.

אפליקציות קיימות שמבוססות על פעילות

אם האפליקציה שלכם עדיין משתמשת בפעילויות וב-Activity Result API, אתם יכולים להמשיך להשתמש בתהליך השקה מבוסס-Activity באמצעות AuthFlowController:

private val authLauncher = registerForActivityResult(
    ActivityResultContracts.StartActivityForResult(),
) { result ->
    if (result.resultCode == RESULT_OK) {
        val user = FirebaseAuth.getInstance().currentUser
        // ...
    } else {
        // User cancelled or sign-in failed
    }
}

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
    }
}

val controller = FirebaseAuthUI.getInstance().createAuthFlow(configuration)
authLauncher.launch(controller.createIntent(this))