Trang này được dịch bởi Cloud Translation API.

Tính năng điều hướng có điều kiện trên Android có đăng nhập

Lớp học lập trình này nằm trong khóa học Nâng cao về Android trong Kotlin. Bạn sẽ nhận được nhiều giá trị nhất từ khóa học này nếu bạn làm việc qua các lớp học lập trình theo trình tự, nhưng bạn không bắt buộc phải làm vậy. Tất cả các lớp học lập trình đều có trên trang đích của các lớp học lập trình Android nâng cao trong Kotlin.

Lớp học lập trình này xây dựng dựa trên Triển khai tính năng đăng nhập trên Android bằng FirebaseUI. Mặc dù bạn có thể tải xuống mã dành cho người mới bắt đầu cho lớp học lập trình này nếu bạn chưa thực hiện lớp học lập trình trước đó, nhưng bạn có thể thấy hữu ích khi hoàn thành lớp học lập trình Triển khai đăng nhập trên Android bằng FirebaseUI.

Giới thiệu

Nếu ứng dụng của bạn hỗ trợ tính năng đăng nhập, thì trường hợp sử dụng phổ biến này chỉ dành riêng cho những phần của ứng dụng đối với người dùng đã đăng nhập. Ví dụ: bạn có thể muốn đặt trước màn hình Cài đặt của ứng dụng cho người dùng đã đăng nhập.

Đối với những trường hợp như vậy, bạn có thể sử dụng chức năng điều hướng có điều kiện để đưa người dùng đến màn hình thích hợp dựa trên trạng thái xác thực của họ.

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng hiện có dựa trên một ứng dụng hiện có mà người dùng chỉ có thể truy cập vào phần cài đặt nếu họ đã đăng nhập. Bạn sẽ sử dụng các thành phần điều hướng của Android's cho tác vụ này.

Kiến thức bạn cần có

Thành phần điều hướng của Android và cách thành phần này được dùng trong các ứng dụng Android
Cách đăng nhập được triển khai trong ứng dụng Android của bạn với thư viện FirebaseUI. Nếu chưa quen với khái niệm này, bạn nên xem qua lớp học lập trình Triển khai đăng nhập trên Android bằng FirebaseUI.

Kiến thức bạn sẽ học được

Cách điều hướng người dùng đến màn hình thích hợp của ứng dụng dựa trên việc họ có đăng nhập hay không.

Bạn sẽ thực hiện

Xử lý đúng cách khi người dùng chuyển đến đúng màn hình sau khi họ đăng nhập thành công.
Ngăn người dùng truy cập vào màn hình Cài đặt nếu họ không đăng nhập và thay vào đó chuyển hướng họ đến màn hình Đăng nhập.

Trong lớp học lập trình trước đây, bạn đã làm việc trên một ứng dụng hiển thị dữ liệu Android. Ứng dụng của bạn cũng cho phép người dùng đăng nhập và đăng xuất. Đối với lớp học lập trình này, bạn sẽ thêm một màn hình cài đặt vào ứng dụng hiện có. Người dùng sẽ chỉ truy cập được vào màn hình cài đặt khi họ đăng nhập.

Nếu người dùng không đăng nhập thì khi cố gắng truy cập vào màn hình cài đặt, ứng dụng sẽ chuyển hướng họ đến màn hình đăng nhập. Sau khi hoàn tất quy trình đăng nhập, người dùng sẽ quay lại màn hình cài đặt mà họ cố truy cập ban đầu.

Tải ứng dụng mẫu xuống, bạn có thể:

Tải tệp zip xuống

... hoặc sao chép kho lưu trữ GitHub từ dòng lệnh bằng cách dùng lệnh sau đây và chuyển sang nhánh start của kho lưu trữ:

$  git clone https://github.com/googlecodelabs/android-kotlin-login-navigation

Sau khi bạn tải dự án trong Android Studio:

Chạy ứng dụng trên trình mô phỏng hoặc thiết bị thực để đảm bảo rằng môi trường của bạn đã được thiết lập thành công để bắt đầu phát triển.

Nếu thành công, bạn sẽ thấy màn hình chính hiển thị một thông tin thú vị về Android và nút đăng nhập ở góc trên cùng bên trái.

Các tính năng hiện tại của ứng dụng dành cho người mới bắt đầu:

Nếu người dùng không đăng nhập, thì việc nhấn vào nút Đăng nhập sẽ bắt đầu quy trình đăng nhập và cho phép người dùng đăng nhập bằng địa chỉ email hoặc Tài khoản Google.
Nếu người dùng đăng nhập, nút sẽ thay đổi thành nút Đăng xuất để cho phép người dùng đăng xuất.

Trong nhiệm vụ này, bạn sẽ thêm một nút trên màn hình chính để cho phép người dùng chuyển đến màn hình cài đặt. Màn hình cài đặt sẽ cho phép người dùng chọn loại thông tin thú vị mà họ muốn hiển thị trên màn hình chính. Từ màn hình cài đặt, người dùng có thể chọn xem thông tin thực tế về Android hoặc thông tin về tiểu bang California.

Mở fragment_main.xml.
Trong fragment_main.xml,, hãy thêm nút Cài đặt lồng trong ConstraintLayout và định vị nút này ở góc trên cùng bên phải của màn hình.

Fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

Mở nav_graph.xml.
Thêm một hành động bên trong mainFragment. id của hành động là action_mainFragment_to_customizeFragment và đích đến là customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

Mở MainFragment.kt.
Trong onViewCreated(), hãy đặt onClickListener cho settings_btn để việc nhấn vào nút này sẽ chuyển người dùng đến customizeFragment.

MainFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

Nếu bạn thấy lỗi chưa được giải quyết, hãy biên dịch lại ứng dụng từ menu Tạo để tạo và sử dụng hành động điều hướng mới mà bạn đã tạo.
Chạy lại ứng dụng. Bây giờ, sẽ có một nút Cài đặt hoạt động ở góc trên cùng bên phải.
Nhấp vào nút này để chuyển đến màn hình Cài đặt. Màn hình Cài đặt chỉ có một tùy chọn để cho phép người dùng chọn loại thông tin thú vị mà họ muốn xem hiển thị trên màn hình chính.
Nhấp vào nút quay lại của thiết bị Android để quay lại màn hình chính.

Trong tác vụ này, bạn sẽ thêm mã để điều hướng người dùng đến màn hình đăng nhập nếu họ cố truy cập vào màn hình cài đặt khi họ không đăng nhập.

Mở SettingsFragment.kt.
Trong onViewCreated(), hãy quan sát authenticationState và chuyển hướng người dùng đến LoginFragment nếu họ chưa được xác thực.

Cài đặt Mảnh.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

Vì ứng dụng đưa người dùng đến màn hình đăng nhập nếu họ cố truy cập vào màn hình cài đặt, nên ứng dụng cũng cần xử lý hoạt động của nút quay lại trên màn hình đăng nhập. Nếu ứng dụng không tùy chỉnh hoạt động xử lý nút quay lại, người dùng sẽ bị mắc kẹt trong vòng lặp vô hạn khi cố gắng quay lại màn hình cài đặt, nhưng sau đó lại được chuyển hướng đến màn hình đăng nhập.

Mở LoginFragment.kt.
Trong onViewCreated(), hãy xử lý các thao tác đối với nút quay lại bằng cách đưa người dùng trở lại MainFragment.

FragmentFragment.kt

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

Chạy lại ứng dụng của bạn và xác nhận rằng nếu bạn không đăng nhập, thì khi bạn thử truy cập vào màn hình cài đặt, bạn sẽ được chuyển hướng đến quy trình đăng nhập.

Mặc dù bạn đã chuyển hướng thành công người dùng đăng nhập, bạn chưa xử lý điều gì xảy ra sau khi người dùng đăng nhập thành công, vì vậy việc cố đăng nhập sẽ xuất hiện như thể nó không hoạt động. Bạn sẽ khắc phục vấn đề này trong bước tiếp theo.

Cho đến nay, bạn đã thiết lập ứng dụng thành công để chuyển hướng người dùng đến màn hình đăng nhập nếu họ cố truy cập vào màn hình cài đặt mà không đăng nhập.

Tuy nhiên, sau khi hoàn tất quy trình đăng nhập, bạn sẽ được đưa trở lại màn hình đăng nhập lần nữa. Đây không phải là một trải nghiệm người dùng tốt và có thể gây nhầm lẫn.

Để cung cấp trải nghiệm lý tưởng cho người dùng, ứng dụng phải đưa người dùng trở lại màn hình cài đặt sau khi người dùng đăng nhập thành công.

Vẫn ở LoginFragment.kt\39; ở bất kỳ đâu trong onViewCreated(), hãy quan sát authenticationState và di chuyển người dùng trở lại SettingsFragment khi họ được xác thực thành công.

FragmentFragment.kt

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

Chạy lại ứng dụng của bạn và xác nhận rằng ngay bây giờ khi bạn đăng nhập thành công, bạn sẽ truy cập vào trang Cài đặt thay vì trang Đăng nhập.

Hiển thị ngăn xếp lùi bằng popBackStack(): Khi người dùng tiến hành thông qua một ứng dụng, Android sẽ theo dõi các màn hình mà họ truy cập. Khi người dùng nhấn nút quay lại, ứng dụng sẽ quay lại màn hình đã truy cập theo thứ tự.

Khi bạn đẩy một màn hình ra khỏi ngăn xếp lùi, về cơ bản bạn đang yêu cầu Android bỏ qua màn hình đó khi người dùng nhấn nút quay lại.

Trong trường hợp này, bạn đang xóa màn hình hiện tại khỏi ngăn xếp lùi để khi người dùng nhấn vào nút quay lại, ứng dụng sẽ bỏ qua màn hình này và quay lại màn hình mà người dùng đã truy cập trước khi truy cập màn hình này.

Nói cách khác, khi người dùng nhấn vào nút quay lại, ứng dụng sẽ không quay lại màn hình đăng nhập mà thay vào đó sẽ chuyển đến màn hình mà người dùng đã truy cập trước khi đến màn hình đăng nhập.

Bạn có thể xem toàn bộ ứng dụng bằng cách sử dụng tất cả mã giải pháp tại Giinterestb repo https://github.com/googlecodelabs/android-kotlin-login-navigation.

Trong lớp học lập trình này, bạn đã học được các phương pháp hay nhất về cách tạo trải nghiệm người dùng tốt trong ứng dụng hỗ trợ đăng nhập. Bằng cách quan sát trạng thái xác thực của ứng dụng, bạn có thể xác định màn hình mà người dùng có thể truy cập và chuyển hướng họ đến màn hình đăng nhập khi cần.

Để biết thêm về các phương pháp hay nhất khi đi theo chỉ dẫn trong Android, hãy xem các tài nguyên sau:

Tài liệu dành cho nhà phát triển Android:

Lớp học lập trình:

Android Kotlin Fundamentals: Xác định đường dẫn điều hướng

Để xem đường liên kết đến các lớp học lập trình khác trong khóa học này, hãy xem trang đích Nâng cao cho Android trong Kotlin.