หน้านี้ได้รับการแปลโดย Cloud Translation API

การนําทางแบบมีเงื่อนไขของ Android ที่มีการเข้าสู่ระบบ

Codelab นี้เป็นส่วนหนึ่งของหลักสูตร Android ขั้นสูงใน Kotlin คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้ หากเรียนผ่าน Codelab ตามลําดับ แต่ไม่บังคับ Codelab ของหลักสูตรทั้งหมดจะแสดงอยู่ในหน้า Landing Page ขั้นสูงของ Android ใน Kotlin Codelab

Codelab นี้สร้างขึ้นจากการใช้งานการเข้าสู่ระบบบน Android ด้วย FirebaseUI แม้ว่าคุณจะดาวน์โหลดโค้ดเริ่มต้นสําหรับ Codelab นี้ได้หากยังไม่ได้ทํา Codelab ก่อนหน้า แต่คุณอาจพบว่าการใส่ Codelab สําหรับการเข้าสู่ระบบบน Android ด้วย FirebaseUI ให้เสร็จสมบูรณ์ก่อน

บทนำ

หากแอปรองรับการเข้าสู่ระบบ กรณีการใช้งานทั่วไปเพื่อจองส่วนต่างๆ ของแอปสําหรับผู้ใช้ที่ลงชื่อเข้าสู่ระบบเท่านั้น เช่น คุณอาจต้องการจองหน้าจอการตั้งค่าของแอปสําหรับผู้ใช้ที่ลงชื่อเข้าสู่ระบบ

ในกรณีดังกล่าว คุณสามารถใช้การนําทางแบบมีเงื่อนไขเพื่อนําผู้ใช้ไปยังหน้าจอที่เหมาะสมโดยพิจารณาจากสถานะการตรวจสอบสิทธิ์

ใน Codelab นี้ คุณจะต้องสร้างที่ด้านบนของแอปที่มีอยู่เพื่อเพิ่มหน้าจอการตั้งค่าที่ผู้ใช้สามารถเข้าถึงได้เมื่อเข้าสู่ระบบเท่านั้น คุณจะใช้คอมโพเนนต์การนําทางของ Android&#39 สําหรับงานนี้

สิ่งที่ควรทราบอยู่แล้ว

คอมโพเนนต์การนําทางของ Android&#39 และวิธีใช้งานในแอป Android
วิธีการเข้าสู่ระบบในแอป Android ด้วยไลบรารี FirebaseUI หากไม่คุ้นเคยกับแนวคิดนี้ คุณควรไปที่ lab การใช้การเข้าสู่ระบบบน Android ด้วย FirebaseUI แทน

สิ่งที่คุณจะได้เรียนรู้

วิธีพาผู้ใช้ไปยังหน้าจอที่เหมาะสมของแอปโดยพิจารณาว่าผู้ใช้ลงชื่อเข้าสู่ระบบหรือไม่

สิ่งที่คุณจะทํา

จัดการกับการนําผู้ใช้ไปยังหน้าจอที่ถูกต้องอย่างเหมาะสมหลังจากลงชื่อเข้าสู่ระบบเรียบร้อยแล้ว
ป้องกันไม่ให้ผู้ใช้เข้าถึงหน้าจอการตั้งค่า หากไม่ได้ลงชื่อเข้าสู่ระบบ และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าจอการเข้าสู่ระบบแทน

ใน Codelab ที่ผ่านมานั้น คุณได้ทํางานในแอปที่แสดงข้อเท็จจริงของ Android แอปของคุณอนุญาตให้ผู้ใช้เข้าสู่ระบบและออกจากระบบได้ด้วย สําหรับ Codelab นี้ ให้เพิ่มหน้าจอการตั้งค่าลงในแอปที่มีอยู่ ผู้ใช้จะเข้าถึงหน้าจอการตั้งค่าได้ก็ต่อเมื่อผู้ใช้ลงชื่อเข้าสู่ระบบเท่านั้น

หากผู้ใช้ไม่ได้ลงชื่อเข้าใช้ เมื่อพยายามเข้าถึงหน้าจอการตั้งค่า แอปจะเปลี่ยนเส้นทางไปยังหน้าจอการเข้าสู่ระบบ เมื่อขั้นตอนการเข้าสู่ระบบเสร็จสมบูรณ์แล้ว ระบบจะนําผู้ใช้ไปที่หน้าจอการตั้งค่าที่ผู้ใช้พยายามเข้าถึงในตอนแรก

Codelab นี้สร้างขึ้นจากการติดตั้งใช้งานการเข้าสู่ระบบบน Android ด้วย FirebaseUI แม้ว่าคุณจะดาวน์โหลดโค้ดเริ่มต้นสําหรับ Codelab นี้ได้หากยังไม่ได้ทํา Codelab ก่อนหน้า แต่คุณอาจพบว่าการใส่ Codelab สําหรับการเข้าสู่ระบบบน Android ด้วย FirebaseUI ให้เสร็จสมบูรณ์ก่อน

ดาวน์โหลดแอปตัวอย่าง โดยทําอย่างใดอย่างหนึ่งต่อไปนี้

ดาวน์โหลด Zip

... หรือโคลนที่เก็บ GitHub จากบรรทัดคําสั่งโดยใช้คําสั่งต่อไปนี้แล้วเปลี่ยนไปใช้ที่เก็บ start ของที่เก็บ

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

เมื่อคุณโหลดโปรเจ็กต์ใน Android Studio แล้ว ให้ทําดังนี้

เรียกใช้แอปในโปรแกรมจําลองหรืออุปกรณ์จริงเพื่อให้แน่ใจว่าระบบได้ตั้งค่าสภาพแวดล้อมของคุณเรียบร้อยแล้วเพื่อเริ่มการพัฒนา

หากยืนยันสําเร็จ คุณจะเห็นหน้าจอหลักแสดงข้อเท็จจริงสนุกๆ ของ Android และปุ่มเข้าสู่ระบบที่มุมซ้ายบน

ฟีเจอร์ปัจจุบันของแอปเริ่มต้น

หากผู้ใช้ไม่ได้ลงชื่อเข้าสู่ระบบ การแตะปุ่มเข้าสู่ระบบจะเป็นการเริ่มขั้นตอนการเข้าสู่ระบบและอนุญาตให้ผู้ใช้ลงชื่อเข้าสู่ระบบด้วยอีเมลหรือบัญชี Google
หากผู้ใช้ลงชื่อเข้าสู่ระบบ ปุ่มจะเปลี่ยนเป็นปุ่มออกจากระบบที่ให้ผู้ใช้ออกจากระบบได้

ในงานนี้ คุณจะต้องเพิ่มปุ่มหน้าจอหลักที่อนุญาตให้ผู้ใช้ไปยังหน้าจอการตั้งค่า หน้าจอการตั้งค่าจะให้ผู้ใช้เลือกประเภทข้อเท็จจริงสนุกๆ ที่ต้องการให้แสดงในหน้าจอหลัก จากหน้าจอการตั้งค่า ผู้ปกครองจะเลือกดูข้อเท็จจริงเกี่ยวกับ Android หรือข้อเท็จจริงเกี่ยวกับรัฐแคลิฟอร์เนียได้

เปิด fragment_main.xml
ใน fragment_main.xml, ให้เพิ่มปุ่มการตั้งค่าที่ฝังอยู่ใน ConstraintLayout และจัดวางไว้ที่มุมขวาบนของหน้าจอ

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

เปิด nav_graph.xml
เพิ่มการดําเนินการใน mainFragment id ของการดําเนินการคือ action_mainFragment_to_customizeFragment และปลายทางคือ 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>

เปิด MainFragment.kt
ใน onViewCreated() ให้ตั้งค่าonClickListenerสําหรับ settings_btn ด้วยการแตะปุ่มจะนําผู้ใช้ไปยัง customizeFragment

MainFragment.kt

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

หากคุณเห็นข้อผิดพลาดที่ยังไม่ได้แก้ไข ให้คอมไพล์แอปอีกครั้งจากเมนูสร้างเพื่อสร้างและใช้การทํางานการนําทางใหม่ที่คุณสร้าง
เปิดแอปอีกครั้ง ควรมีปุ่มการตั้งค่าที่ใช้งานได้ที่มุมขวาบน
คลิกปุ่มที่จะนําคุณไปยังหน้าจอการตั้งค่า หน้าจอการตั้งค่ามีตัวเลือกเดียวเท่านั้นเพื่อให้ผู้ใช้เลือกประเภทข้อเท็จจริงที่ต้องการแสดงในหน้าจอหลักได้
คลิกปุ่มย้อนกลับของอุปกรณ์ Android เพื่อกลับไปที่หน้าจอหลัก

ในงานนี้ คุณจะต้องเพิ่มโค้ดเพื่อนําผู้ใช้ไปยังหน้าจอการเข้าสู่ระบบ หากผู้ใช้พยายามเข้าถึงหน้าจอการตั้งค่าเมื่อไม่ได้เข้าสู่ระบบ

เปิด SettingsFragment.kt
ใน onViewCreated() ให้สังเกตauthenticationStateและเปลี่ยนเส้นทางผู้ใช้ไปยังLoginFragment หากผู้ใช้ไม่ตรวจสอบสิทธิ์

SettingsFragment.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"
           )
       }
   })
}

เนื่องจากแอปนําผู้ใช้ไปยังหน้าจอการเข้าสู่ระบบหากพยายามเข้าถึงหน้าจอการตั้งค่า แอปจึงต้องจัดการกับลักษณะการทํางานของปุ่มย้อนกลับในหน้าจอการเข้าสู่ระบบด้วย หากแอปไม่ปรับแต่งการจัดการลักษณะการทํางานของปุ่มย้อนกลับ ผู้ใช้จะไม่สามารถคืนค่าการย้อนกลับไปยังหน้าจอการตั้งค่าได้ แต่ระบบจะเปลี่ยนเส้นทางไปยังหน้าจอการเข้าสู่ระบบอีกครั้ง

เปิด LoginFragment.kt
ใน onViewCreated() ให้จัดการการทํางานของปุ่มย้อนกลับด้วยการนําผู้ใช้ไปยัง MainFragment

LoginFragment.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)
}

เปิดแอปอีกครั้งและยืนยันว่าคุณไม่ได้เข้าสู่ระบบ การพยายามเข้าถึงหน้าจอการตั้งค่าจะเปลี่ยนเส้นทางไปยังขั้นตอนการเข้าสู่ระบบ

แม้ว่าจะเปลี่ยนเส้นทางผู้ใช้ไปยังการเข้าสู่ระบบสําเร็จแล้ว แต่คุณยังไม่ได้จัดการสิ่งที่จะเกิดขึ้นหลังจากที่ผู้ใช้เข้าสู่ระบบสําเร็จแล้ว ดังนั้นความพยายามในการเข้าสู่ระบบจะปรากฏขึ้นเสมือนว่าไม่ทํางาน คุณจะแก้ไขปัญหานี้ในขั้นตอนถัดไป

ตอนนี้คุณได้ตั้งค่าแอปให้เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าจอการเข้าสู่ระบบได้สําเร็จ หากผู้ใช้พยายามเข้าถึงหน้าจอการตั้งค่าโดยไม่เข้าสู่ระบบ

แต่หลังจากทําตามขั้นตอนการลงชื่อเข้าใช้แล้ว ระบบจะนําคุณกลับไปยังหน้าจอการเข้าสู่ระบบอีกครั้ง ซึ่งทําให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดีและอาจทําให้สับสนได้

เพื่อมอบประสบการณ์ของผู้ใช้ที่ดีที่สุด แอปควรนําผู้ใช้กลับไปยังหน้าจอการตั้งค่าหลังจากที่ผู้ใช้เข้าสู่ระบบเรียบร้อยแล้ว

ยังอยู่ใน LoginFragment.kt&#39 และที่ใดก็ได้ใน onViewCreated() ให้สังเกต authenticationState และนําทางผู้ใช้กลับไปยัง SettingsFragment เมื่อผ่านการตรวจสอบสิทธิ์เรียบร้อยแล้ว

LoginFragment.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"
       )
   }
})

เรียกใช้แอปอีกครั้งและยืนยันว่าเมื่อลงชื่อเข้าใช้สําเร็จ ระบบจะพาคุณไปยังหน้าการตั้งค่าแทนหน้าการเข้าสู่ระบบ

ป๊อปอัปสแต็กด้านหลังด้วยป๊อปอัป BackStack(): เมื่อผู้ใช้เลื่อนดูแอป Android จะติดตามหน้าจอที่เข้าชม เมื่อผู้ใช้กดปุ่มย้อนกลับ แอปจะกลับสู่หน้าจอที่เข้าชมตามลําดับ

เมื่อคุณเด้งหน้าจอออกจากฉากหลัง จะเป็นการบอกให้ Android ข้ามหน้าจอนั้นเมื่อผู้ใช้กดปุ่มย้อนกลับ

ในกรณีนี้ คุณกําลังนําหน้าจอปัจจุบันออกจากสแต็กด้านหลัง ดังนั้นเมื่อผู้ใช้กดปุ่มย้อนกลับ แอปจะข้ามหน้าจอนี้และกลับไปที่หน้าจอที่ผู้ใช้เข้าชมก่อนเข้าชมหน้าจอนี้

กล่าวคือ เมื่อผู้ใช้กดปุ่มย้อนกลับ แอปจะไม่กลับมาที่หน้าจอเข้าสู่ระบบ แต่จะไปยังหน้าจอที่ผู้ใช้เข้าชมก่อนมายังหน้าจอการเข้าสู่ระบบ

ดูแอปที่สมบูรณ์ซึ่งมีโค้ดโซลูชันทั้งหมดได้ที่ที่เก็บ GitHub นี้ https://github.com/googlecodelabs/android-kotlin-login-Navigation

ใน Codelab นี้ คุณได้เรียนรู้แนวทางปฏิบัติแนะนําเกี่ยวกับวิธีสร้างประสบการณ์ของผู้ใช้ที่ดีในแอปที่รองรับการเข้าสู่ระบบ การสังเกตสถานะการตรวจสอบสิทธิ์ของแอปช่วยให้คุณระบุหน้าจอที่ผู้ใช้เข้าถึงและเปลี่ยนเส้นทางไปยังหน้าจอการเข้าสู่ระบบได้เมื่อจําเป็น

ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติแนะนําสําหรับการนําทางใน Android ได้ที่แหล่งข้อมูลต่อไปนี้

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

Codelab:

Android Kotlin Fundamentals: กําหนดเส้นทางการนําทาง

สําหรับลิงก์ไปยังหน้า Codelab อื่นๆ ในหลักสูตรนี้ โปรดดูหน้า Landing Page ขั้นสูงสําหรับ Android ใน Kotlin