إضافة تسجيل الدخول بسهولة إلى تطبيق Android باستخدام FirebaseUI

FirebaseUI هي مكتبة تم إنشاؤها بالإضافة إلى حزمة SDK لمصادقة Firebase التي توفر تدفقات واجهة مستخدم منسدلة للاستخدام في تطبيقك. توفّر واجهة 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'
   }
   

   تتميز حزمة تطوير البرامج (SDK) لمصادقة FirebaseUI بتبعيات متعدِّدة على حزمة SDK لمنصة Firebase، حزمة SDK لخدمات Google Play.

3. في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل الخيار. طرق تسجيل الدخول التي تريد دعمها. تتطلّب بعض طُرق تسجيل الدخول معلومات إضافية، تتوفّر عادةً في صفحة "مطوّر الخدمة" وحدة التحكم.

4. في حال تفعيل "تسجيل الدخول بحساب Google":

   1. نزِّل ملف إعداد Firebase المعدَّل عندما يُطلب منك ذلك في وحدة التحكّم. (google-services.json)، الذي يحتوي الآن على معلومات عميل OAuth مطلوبة لتسجيل الدخول باستخدام حساب Google.

   2. يمكنك نقل ملف الإعداد المعدَّل هذا إلى مشروع "استوديو Android" مع استبدال مشروع "استوديو YouTube". ملف الإعداد المقابل القديم الآن. (اطّلِع على مقالة إضافة 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 لتسجيل معاودة الاتصال لواجهة مستخدم FirebaseUI عقد نتيجة النشاط:

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

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

لبدء عملية تسجيل الدخول إلى FirebaseUI، أنشئ هدف تسجيل الدخول باستخدام طرق تسجيل الدخول المفضلة:

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

// 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:

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

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، افتح قسم المصادقة. في صفحة طريقة تسجيل الدخول، فعِّل مزوِّد البريد الإلكتروني/كلمة المرور. ملاحظة أنه يجب تفعيل تسجيل الدخول باستخدام عنوان البريد الإلكتروني/كلمة المرور لاستخدام ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني.

2. في القسم نفسه، فعِّل تسجيل الدخول باستخدام رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور). وانقر على حفظ.

3. يجب أيضًا تفعيل ميزة "روابط Firebase الديناميكية" لاستخدام ميزة "تسجيل الدخول باستخدام رابط بريد إلكتروني". في جلسة المعمل، وحدة تحكّم Firebase، انقر على الروابط الديناميكية ضمن التفاعل في شريط التنقل. انقر على البدء وإضافة نطاق. إنّ النطاق الذي تختاره هنا سيظهر في الرسالة الإلكترونية. الروابط التي يتم إرسالها إلى المستخدمين.

4. يمكنك تفعيل ميزة تسجيل رابط البريد الإلكتروني في FirebaseUI من خلال طلب enableEmailLinkSignIn على مثيل واحد (EmailBuilder) يجب أيضًا تقديم عنصر ActionCodeSettings صالح مع تم ضبط setHandleCodeInApp على "صحيح". بالإضافة إلى ذلك، عليك إضافة عنوان URL الذي تمرِّره إلى القائمة البيضاء setUrl، والذي يمكن إجراءه في وحدة تحكُّم Firebase، ضمن المصادقة -> طرق تسجيل الدخول -> النطاقات المسموح بها.

   Kotlin+KTX

   val actionCodeSettings = ActionCodeSettings.newBuilder()
       .setAndroidPackageName( // yourPackageName=
           "...", // installIfNotAvailable=
           true, // minimumVersion=
           null,
       )
       .setHandleCodeInApp(true) // This must be set to true
       .setUrl("https://google.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("https://google.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 بالإضافة إلى جميع موفِّري الهوية الاجتماعية:

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

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

يمكنك أيضًا حذف حساب المستخدم بالكامل:

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

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

التخصيص

بشكل تلقائي، تستخدم أداة FirebaseUI تطبيق AppCompat في إنشاءها، ما يعني أنّها ستعمل بطبيعة الحال استخدام نظام الألوان لتطبيقك. إذا كنت بحاجة إلى مزيد من التخصيص، يمكنك تمرير مظهر وشعار إلى أداة إنشاء Intent لتسجيل الدخول:

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

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

يمكنك أيضًا ضبط سياسة خصوصية وبنود خدمة مخصّصة:

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

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

الخطوات التالية

• لمزيد من المعلومات عن استخدام واجهة مستخدم Firebase وتخصيصها، يُرجى الاطّلاع على قراءة على جيت هب.
• إذا عثرت على مشكلة في واجهة مستخدم Firebase وأردت الإبلاغ عنها، استخدِم أداة تتبُّع مشاكل GitHub