เพิ่มการลงชื่อเข้าใช้ในแอป Android ได้ง่ายๆ ด้วย Firebase UI

FirebaseUI Auth เป็นไลบรารีที่สร้างขึ้นบน Firebase Authentication SDK ซึ่งมี โฟลว์ UI แบบดรอปอินสำหรับใช้ในแอป

โฟลว์การลงชื่อเข้าใช้ที่แนะนำใช้หน้าจอ Compose สำหรับแอปที่ยังคงใช้ กิจกรรมอยู่ โปรดดูส่วนแอปที่ใช้กิจกรรมอยู่

FirebaseUI Auth มีประโยชน์ดังต่อไปนี้

  • ผู้ให้บริการหลายราย \- โฟลว์การลงชื่อเข้าใช้สำหรับอีเมล/รหัสผ่าน, โทรศัพท์, Google, Facebook, Apple, GitHub, Microsoft, Yahoo, Twitter, การตรวจสอบสิทธิ์แบบไม่ระบุชื่อ และ OAuth ที่กำหนดเอง
  • การจัดการบัญชี \- โฟลว์สำหรับจัดการงานการจัดการบัญชี เช่น การสร้างบัญชีและการรีเซ็ตรหัสผ่าน
  • การลิงก์บัญชี \- โฟลว์สำหรับการลิงก์บัญชีผู้ใช้กับผู้ให้บริการข้อมูลประจำตัวต่างๆ อย่างปลอดภัย
  • การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ \- โฟลว์สำหรับการอัปเกรดผู้ใช้ที่ไม่ระบุชื่ออย่างปลอดภัย
  • ธีมที่กำหนดเอง \- การรองรับ UI ของ Material 3 ที่สามารถรับช่วงธีมของแอปได้ นอกจากนี้ เนื่องจาก FirebaseUI เป็นโอเพนซอร์ส คุณจึงสามารถ Fork โปรเจ็กต์และปรับแต่งให้ตรงกับความต้องการของคุณได้
  • เครื่องมือจัดการข้อมูลเข้าสู่ระบบ \- การผสานรวมกับ เครื่องมือจัดการข้อมูลเข้าสู่ระบบ โดยอัตโนมัติเพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์ที่รวดเร็ว
  • การตรวจสอบสิทธิ์แบบหลายปัจจัย \- การรองรับ SMS และ TOTP เพื่อความปลอดภัยเพิ่มเติม

ก่อนเริ่มต้น

  1. หากยังไม่ได้ดำเนินการ เพิ่ม Firebase ลงในโปรเจ็กต์ Android
  2. ในคอนโซล Firebase ให้เปิดใช้วิธีการลงชื่อเข้าใช้ที่คุณต้องการรองรับ
  3. เพิ่ม FirebaseUI Auth ลงในโมดูลแอปโดยทำดังนี้
dependencies {
    // Check Maven Central for the latest version:
    // https://central.sonatype.com/artifact/com.firebaseui/firebase-ui-auth/versions
    implementation("com.firebaseui:firebase-ui-auth:10.0.0-beta02")

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

ตั้งค่าวิธีการลงชื่อเข้าใช้

Google Sign-In

ปลั๊กอิน google-services Gradleจะให้การกำหนดค่า Google Sign-In โดยอัตโนมัติ ตรวจสอบว่าคุณได้เปิดใช้ Google Sign-In ใน คอนโซล Firebase แล้ว

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

หากใช้การเข้าสู่ระบบด้วย Facebook ให้เพิ่ม Facebook App ID ลงใน strings.xml โดยทำดังนี้

<resources>
    <string name="facebook_application_id" translatable="false">YOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_client_token" translatable="false">CHANGE-ME</string>
</resources>

ดูวิธีการตั้งค่าได้ในเอกสารประกอบของ Facebook for Developers

ผู้ให้บริการรายอื่นๆ

ผู้ให้บริการ Twitter, GitHub, Microsoft, Yahoo และ Apple ต้องมีการกำหนดค่าในคอนโซล Firebase แต่ไม่ต้องตั้งค่าเพิ่มเติมที่เฉพาะเจาะจงสำหรับ Android ดูวิธีการเฉพาะของผู้ให้บริการได้ในเอกสารประกอบของ Firebase Auth

เลือกผู้ให้บริการที่ต้องการภายใน authUIConfiguration โดยทำดังนี้

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Phone(
                defaultCountryCode = "US",
            )
        )
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
        provider(AuthProvider.Facebook())
    }
}

การลงชื่อเข้าใช้ด้วยลิงก์อีเมลจะอยู่ในการกำหนดค่าผู้ให้บริการอีเมล

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(
            AuthProvider.Email(
                isEmailLinkSignInEnabled = true,
                emailLinkActionCodeSettings = actionCodeSettings {
                    url = "https://example.com/auth"
                    handleCodeInApp = true
                    setAndroidPackageName(
                        "com.example.app",
                        true,
                        null,
                    )
                },
            )
        )
    }
}

ดูโฟลว์การจัดการ Deep Link แบบเต็มได้ในส่วนการลงชื่อเข้าใช้ด้วยลิงก์อีเมลของ README ใน GitHub

ลงชื่อเข้าใช้

สร้าง AuthUIConfiguration แล้วแสดง FirebaseAuthScreen

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val authUI = FirebaseAuthUI.getInstance()

        setContent {
            MyAppTheme {
                val configuration = authUIConfiguration {
                    context = applicationContext
                    theme = AuthUITheme.fromMaterialTheme()
                    providers {
                        provider(AuthProvider.Email())
                        provider(
                            AuthProvider.Google(
                                scopes = listOf("email"),
                                serverClientId = null,
                            )
                        )
                    }
                }

                if (authUI.isSignedIn()) {
                    HomeScreen()
                } else {
                    FirebaseAuthScreen(
                        configuration = configuration,
                        authUI = authUI,
                        onSignInSuccess = { result ->
                            // User signed in successfully
                        },
                        onSignInFailure = { exception ->
                            // Sign in failed
                        },
                        onSignInCancelled = {
                            finish()
                        },
                    )
                }
            }
        }
    }
}

ซึ่งจะทำให้คุณมีโฟลว์การตรวจสอบสิทธิ์ที่สมบูรณ์พร้อมด้วยฟีเจอร์ต่อไปนี้

  • การตรวจสอบสิทธิ์ด้วยรหัสผ่าน
  • Google Sign-In
  • รีเซ็ตรหัสผ่าน
  • การจัดรูปแบบ Material 3
  • การรองรับ Credential Manager
  • การจัดการข้อผิดพลาดผ่านการเรียกกลับโดยตรง

ออกจากระบบ

FirebaseUI Auth มีเมธอดที่สะดวกสำหรับการออกจากระบบและการลบบัญชี

lifecycleScope.launch {
    FirebaseAuthUI.getInstance().signOut(applicationContext)
}
lifecycleScope.launch {
    FirebaseAuthUI.getInstance().delete(applicationContext)
}

การปรับแต่ง

FirebaseUI Auth ปรับแต่งได้ และวิธีที่ง่ายที่สุดในการเริ่มต้นใช้งานคือการตั้งค่าธีมโดยตรงใน authUIConfiguration

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(AuthProvider.Google(scopes = listOf("email"), serverClientId = null))
    }
    theme = AuthUITheme.Adaptive
}

นอกจากนี้ คุณยังดำเนินการต่อไปนี้ได้ด้วย

  • ใช้ AuthUITheme.Default, AuthUITheme.DefaultDark, หรือ AuthUITheme.Adaptive
  • รับช่วงธีมของแอปด้วย AuthUITheme.fromMaterialTheme()
  • ปรับแต่งธีมเริ่มต้นด้วย .copy()
  • สร้าง AuthUITheme ที่กำหนดเองอย่างเต็มรูปแบบ
  • ตั้งค่าโลโก้, URL ของข้อกำหนดในการให้บริการ และ URL ของนโยบายความเป็นส่วนตัวใน authUIConfiguration

ดูรายละเอียดทั้งหมดเกี่ยวกับการกำหนดธีมและการปรับแต่ง รวมถึงลำดับความสำคัญของธีม การจัดรูปแบบปุ่มของผู้ให้บริการ และธีมที่กำหนดเองได้ใน ส่วนการกำหนดธีมและการปรับแต่งของไฟล์ README ใน GitHub

แอปที่ใช้กิจกรรมอยู่

หากแอปยังคงใช้กิจกรรมและ Activity Result API คุณสามารถใช้โฟลว์การเปิดใช้ที่อิงตามกิจกรรมได้โดยใช้ AuthFlowController

private val authLauncher = registerForActivityResult(
    ActivityResultContracts.StartActivityForResult(),
) { result ->
    if (result.resultCode == RESULT_OK) {
        val user = FirebaseAuth.getInstance().currentUser
        // ...
    } else {
        // User cancelled or sign-in failed
    }
}

val configuration = authUIConfiguration {
    context = applicationContext
    providers {
        provider(AuthProvider.Email())
        provider(
            AuthProvider.Google(
                scopes = listOf("email"),
                serverClientId = null,
            )
        )
    }
}

val controller = FirebaseAuthUI.getInstance().createAuthFlow(configuration)
authLauncher.launch(controller.createIntent(this))