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

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

  • ספקים מרובים – תהליכי כניסה באמצעות כתובת אימייל/סיסמה, קישור באימייל, אימות בטלפון, כניסה באמצעות חשבון Google, כניסה באמצעות חשבון Facebook, כניסה באמצעות חשבון Twitter וכניסה באמצעות חשבון GitHub.
  • ניהול חשבון – תהליכי הטיפול במשימות של ניהול החשבון, כגון יצירת חשבון ואיפוס סיסמה.
  • קישור חשבונות – בתהליך לקישור בטוח של חשבונות משתמשים בין זהויות לספקים שונים.
  • שדרוג של משתמשים אנונימיים – תהליכים לשדרוג בטוח של משתמשים אנונימיים.
  • עיצוב מותאם אישית – אפשר להתאים אישית את המראה של FirebaseUI כך שיתאים לאפליקציה. בנוסף, מכיוון ש-FirebaseUI הוא קוד פתוח, אפשר ליצור מיזוג של הפרויקט ולהתאים אותו בדיוק לצרכים שלכם.
  • Smart Lock לסיסמאות – שילוב אוטומטי עם Smart Lock לסיסמאות כדי להיכנס לחשבון במהירות במכשירים שונים.

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

  1. אם עדיין לא עשיתם זאת, מוסיפים את Firebase לפרויקט Android.

  2. מוסיפים את יחסי התלות של FirebaseUI לקובץ build.gradle ברמת האפליקציה. אם רוצים לתמוך בכניסה באמצעות Facebook או Twitter, צריך לכלול גם את ערכות SDK של Facebook ו-Twitter:

    dependencies {
    // ...

    implementation 'com.firebaseui:firebase-ui-auth:7.2.0'

    // 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'
}

    ל-FirebaseUI Auth SDK יש יחסי תלות טרנזיטיביים ב-Firebase SDK וב-Google Play Services SDK.

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

  4. אם הפעלתם את הכניסה באמצעות חשבון Google:

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

    2. מעבירים את קובץ התצורה המעודכן הזה לפרויקט Android Studio. הוא מחליף את את קובץ התצורה התואם שהמיושן. (מידע נוסף זמין במאמר איך מוסיפים את Firebase לפרויקט Android).

    3. אם עדיין לא ציינת את טביעת האצבע של SHA של האפליקציה, יש לעשות זאת דרך דף ההגדרות במסוף Firebase. למידע נוסף, ראו אימות הלקוח לקבלת פרטים על איתור טביעת האצבע של מזהה ה-SHA של האפליקציה שלך.

  5. אם אתם תומכים בכניסה באמצעות Facebook או Twitter, עליכם להוסיף משאבי מחרוזות ל strings.xml שמציינים את הפרטים המזהים שנדרשים על ידי כל אחד מהם ספק:

    
<resources>
  <!-- Facebook application ID and custom URL scheme (app ID prefixed by 'fb'). -->
  <string name="facebook_application_id" translatable="false">YOUR_APP_ID</string>
  <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_APP_ID</string>
</resources>

כניסה

יצירת ActivityResultLauncher שמתעד קריאה חוזרת (callback) עבור FirebaseUI חוזה תוצאת פעילות:

Kotlin+KTX

// See: https://developer.android.com/training/basics/intents/result
private val signInLauncher = registerForActivityResult(
    FirebaseAuthUIActivityResultContract(),
) { res ->
    this.onSignInResult(res)
}
FirebaseUIActivity.kt

Java

// See: https://developer.android.com/training/basics/intents/result
private final ActivityResultLauncher<Intent> signInLauncher = registerForActivityResult(
        new FirebaseAuthUIActivityResultContract(),
        new ActivityResultCallback<FirebaseAuthUIAuthenticationResult>() {
            @Override
            public void onActivityResult(FirebaseAuthUIAuthenticationResult result) {
                onSignInResult(result);
            }
        }
);
FirebaseUIActivity.java

כדי להתחיל את תהליך הכניסה לחשבון בממשק המשתמש של Firebase, צריך ליצור כוונת כניסה באמצעות שיטות כניסה מועדפות:

Kotlin+KTX

// Choose authentication providers
val providers = arrayListOf(
    AuthUI.IdpConfig.EmailBuilder().build(),
    AuthUI.IdpConfig.PhoneBuilder().build(),
    AuthUI.IdpConfig.GoogleBuilder().build(),
    AuthUI.IdpConfig.FacebookBuilder().build(),
    AuthUI.IdpConfig.TwitterBuilder().build(),
)

// Create and launch sign-in intent
val signInIntent = AuthUI.getInstance()
    .createSignInIntentBuilder()
    .setAvailableProviders(providers)
    .build()
signInLauncher.launch(signInIntent)
FirebaseUIActivity.kt

Java

// Choose authentication providers
List<AuthUI.IdpConfig> providers = Arrays.asList(
        new AuthUI.IdpConfig.EmailBuilder().build(),
        new AuthUI.IdpConfig.PhoneBuilder().build(),
        new AuthUI.IdpConfig.GoogleBuilder().build(),
        new AuthUI.IdpConfig.FacebookBuilder().build(),
        new AuthUI.IdpConfig.TwitterBuilder().build());

// Create and launch sign-in intent
Intent signInIntent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .build();
signInLauncher.launch(signInIntent);
FirebaseUIActivity.java

כשתהליך הכניסה יסתיים, תקבלו את התוצאה onSignInResult:

Kotlin+KTX

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    val response = result.idpResponse
    if (result.resultCode == RESULT_OK) {
        // Successfully signed in
        val user = FirebaseAuth.getInstance().currentUser
        // ...
    } 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.
        // ...
    }
}
FirebaseUIActivity.kt

Java

private void onSignInResult(FirebaseAuthUIAuthenticationResult result) {
    IdpResponse response = result.getIdpResponse();
    if (result.getResultCode() == RESULT_OK) {
        // Successfully signed in
        FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
        // ...
    } 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.
        // ...
    }
}
FirebaseUIActivity.java

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

  1. במסוף Firebase, פותחים את הקטע אימות. בכרטיסייה Sign in method, מפעילים את הספק Email/Password. הערה שכדי להשתמש בכניסה באמצעות קישור לאימייל, צריך להפעיל את הכניסה לחשבון באמצעות האימייל או הסיסמה.

  2. באותו קטע, מפעילים את שיטת הכניסה קישור לאימייל (כניסה ללא סיסמה) ולוחצים על שמירה.

  3. צריך גם לאפשר לקישורים הדינמיים ב-Firebase להשתמש בכניסה באמצעות קישור לאימייל. ב במסוף Firebase, לוחצים על קישורים דינמיים בקטע מעורבות בסרגל הניווט. לוחצים על איך מתחילים ומוסיפים דומיין. הדומיין שייבחר כאן יופיע באימייל קישורים שנשלחו למשתמשים.

  4. כדי להפעיל את הכניסה עם קישור לאימייל ב-FirebaseUI, מפעילים את enableEmailLinkSignIn מופע אחד (EmailBuilder). צריך גם לספק אובייקט ActionCodeSettings תקין עם setHandleCodeInApp הוגדרה כ-True. בנוסף, צריך להוסיף לרשימת ההיתרים את כתובת ה-URL שמעבירים אל setUrl. אפשר לעשות זאת במסוף Firebase, בקטע Authentication (אימות) -> Sign in Methods (שיטות כניסה) -> Authorized domains (דומיינים מורשים).

    Kotlin+KTX

    val actionCodeSettings = ActionCodeSettings.newBuilder()
    .setAndroidPackageName( // yourPackageName=
        "...", // installIfNotAvailable=
        true, // minimumVersion=
        null,
    )
    .setHandleCodeInApp(true) // This must be set to true
    .setUrl("/proxy/https://firebase.google.com/?__proxy_cookies_to=https%3A%2F%2Fgoogle.com") // This URL needs to be whitelisted
    .build()

val providers = listOf(
    EmailBuilder()
        .enableEmailLinkSignIn()
        .setActionCodeSettings(actionCodeSettings)
        .build(),
)
val signInIntent = AuthUI.getInstance()
    .createSignInIntentBuilder()
    .setAvailableProviders(providers)
    .build()
signInLauncher.launch(signInIntent)
    FirebaseUIActivity.kt

    Java

    ActionCodeSettings actionCodeSettings = ActionCodeSettings.newBuilder()
        .setAndroidPackageName(
                /* yourPackageName= */ "...",
                /* installIfNotAvailable= */ true,
                /* minimumVersion= */ null)
        .setHandleCodeInApp(true) // This must be set to true
        .setUrl("/proxy/https://firebase.google.com/?__proxy_cookies_to=https%3A%2F%2Fgoogle.com") // This URL needs to be whitelisted
        .build();

List<AuthUI.IdpConfig> providers = Arrays.asList(
        new AuthUI.IdpConfig.EmailBuilder()
                .enableEmailLinkSignIn()
                .setActionCodeSettings(actionCodeSettings)
                .build()
);
Intent signInIntent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .build();
signInLauncher.launch(signInIntent);
    FirebaseUIActivity.java

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

  6. אחרי שמקבלים את קישור העומק, צריך להתקשר לאימות שאנחנו יכולים לטפל בו. אם נוכל, תצטרכו להעביר לנו אותו דרך setEmailLink.

    Kotlin+KTX

    if (AuthUI.canHandleIntent(intent)) {
    val extras = intent.extras ?: return
    val link = extras.getString("email_link_sign_in")
    if (link != null) {
        val signInIntent = AuthUI.getInstance()
            .createSignInIntentBuilder()
            .setEmailLink(link)
            .setAvailableProviders(providers)
            .build()
        signInLauncher.launch(signInIntent)
    }
}
    FirebaseUIActivity.kt

    Java

    if (AuthUI.canHandleIntent(getIntent())) {
    if (getIntent().getExtras() == null) {
        return;
    }
    String link = getIntent().getExtras().getString("email_link_sign_in");
    if (link != null) {
        Intent signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setEmailLink(link)
                .setAvailableProviders(providers)
                .build();
        signInLauncher.launch(signInIntent);
    }
}
    FirebaseUIActivity.java

  7. אופציונלי יש תמיכה בכניסה עם קישור לאימייל בין מכשירים, כלומר הקישור נשלח דרך אפשר להשתמש באפליקציה ל-Android כדי להתחבר לאפליקציות לאינטרנט או ל-Apple. כברירת מחדל, תמיכה במכשירים שונים מופעלת. אפשר להשבית אותו על ידי קריאה ל-setForceSameDevice במכונה EmailBuilder.

    לעיון במאמר FirebaseUI-Web ו-FirebaseUI-iOS אפשר לקבל מידע נוסף.

יציאה

ב-FirebaseUI אפשר לצאת מהאימות ב-Firebase בעזרת שיטות נוחות וכן את כל ספקי הזהויות החברתיות:

Kotlin+KTX

AuthUI.getInstance()
    .signOut(this)
    .addOnCompleteListener {
        // ...
    }
FirebaseUIActivity.kt

Java

AuthUI.getInstance()
        .signOut(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

אפשר גם למחוק לגמרי את חשבון המשתמש:

Kotlin+KTX

AuthUI.getInstance()
    .delete(this)
    .addOnCompleteListener {
        // ...
    }
FirebaseUIActivity.kt

Java

AuthUI.getInstance()
        .delete(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

התאמה אישית

כברירת מחדל, FirebaseUI משתמש ב-AppCompat ליצירת עיצוב, כלומר הוא יתאים את עצמו באופן טבעי לערכת הצבעים של האפליקציה. אם אתם צריכים התאמה אישית נוספת, תוכלו להעביר עיצוב וסמל ל-Intent builder של הכניסה:

Kotlin+KTX

val signInIntent = AuthUI.getInstance()
    .createSignInIntentBuilder()
    .setAvailableProviders(providers)
    .setLogo(R.drawable.my_great_logo) // Set logo drawable
    .setTheme(R.style.MySuperAppTheme) // Set theme
    .build()
signInLauncher.launch(signInIntent)
FirebaseUIActivity.kt

Java

Intent signInIntent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .setLogo(R.drawable.my_great_logo)      // Set logo drawable
        .setTheme(R.style.MySuperAppTheme)      // Set theme
        .build();
signInLauncher.launch(signInIntent);
FirebaseUIActivity.java

אתם יכולים גם להגדיר מדיניות פרטיות ותנאים והגבלות בהתאמה אישית:

Kotlin+KTX

val signInIntent = AuthUI.getInstance()
    .createSignInIntentBuilder()
    .setAvailableProviders(providers)
    .setTosAndPrivacyPolicyUrls(
        "/proxy/https://example.com/terms.html",
        "/proxy/https://example.com/privacy.html",
    )
    .build()
signInLauncher.launch(signInIntent)
FirebaseUIActivity.kt

Java

Intent signInIntent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .setTosAndPrivacyPolicyUrls(
                "/proxy/https://example.com/terms.html",
                "/proxy/https://example.com/privacy.html")
        .build();
signInLauncher.launch(signInIntent);
FirebaseUIActivity.java

השלבים הבאים

  • למידע נוסף על שימוש ב-FirebaseUI להתאמה אישית ועל השימוש בהם, קובץ README ב-GitHub.
  • אם נתקלתם בבעיה ב-FirebaseUI ואתם רוצים לדווח עליה, תוכלו להשתמש מעקב אחר בעיות ב-GitHub.