أضف تسجيل الدخول بسهولة إلى تطبيق 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، فقم أيضًا بتضمين Facebook وTwitter SDK:

    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 الذي يسجل رد اتصال لعقد نتيجة نشاط 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.
        // ...
    }
}

قم بإعداد طرق تسجيل الدخول

  1. في وحدة تحكم Firebase ، افتح قسم المصادقة . في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر البريد الإلكتروني/كلمة المرور . لاحظ أنه يجب تمكين تسجيل الدخول عبر البريد الإلكتروني/كلمة المرور لاستخدام تسجيل الدخول عبر رابط البريد الإلكتروني.

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

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

  4. يمكنك تمكين تسجيل رابط البريد الإلكتروني في FirebaseUI عن طريق استدعاء enableEmailLinkSignIn على مثيل EmailBuilder . ستحتاج أيضًا إلى توفير كائن ActionCodeSettings صالح مع ضبط setHandleCodeInApp على true. بالإضافة إلى ذلك، تحتاج إلى إضافة عنوان 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);
  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)
        }
    }

    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);
        }
    }
  7. يتم دعم تسجيل الدخول الاختياري عبر رابط البريد الإلكتروني عبر الأجهزة، مما يعني أنه يمكن استخدام الرابط المرسل عبر تطبيق 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);

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

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