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