FirebaseUI هي مكتبة تم إنشاؤها بالإضافة إلى حزمة SDK لمصادقة Firebase التي توفر تدفقات واجهة مستخدم منسدلة للاستخدام في تطبيقك. توفّر واجهة FirebaseUI المزايا التالية:
- مقدمو خدمات متعددة: مسارات تسجيل الدخول لعنوان البريد الإلكتروني/كلمة المرور ورابط البريد الإلكتروني والهاتف المصادقة، تسجيل الدخول إلى Google، تسجيل الدخول إلى Facebook، تسجيل الدخول إلى Twitter، تسجيل الدخول إلى GitHub.
- إدارة الحساب: مسارات للتعامل مع مهام إدارة الحساب، مثل إنشاء الحساب وإعادة تعيين كلمة المرور.
- ربط الحساب: مسارات لربط حسابات المستخدمين بأمان على مستوى الهوية التطبيقات.
- ترقية المستخدمين المجهولين: إجراءات لترقية المستخدمين المجهولين بأمان.
- المظاهر المخصصة: خصِّص مظهر FirebaseUI ليتناسب مع تطبيقك. كذلك، بما أنّ FirebaseUI مفتوحة المصدر، يمكنك استخدام واجهة برمجة التطبيقات للمشروع وتخصيصه وفقًا لاحتياجاتك بالضبط.
- Smart Lock لكلمات المرور - تكامل تلقائي مع Smart Lock لكلمات المرور لتسجيل الدخول بسرعة على جميع الأجهزة
قبل البدء
إذا لم تكن قد فعلت ذلك بالفعل، إضافة Firebase إلى مشروع Android
أضِف العناصر الاعتمادية لـ 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.
في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل الخيار. طرق تسجيل الدخول التي تريد دعمها. تتطلّب بعض طُرق تسجيل الدخول معلومات إضافية، تتوفّر عادةً في صفحة "مطوّر الخدمة" وحدة التحكم.
في حال تفعيل "تسجيل الدخول بحساب Google":
نزِّل ملف إعداد Firebase المعدَّل عندما يُطلب منك ذلك في وحدة التحكّم. (
google-services.json
)، الذي يحتوي الآن على معلومات عميل OAuth مطلوبة لتسجيل الدخول باستخدام حساب Google.يمكنك نقل ملف الإعداد المعدَّل هذا إلى مشروع "استوديو Android" مع استبدال مشروع "استوديو YouTube". ملف الإعداد المقابل القديم الآن. (اطّلِع على مقالة إضافة Firebase إلى مشروع Android).
إذا لم تكن قد حددت الملف المرجعي لخوارزمية SHA لتطبيقك، يمكنك إجراء ذلك من صفحة الإعدادات من وحدة التحكم Firebase. الاطّلاع على مصادقة البرنامج للحصول على تفاصيل حول كيفية الحصول على الملف المرجعي لخوارزمية SHA لتطبيقك.
إذا كنت تتيح تسجيل الدخول باستخدام 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) }
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); } } );
لبدء عملية تسجيل الدخول إلى 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)
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);
عند اكتمال عملية تسجيل الدخول، ستظهر لك النتيجة التالية:
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. // ... } }
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. // ... } }
إعداد طُرق تسجيل الدخول
مصادقة رابط البريد الإلكتروني
في وحدة تحكُّم Firebase، افتح قسم المصادقة. في صفحة طريقة تسجيل الدخول، فعِّل مزوِّد البريد الإلكتروني/كلمة المرور. ملاحظة أنه يجب تفعيل تسجيل الدخول باستخدام عنوان البريد الإلكتروني/كلمة المرور لاستخدام ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني.
في القسم نفسه، فعِّل تسجيل الدخول باستخدام رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور). وانقر على حفظ.
يجب أيضًا تفعيل ميزة "روابط Firebase الديناميكية" لاستخدام ميزة "تسجيل الدخول باستخدام رابط بريد إلكتروني". في جلسة المعمل، وحدة تحكّم Firebase، انقر على الروابط الديناميكية ضمن التفاعل في شريط التنقل. انقر على البدء وإضافة نطاق. إنّ النطاق الذي تختاره هنا سيظهر في الرسالة الإلكترونية. الروابط التي يتم إرسالها إلى المستخدمين.
يمكنك تفعيل ميزة تسجيل رابط البريد الإلكتروني في 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)
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);
إذا كنت ترغب في التقاط الرابط في نشاط معين، فيرجى اتباع الخطوات الموضحة هنا. وإلا، فسينتقل الرابط إعادة التوجيه إلى نشاط مشغّل التطبيقات.
عند العثور على الرابط المؤدي لصفحة معيّنة، ستحتاج إلى الاتصال للتأكّد من أنّه يمكننا معالجة الرابط نيابةً عنك. إذا عليك إرسالها إلينا عبر
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) } }
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); } }
اختياري تتوفر إمكانية تسجيل الدخول باستخدام رابط البريد الإلكتروني عبر الأجهزة، مما يعني أن الرابط الذي تم إرساله عبر يمكن استخدام تطبيق Android لتسجيل الدخول على الويب أو تطبيقات Apple. بشكل تلقائي، يمكن استخدام عدة أجهزة مفعّلة. يمكنك إيقافها من خلال طلب الرقم
setForceSameDevice
على مثيلEmailBuilder
.الاطّلاع على FirebaseUI-Web وFirebaseUI-iOS لمزيد من المعلومات.
تسجيل الخروج
توفّر واجهة FirebaseUI طرق سهلة لتسجيل الخروج من مصادقة Firebase بالإضافة إلى جميع موفِّري الهوية الاجتماعية:
Kotlin+KTX
AuthUI.getInstance() .signOut(this) .addOnCompleteListener { // ... }
Java
AuthUI.getInstance() .signOut(this) .addOnCompleteListener(new OnCompleteListener<Void>() { public void onComplete(@NonNull Task<Void> task) { // ... } });
يمكنك أيضًا حذف حساب المستخدم بالكامل:
Kotlin+KTX
AuthUI.getInstance() .delete(this) .addOnCompleteListener { // ... }
Java
AuthUI.getInstance() .delete(this) .addOnCompleteListener(new OnCompleteListener<Void>() { @Override public void onComplete(@NonNull Task<Void> task) { // ... } });
التخصيص
بشكل تلقائي، تستخدم أداة 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)
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);
يمكنك أيضًا ضبط سياسة خصوصية وبنود خدمة مخصّصة:
Kotlin+KTX
val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setTosAndPrivacyPolicyUrls( "https://example.com/terms.html", "https://example.com/privacy.html", ) .build() signInLauncher.launch(signInIntent)
Java
Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setTosAndPrivacyPolicyUrls( "https://example.com/terms.html", "https://example.com/privacy.html") .build(); signInLauncher.launch(signInIntent);
الخطوات التالية
- لمزيد من المعلومات عن استخدام واجهة مستخدم Firebase وتخصيصها، يُرجى الاطّلاع على قراءة على جيت هب.
- إذا عثرت على مشكلة في واجهة مستخدم Firebase وأردت الإبلاغ عنها، استخدِم أداة تتبُّع مشاكل GitHub