
FirebaseUI Auth เป็นไลบรารีที่สร้างขึ้นบน Firebase Authentication SDK ซึ่งมี โฟลว์ UI แบบดรอปอินสําหรับใช้ในแอป
โฟลว์การลงชื่อเข้าใช้ที่แนะนําใช้หน้าจอเขียน สำหรับแอปที่ยังใช้ กิจกรรมอยู่ โปรดดูส่วนแอปที่อิงตามกิจกรรมที่มีอยู่
การตรวจสอบสิทธิ์ FirebaseUI มีประโยชน์ดังนี้
- ผู้ให้บริการหลายราย - ขั้นตอนการลงชื่อเข้าใช้สำหรับอีเมล/รหัสผ่าน โทรศัพท์ Google, Facebook, Apple, GitHub, Microsoft, Yahoo, Twitter, การตรวจสอบสิทธิ์แบบไม่ระบุตัวตน และ OAuth ที่กำหนดเอง
- การจัดการบัญชี - โฟลว์สำหรับจัดการงานการจัดการบัญชี เช่น การสร้างบัญชีและการรีเซ็ตรหัสผ่าน
- การลิงก์บัญชี - ขั้นตอนการลิงก์บัญชีผู้ใช้กับผู้ให้บริการข้อมูลประจำตัวอย่างปลอดภัย
- การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ - โฟลว์ในการอัปเกรดผู้ใช้ที่ไม่ระบุชื่ออย่างปลอดภัย
- ธีมที่กำหนดเอง - รองรับ UI ของ Material 3 ที่รับช่วงธีมของแอปได้ นอกจากนี้ เนื่องจาก FirebaseUI เป็นโอเพนซอร์ส คุณจึงสามารถ Fork โปรเจ็กต์และปรับแต่งให้ตรงกับความต้องการของคุณได้
- Credential Manager - การผสานรวมกับ Credential Manager โดยอัตโนมัติเพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์ได้อย่างรวดเร็ว
- การตรวจสอบสิทธิ์แบบหลายปัจจัย - รองรับ SMS และ TOTP เพื่อเพิ่มความปลอดภัย
ก่อนเริ่มต้น
- เพิ่ม Firebase ลงในโปรเจ็กต์ Android หากยังไม่ได้เพิ่ม
- ในคอนโซล Firebase ให้เปิดใช้วิธีการลงชื่อเข้าใช้ที่คุณต้องการรองรับ
- เพิ่มการตรวจสอบสิทธิ์ FirebaseUI ลงในโมดูลแอป
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 Sign-In โดยอัตโนมัติจากไฟล์การกำหนดค่า
ตรวจสอบว่าคุณได้เปิดใช้ Google Sign-In ในFirebase Console แล้ว
การเข้าสู่ระบบด้วย Facebook
หากใช้ Facebook Login ให้เพิ่มรหัสแอป Facebook ลงใน 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 มีวิธีการที่สะดวกสำหรับการออกจากระบบและการลบบัญชี ดังนี้
lifecycleScope.launch {
FirebaseAuthUI.getInstance().signOut(applicationContext)
}
lifecycleScope.launch {
FirebaseAuthUI.getInstance().delete(applicationContext)
}
การปรับแต่ง
การตรวจสอบสิทธิ์ FirebaseUI ปรับแต่งได้ และวิธีที่ง่ายที่สุดในการเริ่มต้นใช้งานคือการตั้งค่าธีมโดยตรงใน 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))