Dễ dàng thêm tính năng đăng nhập vào ứng dụng Android bằng FirebaseUI

Xác thực FirebaseUI là một thư viện được xây dựng dựa trên SDK Xác thực Firebase, cung cấp các luồng giao diện người dùng thả vào để sử dụng trong ứng dụng của bạn.

Quy trình đăng nhập được đề xuất sử dụng màn hình Compose. Đối với những ứng dụng vẫn dùng các Hoạt động, hãy xem phần Các ứng dụng hiện có dựa trên Hoạt động.

FirebaseUI Auth mang lại những lợi ích sau:

  • Nhiều nhà cung cấp – quy trình đăng nhập cho email/mật khẩu, điện thoại, Google, Facebook, Apple, GitHub, Microsoft, Yahoo, Twitter, xác thực ẩn danh và OAuth tuỳ chỉnh.
  • Quản lý tài khoản – các quy trình xử lý những việc liên quan đến quản lý tài khoản, chẳng hạn như tạo tài khoản và đặt lại mật khẩu.
  • Liên kết tài khoản – các quy trình để liên kết tài khoản người dùng một cách an toàn trên các nhà cung cấp danh tính.
  • Nâng cấp người dùng ẩn danh – các quy trình để nâng cấp người dùng ẩn danh một cách an toàn.
  • Chủ đề tuỳ chỉnh – Hỗ trợ giao diện người dùng Material 3 có thể kế thừa giao diện của ứng dụng. Ngoài ra, vì FirebaseUI là nguồn mở, nên bạn có thể phát triển nhánh dự án và tuỳ chỉnh chính xác theo nhu cầu của mình.
  • Trình quản lý thông tin xác thực – tự động tích hợp với Trình quản lý thông tin xác thực để đăng nhập nhanh trên nhiều thiết bị.
  • Xác thực đa yếu tố – Hỗ trợ SMS và TOTP để tăng cường bảo mật.

Trước khi bắt đầu

  1. Nếu bạn chưa thực hiện, hãy thêm Firebase vào dự án Android.
  2. Trong bảng điều khiển của Firebase, hãy bật các phương thức đăng nhập mà bạn muốn hỗ trợ.
  3. Thêm FirebaseUI Auth vào mô-đun ứng dụng của bạn:
dependencies {
    // Check Maven Central for the latest version:
    // https://central.sonatype.com/artifact/com.firebaseui/firebase-ui-auth/versions
    implementation("com.firebaseui:firebase-ui-auth:10.0.0-beta02")

    // 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")
}

Thiết lập phương thức đăng nhập

Đăng nhập bằng tài khoản Google

Cấu hình Đăng nhập bằng Google được trình bổ trợ google-services Gradle cung cấp tự động. Đảm bảo bạn đã bật tính năng Đăng nhập bằng Google trong Bảng điều khiển của Firebase.

Đăng nhập bằng Facebook

Nếu sử dụng tính năng Đăng nhập bằng Facebook, hãy thêm Facebook App ID vào strings.xml:

<resources>
    <string name="facebook_application_id" translatable="false">YOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_client_token" translatable="false">CHANGE-ME</string>
</resources>

Hãy xem tài liệu Facebook for Developers để biết hướng dẫn thiết lập.

Các nhà cung cấp khác

Các nhà cung cấp Twitter, GitHub, Microsoft, Yahoo và Apple yêu cầu bạn thiết lập cấu hình trong Bảng điều khiển của Firebase nhưng không cần thiết lập thêm cho Android. Hãy xem tài liệu về Xác thực Firebase để biết hướng dẫn cụ thể theo từng nhà cung cấp.

Chọn nhà cung cấp bạn muốn trong authUIConfiguration:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Phone(
                defaultCountryCode = "US",
            )
        )
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
        provider(AuthProvider.Facebook())
    }
}

Tính năng đăng nhập bằng đường liên kết qua email nằm trong cấu hình nhà cung cấp dịch vụ email:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(
            AuthProvider.Email(
                isEmailLinkSignInEnabled = true,
                emailLinkActionCodeSettings = actionCodeSettings {
                    url = "https://example.com/auth"
                    handleCodeInApp = true
                    setAndroidPackageName(
                        "com.example.app",
                        true,
                        null,
                    )
                },
            )
        )
    }
}

Để xem toàn bộ quy trình xử lý đường liên kết sâu, hãy xem phần Đăng nhập bằng đường liên kết trong email của tệp README trên GitHub.

Đăng nhập

Tạo AuthUIConfiguration, sau đó hiển thị FirebaseAuthScreen.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val authUI = FirebaseAuthUI.getInstance()

        setContent {
            MyAppTheme {
                val configuration = authUIConfiguration {
                    context = applicationContext
                    theme = AuthUITheme.fromMaterialTheme()
                    providers {
                        provider(AuthProvider.Email())
                        provider(
                            AuthProvider.Google(
                                scopes = listOf("email"),
                                serverClientId = null,
                            )
                        )
                    }
                }

                if (authUI.isSignedIn()) {
                    HomeScreen()
                } else {
                    FirebaseAuthScreen(
                        configuration = configuration,
                        authUI = authUI,
                        onSignInSuccess = { result ->
                            // User signed in successfully
                        },
                        onSignInFailure = { exception ->
                            // Sign in failed
                        },
                        onSignInCancelled = {
                            finish()
                        },
                    )
                }
            }
        }
    }
}

Điều này mang đến cho bạn một quy trình xác thực hoàn chỉnh với:

  • Xác thực bằng mật khẩu.
  • Đăng nhập bằng Google.
  • Đặt lại mật khẩu.
  • Tạo kiểu Material 3.
  • Hỗ trợ Trình quản lý thông tin xác thực.
  • Xử lý lỗi thông qua lệnh gọi lại trực tiếp.

Đăng xuất

FirebaseUI Auth cung cấp các phương thức thuận tiện để đăng xuất và xoá tài khoản:

lifecycleScope.launch {
    FirebaseAuthUI.getInstance().signOut(applicationContext)
}
lifecycleScope.launch {
    FirebaseAuthUI.getInstance().delete(applicationContext)
}

Tùy chỉnh

Bạn có thể tuỳ chỉnh FirebaseUI Auth và cách đơn giản nhất để bắt đầu là đặt một giao diện ngay trong authUIConfiguration:

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(AuthProvider.Google(scopes = listOf("email"), serverClientId = null))
    }
    theme = AuthUITheme.Adaptive
}

Bạn cũng có thể:

  • Sử dụng AuthUITheme.Default, AuthUITheme.DefaultDark hoặc AuthUITheme.Adaptive.
  • Kế thừa giao diện ứng dụng bằng AuthUITheme.fromMaterialTheme().
  • Tuỳ chỉnh giao diện mặc định bằng .copy().
  • Xây dựng một AuthUITheme hoàn toàn tuỳ chỉnh.
  • Đặt biểu trưng, URL Điều khoản dịch vụ và URL Chính sách quyền riêng tư trong authUIConfiguration.

Để biết đầy đủ thông tin chi tiết về việc tạo giao diện và tuỳ chỉnh, bao gồm cả thứ tự ưu tiên của giao diện, kiểu nút của nhà cung cấp và giao diện tuỳ chỉnh, hãy xem phần Tạo giao diện và tuỳ chỉnh trong tệp readme trên GitHub.

Các ứng dụng hiện có dựa trên Hoạt động

Nếu ứng dụng của bạn vẫn dùng các Hoạt động và Activity Result API, bạn có thể giữ quy trình khởi chạy dựa trên Hoạt động bằng cách dùng AuthFlowController:

private val authLauncher = registerForActivityResult(
    ActivityResultContracts.StartActivityForResult(),
) { result ->
    if (result.resultCode == RESULT_OK) {
        val user = FirebaseAuth.getInstance().currentUser
        // ...
    } else {
        // User cancelled or sign-in failed
    }
}

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
    }
}

val controller = FirebaseAuthUI.getInstance().createAuthFlow(configuration)
authLauncher.launch(controller.createIntent(this))