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

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

บทนำ

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

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

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

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

  • พื้นฐานของวิธีสร้างแอป Android
  • LiveData และ ViewModel

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

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

สิ่งที่คุณต้องดำเนินการ

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

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

สำหรับแอปในโค้ดแล็บนี้ คุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับ LiveData และ ViewModel อ่านภาพรวมของ LiveData และ ViewModel หากต้องการดูภาพรวมโดยย่อของแนวคิดเหล่านี้

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

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

ดาวน์โหลดแอปตัวอย่าง โดยคุณทำได้ 2 วิธีดังนี้

ดาวน์โหลด Zip

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

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

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

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

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

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

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

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

  1. ที่กึ่งกลางหน้าภาพรวมโปรเจ็กต์ของคอนโซล Firebase ให้คลิกไอคอน 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)
  • คุณดาวน์โหลดไฟล์กำหนดค่า Firebase สำหรับ Android ได้อีกครั้งทุกเมื่อ
  • โปรดตรวจสอบว่าไฟล์การกำหนดค่าไม่มีอักขระต่อท้ายเพิ่มเติม และควรตั้งชื่อเป็น 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

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

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

app/build.gradle:

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

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

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

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

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

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

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

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

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

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

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

  1. เปิด MainFragment.kt
  2. ในเลย์เอาต์ของ MainFragment ให้สังเกต auth_button ปัจจุบันยังไม่ได้ตั้งค่าให้จัดการข้อมูลที่ผู้ใช้ป้อน
  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 แล้วไปที่พัฒนา > การตรวจสอบสิทธิ์ > ผู้ใช้เพื่อตรวจสอบว่าตอนนี้แอปมีผู้ใช้ที่ลงทะเบียน 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 ของ observeAuthenticationState() คุณสามารถใช้ตัวแปร authenticationState ที่เพิ่งเพิ่มใน LoginViewModel และเปลี่ยน UI ตามนั้นได้ หากมีผู้ใช้ที่เข้าสู่ระบบ authButton ควรแสดงออกจากระบบ

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 ตอนนี้ปุ่มเข้าสู่ระบบควรแสดงเป็นออกจากระบบด้วย

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

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

AuthUI.getInstance().signOut(requireContext())
  1. เปิด MainFragment.kt
  2. ใน MainFragment.kt ของ observeAuthenticationState() ให้เพิ่มตรรกะการออกจากระบบเพื่อให้ 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 และวิธีใช้ฟังก์ชันอื่นๆ ที่มีให้ โปรดดูแหล่งข้อมูลต่อไปนี้

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

Codelabs:

เอกสารประกอบสำหรับนักพัฒนาแอป Android

วิดีโอ:

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