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

FirebaseUI là một thư viện được tích hợp 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ả xuống để sử dụng trong ứng dụng. FirebaseUI mang lại các lợi ích sau:

  • Nhiều nhà cung cấp – quy trình đăng nhập cho email/mật khẩu, liên kết email, xác thực điện thoại, Đăng nhập bằng Google, Đăng nhập Facebook, Đăng nhập Twitter và Đăng nhập GitHub.
  • Quản lý tài khoản – các quy trình để xử lý các tác vụ 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 – giúp liên kết an toàn tài khoản người dùng giữa các nhà cung cấp danh tính.
  • Nâng cấp người dùng ẩn danh – quy trình nâng cấp người dùng ẩn danh một cách an toàn.
  • Giao diện tuỳ chỉnh – tuỳ chỉnh giao diện của FirebaseUI cho phù hợp với ứng dụng của bạn. Ngoài ra, vì FirebaseUI là nguồn mở nên bạn có thể phát triển dự án và tuỳ chỉnh chính xác theo nhu cầu của mình.
  • Smart Lock cho Mật khẩu – tích hợp tự động với Smart Lock cho Mật khẩu để đăng nhập nhanh chóng trên nhiều thiết bị.

Trước khi bắt đầu

  1. Thêm Firebase vào dự án Android của bạn nếu bạn chưa thực hiện.

  2. Thêm các phần phụ thuộc cho FirebaseUI vào tệp build.gradle cấp ứng dụng. Nếu muốn hỗ trợ tính năng đăng nhập bằng Facebook hoặc Twitter, bạn cũng nên thêm các SDK của Facebook và 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 xác thực của FirebaseUI có các phần phụ thuộc bắc cầu trên SDK Firebase và SDK Dịch vụ Google Play.

  3. Trong bảng điều khiển của Firebase, hãy mở phần Xác thực rồi bật các phương thức đăng nhập mà bạn muốn hỗ trợ. Một số phương thức đăng nhập yêu cầu thêm thông tin, thường có trong bảng điều khiển dành cho nhà phát triển của dịch vụ.

  4. Nếu bạn đã bật tính năng Đăng nhập bằng Google:

    1. Khi được nhắc trong bảng điều khiển, hãy tải tệp cấu hình Firebase đã cập nhật xuống (google-services.json). Tệp này hiện chứa thông tin ứng dụng OAuth cần thiết để đăng nhập bằng Google.

    2. Di chuyển tệp cấu hình đã cập nhật này vào dự án Android Studio và thay thế tệp cấu hình tương ứng đã lỗi thời. (Xem bài viết Thêm Firebase vào dự án Android của bạn.)

    3. Nếu bạn chưa chỉ định vân tay số SHA của ứng dụng, hãy thực hiện việc này từ trang Cài đặt của bảng điều khiển Firebase. Vui lòng xem bài viết Xác thực ứng dụng của bạn để biết thông tin chi tiết về cách lấy vân tay số SHA của ứng dụng.

  5. Nếu bạn hỗ trợ tính năng đăng nhập bằng Facebook hoặc Twitter, hãy thêm tài nguyên chuỗi vào strings.xml để chỉ định thông tin nhận dạng mà mỗi nhà cung cấp yêu cầu:

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

Đăng nhập

Tạo một ActivityResultLauncher để đăng ký một lệnh gọi lại cho hợp đồng kết quả Hoạt động 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);
            }
        }
);

Để bắt đầu quy trình đăng nhập FirebaseUI, hãy tạo một ý định đăng nhập bằng các phương thức đăng nhập ưu tiên:

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);

Khi quy trình đăng nhập hoàn tất, bạn sẽ nhận được kết quả trong 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.
        // ...
    }
}

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

  1. Trong bảng điều khiển của Firebase, hãy mở phần Xác thực. Trên thẻ Phương thức đăng nhập, hãy bật trình cung cấp Email/mật khẩu. Xin lưu ý rằng bạn phải bật tính năng đăng nhập bằng email/mật khẩu thì mới dùng được tính năng đăng nhập bằng đường liên kết email.

  2. Cũng trong phần này, hãy bật phương thức đăng nhập Email link (passwordless sign-in) (Đường liên kết qua email (đăng nhập không cần mật khẩu)) rồi nhấp vào Save (Lưu).

  3. Bạn cũng sẽ phải bật Đường liên kết động của Firebase để sử dụng tính năng đăng nhập bằng đường liên kết email. Trong bảng điều khiển của Firebase, hãy nhấp vào Đường liên kết động trong mục Engage trên thanh điều hướng. Nhấp vào Bắt đầu rồi thêm miền. Miền mà bạn chọn ở đây sẽ được phản ánh trong các đường liên kết email gửi đến người dùng của bạn.

  4. Bạn có thể bật tính năng đăng nhập đường liên kết email trong FirebaseUI bằng cách gọi enableEmailLinkSignIn trên bản sao EmailBuilder. Bạn cũng sẽ cần cung cấp một đối tượng ActionCodeSettings hợp lệ có setHandleCodeInApp được đặt thành true. Ngoài ra, bạn cần đưa URL mà bạn chuyển đến setUrl vào danh sách cho phép. Bạn có thể thực hiện việc này trong bảng điều khiển của Firebase trong phần Xác thực -> Phương thức đăng nhập -> Miền được uỷ quyền.

    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. Nếu bạn muốn lấy đường liên kết trong một hoạt động cụ thể, vui lòng làm theo các bước tại đây. Nếu không, đường liên kết này sẽ chuyển hướng đến hoạt động của trình chạy.

  6. Sau khi bắt được đường liên kết sâu, bạn cần gọi xác minh để chúng tôi có thể xử lý cho bạn. Nếu chúng tôi có thể, bạn cần truyền thông tin đó cho chúng tôi qua 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. Không bắt buộc Tính năng đăng nhập vào đường liên kết email trên nhiều thiết bị được hỗ trợ, tức là đường liên kết được gửi qua ứng dụng Android của bạn có thể dùng để đăng nhập trên web hoặc các ứng dụng của Apple. Theo mặc định, tính năng hỗ trợ nhiều thiết bị sẽ được bật. Bạn có thể tắt chế độ này bằng cách gọi setForceSameDevice trên thực thể EmailBuilder.

    Hãy xem bài viết về FirebaseUI-WebFirebaseUI-iOS để biết thêm thông tin.

Đăng xuất

FirebaseUI cung cấp các phương thức thuận tiện để đăng xuất khỏi Xác thực Firebase cũng như tất cả các nhà cung cấp danh tính trên mạng xã hội:

Kotlin+KTX

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

Java

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

Bạn cũng có thể xoá hoàn toàn tài khoản của người dùng:

Kotlin+KTX

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

Java

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

Tùy chỉnh

Theo mặc định, FirebaseUI sử dụng AppCompat để tuỳ chỉnh giao diện, tức là FirebaseUI sẽ sử dụng bảng phối màu của ứng dụng một cách tự nhiên. Nếu cần tuỳ chỉnh thêm, bạn có thể truyền một giao diện và biểu trưng đến trình tạo Intent đăng nhập:

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);

Bạn cũng có thể đặt chính sách quyền riêng tư và điều khoản dịch vụ tuỳ chỉnh:

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);

Các bước tiếp theo

  • Để biết thêm thông tin về cách sử dụng và tuỳ chỉnh FirebaseUI, hãy xem tệp README trên GitHub.
  • Nếu bạn gặp phải một vấn đề trong FirebaseUI và muốn báo cáo vấn đề đó, hãy sử dụng Công cụ theo dõi lỗi của GitHub.