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

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

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

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

  • מספר ספקים – תהליכי כניסה לאימייל/סיסמה, לטלפון, ל-Google, לפייסבוק, לאפל, ל-GitHub, למיקרוסופט, ל-Yahoo, ל-X (לשעבר טוויטר), לאימות אנונימי ול-OAuth בהתאמה אישית.
  • ניהול חשבון – תהליכים לטיפול במשימות של ניהול חשבון, כמו יצירת חשבון ואיפוס סיסמאות.
  • קישור חשבונות – תהליכים לקישור בטוח של חשבונות משתמשים בין ספקי זהויות.
  • שדרוג משתמשים אנונימיים – תהליכים לשדרוג בטוח של משתמשים אנונימיים.
  • עיצובים בהתאמה אישית – תמיכה בממשק משתמש של Material 3 שיכול לרשת את העיצוב של האפליקציה. בנוסף, מכיוון ש-FirebaseUI הוא קוד פתוח, אתם יכולים ליצור עותק של הפרויקט ולהתאים אותו בדיוק לצרכים שלכם.
  • מנהל פרטי הכניסה – שילוב אוטומטי עם מנהל פרטי הכניסה לכניסה מהירה בין מכשירים.
  • אימות רב-שלבי – תמיכה ב-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 Gradle. מוודאים שהפעלתם את הכניסה באמצעות חשבון Google במסוף Firebase.

התחברות באמצעות חשבון Facebook

אם משתמשים בכניסה באמצעות Facebook, מוסיפים את מזהה האפליקציה שלכם ב-Facebook אל 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 Console, אבל לא נדרשת הגדרה נוספת ספציפית ל-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,
                    )
                },
            )
        )
    }
}

למידע על התהליך המלא של טיפול בקישורים עמוקים, אפשר לעיין בקטע Email Link Sign-In בקובץ ה-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 Auth, והדרך הכי פשוטה להתחיל היא להגדיר עיצוב ישירות ב-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, אתם יכולים לשמור על תהליך השקה שמבוסס על פעילות באמצעות 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))