การเข้าสู่ระบบ Android ด้วย FirebaseUI

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

บทนำ

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

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

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

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

  • พื้นฐานวิธีสร้างแอป Android
  • LiveData และโมเดลการดู

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

  • วิธีเพิ่ม Firebase ลงในโปรเจ็กต์
  • วิธีรองรับการเข้าสู่ระบบสําหรับแอป Android
  • วิธีสังเกตสถานะการตรวจสอบสิทธิ์ปัจจุบันของแอป
  • วิธีนําผู้ใช้ออกจากระบบ

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

  • ใช้คอนโซล Firebase เพื่อผสานรวม Firebase ในแอป
  • ใช้ฟีเจอร์การเข้าสู่ระบบ
  • เพิ่มการปรับแต่งในแอปสําหรับผู้ใช้ที่ลงชื่อเข้าสู่ระบบ
  • ใช้การนําผู้ใช้ออกจากระบบ

ดูข้อมูลเพิ่มเติมเกี่ยวกับ LiveData และ ViewModel

สําหรับแอปใน Codelab นี้ คุณจะต้องมีความเข้าใจขั้นพื้นฐานเกี่ยวกับ LiveData และ ViewModel อ่านภาพรวมของ LiveData และ Viewmodel หากคุณต้องการภาพรวมของเนื้อหาเหล่านี้

นอกจากนี้คุณยังไปที่หลักสูตร "การพัฒนาแอป Android ด้วย Kotlin" เพื่อเรียนรู้เกี่ยวกับหัวข้อพื้นฐานของ Android ที่คุณจะพบใน Codelab นี้ได้อีกด้วย หลักสูตรนั้นมีให้บริการเป็นหลักสูตร Udacity และหลักสูตร Codelabs

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

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

ดาวน์โหลด Zip

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

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

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

ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Firebase

ก่อนที่จะเพิ่ม Firebase ไปยังแอป Android ได้ คุณต้องสร้างโปรเจ็กต์ Firebase เพื่อเชื่อมต่อกับแอป Android ก่อน

  1. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์
  2. เลือกหรือป้อนชื่อโปรเจ็กต์ คุณตั้งชื่อโปรเจ็กต์ได้ แต่พยายามเลือกชื่อที่เกี่ยวข้องกับแอปที่กําลังสร้าง
  3. คลิกต่อไป
  4. คุณสามารถข้ามการตั้งค่า Google Analytics และเลือกตัวเลือกไว้ทีหลัง
  5. คลิกสร้างโปรเจ็กต์เพื่อตั้งค่าโปรเจ็กต์ Firebase ให้เสร็จสิ้น

ขั้นตอนที่ 2: ลงทะเบียนแอปด้วย Firebase

เมื่อคุณมีโปรเจ็กต์ Firebase แล้ว คุณสามารถเพิ่มแอป Android ลงในโปรเจ็กต์ได้

  1. ที่ตรงกลางของหน้าภาพรวมโปรเจ็กต์ของ Firebase Console ##99 ให้คลิกไอคอน Android เพื่อเปิดเวิร์กโฟลว์การตั้งค่า
  2. ป้อนรหัสแอปพลิเคชันของแอปในช่องชื่อแพ็กเกจ Android ป้อนรหัสที่แอปใช้ เนื่องจากคุณจะเพิ่มหรือแก้ไขค่านี้ไม่ได้หลังจากลงทะเบียนแอปกับโปรเจ็กต์ Firebase แล้ว
  1. บางครั้งเราเรียกรหัสแอปพลิเคชันเป็นชื่อแพ็กเกจ
  2. ค้นหารหัสแอปพลิเคชันนี้ในไฟล์ Gradle ระดับโมดูล (ระดับแอป) โดยปกติจะเป็น app/build.gradle (รหัสตัวอย่าง: com.yourcompany.yourproject)
  3. ป้อนใบรับรองการลงนาม SHA-1 สําหรับการแก้ไขข้อบกพร่อง คุณสามารถสร้างคีย์นี้ได้โดยป้อนคําสั่งต่อไปนี้ในบรรทัดคําสั่ง
keytool -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v -storepass android
  1. คลิกลงทะเบียนแอป

ขั้นตอนที่ 3: เพิ่มไฟล์การกําหนดค่า Firebase ในโปรเจ็กต์

เพิ่มไฟล์การกําหนดค่า Firebase สําหรับ Android ลงในแอป

  1. คลิกดาวน์โหลด google-services.json เพื่อรับไฟล์การกําหนดค่า Firebase Android (google-services.json)
  • คุณจะดาวน์โหลดไฟล์การกําหนดค่า Android ของ Firebase ได้ทุกเมื่อ
  • ตรวจสอบว่าไฟล์การกําหนดค่าไม่ได้ลงท้ายด้วยอักขระเพิ่มเติม และควรมีชื่อว่า google-services.json เท่านั้น
  1. ย้ายไฟล์การกําหนดค่าไปยังไดเรกทอรีโมดูล (ระดับแอป) ของแอป

ขั้นตอนที่ 4: กําหนดค่าโปรเจ็กต์ Android เพื่อเปิดใช้ผลิตภัณฑ์ Firebase

  1. หากต้องการเปิดใช้ผลิตภัณฑ์ Firebase ในแอป ให้เพิ่มปลั๊กอิน Google-services ลงในไฟล์ Gradle
  1. ในไฟล์ Gradle ระดับรูท (ระดับโปรเจ็กต์) (build.gradle) ให้เพิ่มกฎเพื่อรวมปลั๊กอินบริการของ Google และตรวจสอบว่าคุณมีที่เก็บ Maven ของ Google ด้วย

build.gradle

buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.0'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}
  1. ในไฟล์ Gradle ระดับโมดูลหรือระดับแอป (โดยทั่วไปจะเป็น app/build.gradle) ให้เพิ่มบรรทัดที่ด้านล่างของไฟล์

app/build.gradle

apply plugin: 'com.android.application'

android {
  // ...
}

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

ขั้นตอนที่ 4: เพิ่มทรัพยากร Dependency ของ Firebase

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

  1. เพิ่มทรัพยากร Dependency ต่อไปนี้ในไฟล์ build.gradle (Module:app) เพื่อให้คุณใช้ SDK ในแอปได้ firebase-auth SDK ช่วยให้จัดการผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์ของแอปพลิเคชันได้

app/build.gradle:

implementation 'com.firebaseui:firebase-ui-auth:5.0.0'
  1. ซิงค์โปรเจ็กต์ด้วยไฟล์ Gradle เพื่อให้แน่ใจว่าทรัพยากร Dependency ทั้งหมดจะพร้อมใช้งานในแอป หากระบบไม่แจ้ง ให้เลือก File > Sync Project with Gradle Files ใน Android Studio หรือจากแถบเครื่องมือ

ขั้นตอนที่ 5: เรียกใช้แอปและตรวจสอบโค้ด

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

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

ในระดับสูง แอปกิจกรรมนี้เป็นแอปเดียวที่มีส่วนย่อยหลายส่วน MainFragment มี UI ทั้งหมดที่คุณเห็นบนหน้าจอด้านล่าง (คุณจะทํางานร่วมกับ LoginFragment และ SettingsFragment ใน Codelab ติดตามผล)

  1. ทําความคุ้นเคยกับโค้ด โดยเฉพาะอย่างยิ่ง โปรดคํานึงถึงสิ่งต่อไปนี้
  • FirebaseUserLiveData คือชั้นเรียนที่คุณจะระบุเพื่อให้สังเกตผู้ใช้ Firebase ปัจจุบันที่เชื่อมโยงกับแอป คุณจะใช้อินสแตนซ์ FirebaseAuth เป็นจุดเริ่มต้นในการเข้าถึงข้อมูลผู้ใช้นี้ในขั้นตอนถัดไป
  • MainFragment ผูกอยู่กับ LoginViewModel LoginViewModel คือชั้นเรียนที่คุณจะนําไปใช้เพื่อให้ FirebaseUserLiveData สร้างตัวแปร authenticationState เมื่อใช้ตัวแปร authenticationState นี้ MainFragment จะสังเกตค่าเพื่ออัปเดต UI ให้สอดคล้องกันได้

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

  1. ไปที่คอนโซล Firebase (หมายเหตุ: หากคุณยังคงอยู่ในเวิร์กโฟลว์ "เพิ่ม Firebase" ให้คลิก X ที่มุมซ้ายบนเพื่อกลับไปที่คอนโซล
  2. เลือกโปรเจ็กต์ หากยังไม่ได้ทํา
  3. เปิดแถบนําทางด้านซ้าย แล้วเลือกพัฒนา &gt การตรวจสอบสิทธิ์

  1. เลือกแท็บวิธีการลงชื่อเข้าใช้ในแถบนําทางด้านบน

  1. คลิกแถวอีเมล/รหัสผ่าน
  2. ในป๊อปอัป ให้เลื่อนสวิตช์เปิดใช้ แล้วคลิกบันทึก
  3. ในทํานองเดียวกัน ให้คลิกแถว Google
  4. สลับสวิตช์เปิดใช้ จากนั้นป้อนอีเมลสนับสนุนสําหรับโปรเจ็กต์ แล้วคลิกบันทึก

ในงานนี้ คุณจะได้ใช้ฟีเจอร์การเข้าสู่ระบบให้กับผู้ใช้

  1. เปิด MainFragment.kt
  2. เห็น auth_button ในเลย์เอาต์ MainFragment&#39 ขณะนี้ยังไม่มีการตั้งค่าให้รองรับการป้อนข้อมูลใดๆ ของผู้ใช้
  3. ใน onViewCreated(), ให้เพิ่ม onClickListener ไปยัง auth_button เพื่อโทรหา launchSignInFlow()

MainFragment.kt

binding.authButton.setOnClickListener { launchSignInFlow() }
  1. ค้นหาเมธอด launchSignInFlow() ใน MainFragment.kt ปัจจุบันมี TODO
  2. กรอกฟังก์ชัน launchSignInFlow() ตามที่แสดงด้านล่าง

MainFragment.kt

private fun launchSignInFlow() {
   // Give users the option to sign in / register with their email or Google account.
   // If users choose to register with their email,
   // they will need to create a password as well.
   val providers = arrayListOf(
       AuthUI.IdpConfig.EmailBuilder().build(), AuthUI.IdpConfig.GoogleBuilder().build()

       // This is where you can provide more ways for users to register and 
       // sign in.
   )

   // Create and launch sign-in intent.
   // We listen to the response of this activity with the
   // SIGN_IN_REQUEST_CODE 
   startActivityForResult(
       AuthUI.getInstance()
           .createSignInIntentBuilder()
           .setAvailableProviders(providers)
           .build(),
       MainFragment.SIGN_IN_REQUEST_CODE
   )
}

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

  1. ใน MainFragment.kt คุณฟังผลลัพธ์ของขั้นตอนการลงชื่อเข้าใช้ได้โดยใช้เมธอด onActivityResult() ดังที่แสดงด้านล่าง เมื่อเริ่มกระบวนการลงชื่อเข้าใช้ด้วย SIGN_IN_REQUEST_CODE คุณจะฟังผลลัพธ์ของกระบวนการลงชื่อเข้าใช้ได้โดยกรองตามเวลาที่ SIGN_IN_REQUEST_CODE ถูกส่งกลับไปยัง onActivityResult() เริ่มต้นด้วยการมีบันทึกบางอย่างเพื่อให้ทราบว่าผู้ใช้ลงชื่อเข้าใช้สําเร็จหรือไม่

MainFragment.kt

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
   super.onActivityResult(requestCode, resultCode, data)
   if (requestCode == SIGN_IN_REQUEST_CODE) {
       val response = IdpResponse.fromResultIntent(data)
       if (resultCode == Activity.RESULT_OK) {
           // User successfully signed in
           Log.i(TAG, "Successfully signed in user ${FirebaseAuth.getInstance().currentUser?.displayName}!")
       } 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.
           Log.i(TAG, "Sign in unsuccessful ${response?.error?.errorCode}")
       }
   }
}

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

  1. เรียกใช้แอปและยืนยันว่าการแตะปุ่มเข้าสู่ระบบจะเปิดหน้าจอเข้าสู่ระบบขึ้นมา
  2. คุณลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน หรือลงชื่อเข้าใช้ด้วยบัญชี Google ได้แล้ว
  3. UI หลังเข้าสู่ระบบจะไม่มีการเปลี่ยนแปลง (คุณจะใช้การอัปเดต UI ในขั้นตอนถัดไป) แต่หากทุกอย่างทํางานได้อย่างถูกต้อง คุณจะเห็นข้อความบันทึกว่า Successfully signed in user ${your name}! หลังจากทําตามขั้นตอนการลงทะเบียนแล้ว
  4. นอกจากนี้ คุณยังไปที่คอนโซล Firebase แล้วไปที่พัฒนา > การตรวจสอบสิทธิ์ &gt ผู้ใช้ เพื่อตรวจสอบว่าแอปมีผู้ใช้ที่ลงทะเบียนแล้ว 1 คน
  5. โปรดทราบว่าเมื่อผู้ใช้สร้างบัญชีสําหรับแอป บัญชีนี้จะเชื่อมโยงกับแอปของคุณเท่านั้น และจะไม่เชื่อมโยงกับแอปที่ใช้ Firebase สําหรับฟังก์ชันการเข้าสู่ระบบ

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

  1. เปิดชั้นเรียน FirebaseUserLiveData.kt ที่สร้างให้คุณแล้ว สิ่งแรกที่ต้องทําคือให้ชั้นเรียนอื่นๆ ในแอปทราบเมื่อผู้ใช้ลงชื่อเข้าสู่ระบบหรือออกจากระบบ แต่คลาสยังไม่ได้ทําอะไรเลย เนื่องจากค่าของ LiveData ยังไม่ได้อัปเดต
  2. เนื่องจากคุณใช้ไลบรารี FirebaseAuth อยู่ จึงสามารถฟังการเปลี่ยนแปลงของผู้ใช้ที่ลงชื่อเข้าสู่ระบบด้วยการเรียกกลับ FirebaseUser.AuthStateListener ที่บังคับใช้กับคุณซึ่งเป็นส่วนหนึ่งของไลบรารี FirebaseUI ระบบจะเรียกให้โค้ดเรียกกลับนี้แสดงเมื่อผู้ใช้ลงชื่อเข้าสู่ระบบหรือออกจากระบบแอปของคุณ
  3. โปรดสังเกตว่า FirebaseUserLiveData.kt จะกําหนดตัวแปร authStateListener คุณจะใช้ตัวแปรนี้เพื่อเก็บค่าของ LiveData ตัวแปร authStateListener ถูกสร้างขึ้นเพื่อให้คุณสามารถเริ่มและหยุดฟังการเปลี่ยนแปลงในสถานะการตรวจสอบสิทธิ์ได้อย่างถูกต้องโดยอิงจากสถานะของแอปพลิเคชัน ตัวอย่างเช่น หากผู้ใช้ใส่แอปอยู่เบื้องหลัง แอปควรหยุดฟังการเปลี่ยนแปลงของสถานะการตรวจสอบสิทธิ์เพื่อป้องกันไม่ให้เกิดหน่วยความจํารั่วไหล
  4. อัปเดต authStateListener เพื่อให้ค่าของ FirebaseUserLiveData ตรงกับผู้ใช้ Firebase ปัจจุบัน

FirebaseUserLiveData.kt

private val authStateListener = FirebaseAuth.AuthStateListener { firebaseAuth ->
   value = firebaseAuth.currentUser
}
  1. เปิด LoginViewModel.kt
  2. ใน LoginViewModel.kt ให้สร้างตัวแปร authenticationState โดยอิงตามออบเจ็กต์ FirebaseUserLiveData ที่คุณเพิ่งติดตั้งใช้งาน การสร้างตัวแปร authenticationState นี้ทําให้คลาสอื่นๆ สามารถค้นหาว่าผู้ใช้ลงชื่อเข้าสู่ระบบผ่าน LoginViewModel หรือไม่

LoginViewModel.kt

val authenticationState = FirebaseUserLiveData().map { user ->
   if (user != null) {
       AuthenticationState.AUTHENTICATED
   } else {
       AuthenticationState.UNAUTHENTICATED
   }
}
  1. เปิด "MainFragment.kt."
  2. ใน MainFragment.kt&#39 observeAuthenticationState() คุณสามารถใช้ตัวแปร authenticationState ที่คุณเพิ่งเพิ่มใน LoginViewModel และเปลี่ยน UI ให้สอดคล้องกันได้ หากมีผู้ใช้ที่ลงชื่อเข้าสู่ระบบ authButton ควรแสดง Logout

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }

                // TODO 2. If the user is logged in, 
                 // you can customize the welcome message they see by
                 // utilizing the getFactWithPersonalization() function provided

           }
           else -> {
               // TODO 3. Lastly, if there is no logged-in user, 
                // auth_button should display Login and
                //  launch the sign in screen when clicked.
           }
       }
   })
}
  1. หากผู้ใช้ลงชื่อเข้าสู่ระบบ คุณจะปรับแต่งข้อความต้อนรับที่พบเห็นได้โดยใช้ฟังก์ชัน getFactWithPersonalization() ที่ให้ไว้ใน MainFragment

MainFragment.kt

binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
  1. สุดท้าย หากไม่มีผู้ใช้ที่ลงชื่อเข้าสู่ระบบ (เมื่อ authenticationState เป็นอย่างอื่นที่ไม่ใช่ LoginViewModel.AuthenticationState.AUTHENTICATED) auth_button ควรแสดงการเข้าสู่ระบบ แล้วเปิดหน้าจอลงชื่อเข้าใช้เมื่อคลิก นอกจากนี้ ไม่ควรมีการปรับเปลี่ยนข้อความในแบบของคุณ

MainFragment.kt

binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener { launchSignInFlow() }
binding.welcomeText.text = factToDisplay

เมื่อทําตามขั้นตอนทั้งหมดเรียบร้อยแล้ว เมธอด observeAuthenticationState() สุดท้ายของคุณควรมีลักษณะคล้ายกับโค้ดด้านล่าง

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
        // TODO 1. Use the authenticationState variable you just added 
         // in LoginViewModel and change the UI accordingly.
       when (authenticationState) {
            // TODO 2.  If the user is logged in, 
             // you can customize the welcome message they see by
             // utilizing the getFactWithPersonalization() function provided
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }
           }
           else -> {
                // TODO 3. Lastly, if there is no logged-in user, 
                 // auth_button should display Login and
                 // launch the sign in screen when clicked.
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}
  1. เรียกใช้แอป UI ควรอัปเดตตามว่าผู้ใช้ลงชื่อเข้าสู่ระบบหรือไม่ หากทุกอย่างทํางานได้อย่างถูกต้องและลงชื่อเข้าสู่ระบบแล้ว หน้าจอหลักควรจะแสดงชื่อของคุณนอกเหนือจากการแสดงข้อเท็จจริงเกี่ยวกับ Android ขณะนี้ปุ่ม Login ควรแสดง Logout ด้วย

ในงานนี้ คุณจะได้ใช้ฟีเจอร์ออกจากระบบ

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

AuthUI.getInstance().signOut(requireContext())
  1. เปิด MainFragment.kt
  2. ใน observeAuthenticationState() ของ MainFragment.kt&#39 ให้เพิ่มตรรกะการออกจากระบบเพื่อให้ auth_button ทํางานได้อย่างถูกต้องเมื่อมีผู้ใช้ที่ลงชื่อเข้าสู่ระบบ ผลลัพธ์สุดท้ายของเมธอดจะเป็นโค้ดด้านล่าง

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)

               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   AuthUI.getInstance().signOut(requireContext())
               }
           }
           else -> {
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}
  1. เรียกใช้แอป
  2. แตะปุ่มออกจากระบบและยืนยันว่าผู้ใช้ออกจากระบบแล้ว และสถานะของปุ่มจะเปลี่ยนเป็นเข้าสู่ระบบ

คุณดูเวอร์ชันล่าสุดของแอปที่เสร็จสมบูรณ์แล้วได้ที่นี่ https://github.com/googlecodelabs/android-kotlin-login

ใน Codelab นี้ คุณจะได้เรียนรู้เรื่องต่อไปนี้

  • วิธีเพิ่ม Firebase ลงในโปรเจ็กต์โดยเพิ่มทรัพยากร Dependency ที่จําเป็นในไฟล์ Gradle และตั้งค่าโปรเจ็กต์ในคอนโซล Firebase
  • วิธีใช้การเข้าสู่ระบบสําหรับแอปโดยใช้ไลบรารี FirebaseUI และระบุวิธีอนุญาตให้ผู้ใช้เข้าสู่ระบบ โปรดทราบว่าบัญชีที่ผู้ใช้สร้างในแอปมีความเฉพาะเจาะจงกับแอปของคุณเท่านั้น และจะไม่แชร์กับแอปทั้งหมดที่ใช้ Firebase สําหรับฟังก์ชันการเข้าสู่ระบบ
  • วิธีสังเกตสถานะการตรวจสอบสิทธิ์ปัจจุบันของแอปโดยใช้ LiveData
  • วิธีนําผู้ใช้ออกจากระบบ

Codelab นี้กล่าวถึงข้อมูลพื้นฐานเกี่ยวกับวิธีรองรับการเข้าสู่ระบบสําหรับแอป Android

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

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

Codelab:

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

วิดีโอ:

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