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

إنّ 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" مع استبدال ملف الإعداد المقابل القديم. (اطّلِع على مقالة إضافة 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:

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

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

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

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 بالإضافة إلى جميع موفري الهوية الاجتماعية:

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 لتسجيل الدخول:

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(
        "https://example.com/terms.html",
        "https://example.com/privacy.html",
    )
    .build()
signInLauncher.launch(signInIntent)
FirebaseUIActivity.kt

Java

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

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

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