FirebaseUI คือไลบรารีที่สร้างขึ้น เพิ่มเติมจาก SDK การตรวจสอบสิทธิ์ Firebase ที่มีขั้นตอน UI แบบดรอปอินสำหรับการใช้งาน ในแอปของคุณ Firebase UI มีประโยชน์ดังต่อไปนี้
- ผู้ให้บริการหลายราย - ขั้นตอนการลงชื่อเข้าใช้อีเมล/รหัสผ่าน ลิงก์อีเมล โทรศัพท์ การตรวจสอบสิทธิ์, Google Sign-In, การเข้าสู่ระบบ Facebook, การเข้าสู่ระบบ Twitter และการเข้าสู่ระบบ GitHub
- การจัดการบัญชี - ขั้นตอนในการจัดการงานด้านการจัดการบัญชี เช่น การสร้างบัญชีและการรีเซ็ตรหัสผ่าน
- การลิงก์บัญชี - ขั้นตอนในการลิงก์บัญชีผู้ใช้ผ่านข้อมูลประจำตัวอย่างปลอดภัย ผู้ให้บริการเครือข่าย
- การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ - ขั้นตอนในการอัปเกรดผู้ใช้ที่ไม่ระบุชื่ออย่างปลอดภัย
- ธีมที่กำหนดเอง - ปรับแต่งรูปลักษณ์ของ Firebase UI ให้เหมาะกับแอปของคุณ และ เนื่องจาก FirebaseUI เป็นโอเพนซอร์ส คุณจึงแยกโปรเจ็กต์และปรับแต่งโปรเจ็กต์ได้ ตรงตามความต้องการของคุณ
- Smart Lock สำหรับรหัสผ่าน - การผสานรวมกับ Smart Lock สำหรับรหัสผ่าน เพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์อย่างรวดเร็ว
ก่อนเริ่มต้น
หากคุณยังไม่ได้ดำเนินการ เพิ่ม Firebase ลงในโปรเจ็กต์ Android
เพิ่มทรัพยากร Dependency สำหรับ FirebaseUI ไปยังไฟล์
build.gradle
ระดับแอป หากต้องการรองรับการลงชื่อเข้าใช้ด้วย Facebook หรือ Twitter ให้ใส่ SDK ของ Facebook และ Twitter:dependencies { // ... implementation 'com.firebaseui:firebase-ui-auth:7.2.0' // 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' }
Firebase UI Auth SDK มีทรัพยากร Dependency แบบทรานซิทีฟใน Firebase SDK และ SDK ของบริการ Google Play
ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์แล้วเปิดใช้ วิธีการลงชื่อเข้าใช้ที่คุณต้องการรองรับ วิธีการลงชื่อเข้าใช้บางวิธีจำเป็นต้องใช้ ข้อมูลเพิ่มเติม ซึ่งโดยปกติแล้วจะอยู่ในนักพัฒนาของบริการ คอนโซลผู้ดูแลระบบ
สิ่งที่จะเกิดขึ้นหากคุณเปิดใช้ Google Sign-In ไว้
เมื่อได้รับข้อความแจ้งในคอนโซล ให้ดาวน์โหลดไฟล์การกำหนดค่า Firebase ที่อัปเดตแล้ว (
google-services.json
) ซึ่งตอนนี้มีข้อมูลไคลเอ็นต์ OAuth แล้ว ที่จำเป็นสำหรับการลงชื่อเข้าใช้ Googleย้ายไฟล์การกำหนดค่าที่อัปเดตนี้ไปยังโปรเจ็กต์ Android Studio โดยแทนที่ ไฟล์การกำหนดค่าที่เกี่ยวข้องซึ่งล้าสมัยแล้ว (โปรดดูเพิ่ม Firebase ลงในโปรเจ็กต์ Android)
หากคุณยังไม่ได้ระบุลายนิ้วมือ SHA ของแอป ให้ระบุจาก หน้าการตั้งค่า ของคอนโซล Firebase ดูการตรวจสอบสิทธิ์ไคลเอ็นต์ เพื่อดูรายละเอียดเกี่ยวกับวิธีรับลายนิ้วมือ SHA ของแอป
หากคุณรองรับการลงชื่อเข้าใช้ด้วย Facebook หรือ Twitter ให้เพิ่มทรัพยากรสตริงลงใน
strings.xml
ซึ่งระบุข้อมูลระบุตัวตนที่จำเป็นต้องใช้ เป็นผู้ให้บริการคลาวด์<resources> <!-- Facebook application ID and custom URL scheme (app ID prefixed by 'fb'). --> <string name="facebook_application_id" translatable="false">YOUR_APP_ID</string> <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_APP_ID</string> </resources>
ลงชื่อเข้าใช้
สร้าง ActivityResultLauncher
ที่ลงทะเบียน Callback สำหรับ FirebaseUI
สัญญาผลกิจกรรม:
Kotlin+KTX
// See: https://developer.android.com/training/basics/intents/result private val signInLauncher = registerForActivityResult( FirebaseAuthUIActivityResultContract(), ) { res -> this.onSignInResult(res) }
Java
// See: https://developer.android.com/training/basics/intents/result private final ActivityResultLauncher<Intent> signInLauncher = registerForActivityResult( new FirebaseAuthUIActivityResultContract(), new ActivityResultCallback<FirebaseAuthUIAuthenticationResult>() { @Override public void onActivityResult(FirebaseAuthUIAuthenticationResult result) { onSignInResult(result); } } );
ในการเริ่มต้นขั้นตอนการลงชื่อเข้าใช้ FirebaseUI ให้สร้าง Intent ในการลงชื่อเข้าใช้ด้วย วิธีการลงชื่อเข้าใช้ที่ต้องการ:
Kotlin+KTX
// Choose authentication providers val providers = arrayListOf( AuthUI.IdpConfig.EmailBuilder().build(), AuthUI.IdpConfig.PhoneBuilder().build(), AuthUI.IdpConfig.GoogleBuilder().build(), AuthUI.IdpConfig.FacebookBuilder().build(), AuthUI.IdpConfig.TwitterBuilder().build(), ) // Create and launch sign-in intent val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .build() signInLauncher.launch(signInIntent)
Java
// Choose authentication providers List<AuthUI.IdpConfig> providers = Arrays.asList( new AuthUI.IdpConfig.EmailBuilder().build(), new AuthUI.IdpConfig.PhoneBuilder().build(), new AuthUI.IdpConfig.GoogleBuilder().build(), new AuthUI.IdpConfig.FacebookBuilder().build(), new AuthUI.IdpConfig.TwitterBuilder().build()); // Create and launch sign-in intent Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .build(); signInLauncher.launch(signInIntent);
เมื่อขั้นตอนการลงชื่อเข้าใช้เสร็จสมบูรณ์แล้ว คุณจะได้รับผลลัพธ์ใน
onSignInResult
:
Kotlin+KTX
private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) { val response = result.idpResponse if (result.resultCode == RESULT_OK) { // Successfully signed in val user = FirebaseAuth.getInstance().currentUser // ... } 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. // ... } }
Java
private void onSignInResult(FirebaseAuthUIAuthenticationResult result) { IdpResponse response = result.getIdpResponse(); if (result.getResultCode() == RESULT_OK) { // Successfully signed in FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser(); // ... } 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. // ... } }
ตั้งค่าวิธีการลงชื่อเข้าใช้
การตรวจสอบสิทธิ์ลิงก์อีเมล
เปิดส่วนการตรวจสอบสิทธิ์ในคอนโซล Firebase ใน แท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการอีเมล/รหัสผ่าน หมายเหตุ ต้องเปิดใช้การลงชื่อเข้าใช้อีเมล/รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล
ในส่วนเดียวกัน ให้เปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมล (การลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่าน) แล้วคลิกบันทึก
นอกจากนี้คุณจะต้องเปิดใช้ลิงก์แบบไดนามิกของ Firebase เพื่อใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมล ใน คอนโซล Firebase ให้คลิกลิงก์แบบไดนามิกในส่วนมีส่วนร่วมในแถบนำทาง คลิก เริ่มต้นใช้งานและเพิ่มโดเมน โดเมนที่คุณเลือกที่นี่จะแสดงในอีเมล ที่ส่งให้ผู้ใช้ของคุณ
คุณเปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมลใน FirebaseUI ได้โดยเรียกใช้
enableEmailLinkSignIn
ในEmailBuilder
นอกจากนี้ คุณยังจะต้องระบุออบเจ็กต์ActionCodeSettings
ที่ถูกต้องด้วย ตั้งค่าsetHandleCodeInApp
เป็น "จริง" นอกจากนี้ คุณต้องเพิ่ม URL ที่คุณส่งไปยังในรายการที่อนุญาตพิเศษsetUrl
ซึ่งทำได้ในคอนโซล Firebase ในส่วนการตรวจสอบสิทธิ์ -> วิธีการลงชื่อเข้าใช้ -> โดเมนที่ได้รับอนุญาตKotlin+KTX
val actionCodeSettings = ActionCodeSettings.newBuilder() .setAndroidPackageName( // yourPackageName= "...", // installIfNotAvailable= true, // minimumVersion= null, ) .setHandleCodeInApp(true) // This must be set to true .setUrl("https://google.com") // This URL needs to be whitelisted .build() val providers = listOf( EmailBuilder() .enableEmailLinkSignIn() .setActionCodeSettings(actionCodeSettings) .build(), ) val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .build() signInLauncher.launch(signInIntent)
Java
ActionCodeSettings actionCodeSettings = ActionCodeSettings.newBuilder() .setAndroidPackageName( /* yourPackageName= */ "...", /* installIfNotAvailable= */ true, /* minimumVersion= */ null) .setHandleCodeInApp(true) // This must be set to true .setUrl("https://google.com") // This URL needs to be whitelisted .build(); List<AuthUI.IdpConfig> providers = Arrays.asList( new AuthUI.IdpConfig.EmailBuilder() .enableEmailLinkSignIn() .setActionCodeSettings(actionCodeSettings) .build() ); Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .build(); signInLauncher.launch(signInIntent);
หากคุณต้องการเห็นลิงก์ในกิจกรรมใดกิจกรรมหนึ่งโดยเฉพาะ โปรดทำตามขั้นตอนที่ระบุไว้ ที่นี่ มิฉะนั้น ลิงก์จะ เปลี่ยนเส้นทางไปยังกิจกรรมของ Launcher
เมื่อพบ Deep Link แล้ว คุณจะต้องโทรยืนยันว่าเราจัดการ Deep Link ให้คุณได้ หากเรา ได้ คุณต้องส่งผ่าน
setEmailLink
มาให้เราKotlin+KTX
if (AuthUI.canHandleIntent(intent)) { val extras = intent.extras ?: return val link = extras.getString("email_link_sign_in") if (link != null) { val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setEmailLink(link) .setAvailableProviders(providers) .build() signInLauncher.launch(signInIntent) } }
Java
if (AuthUI.canHandleIntent(getIntent())) { if (getIntent().getExtras() == null) { return; } String link = getIntent().getExtras().getString("email_link_sign_in"); if (link != null) { Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setEmailLink(link) .setAvailableProviders(providers) .build(); signInLauncher.launch(signInIntent); } }
ไม่บังคับ รองรับการลงชื่อเข้าใช้ลิงก์อีเมลข้ามอุปกรณ์ ซึ่งหมายความว่าลิงก์ที่ส่งผ่าน ใช้แอป Android เพื่อเข้าสู่ระบบในเว็บหรือแอปของ Apple ได้ โดยค่าเริ่มต้น การสนับสนุนข้ามอุปกรณ์ ไว้ คุณปิดใช้ได้โดยการเรียกใช้
setForceSameDevice
บนอินสแตนซ์EmailBuilder
ดู FirebaseUI-Web และ FirebaseUI-iOS เพื่อดูข้อมูลเพิ่มเติม
ออกจากระบบ
Firebase UI มอบวิธีที่สะดวกในการออกจากระบบการตรวจสอบสิทธิ์ Firebase รวมทั้งผู้ให้บริการข้อมูลประจำตัวทางโซเชียลทั้งหมด
Kotlin+KTX
AuthUI.getInstance() .signOut(this) .addOnCompleteListener { // ... }
Java
AuthUI.getInstance() .signOut(this) .addOnCompleteListener(new OnCompleteListener<Void>() { public void onComplete(@NonNull Task<Void> task) { // ... } });
นอกจากนี้ คุณยังสามารถลบบัญชีของผู้ใช้ได้ทั้งหมด โดยทำดังนี้
Kotlin+KTX
AuthUI.getInstance() .delete(this) .addOnCompleteListener { // ... }
Java
AuthUI.getInstance() .delete(this) .addOnCompleteListener(new OnCompleteListener<Void>() { @Override public void onComplete(@NonNull Task<Void> task) { // ... } });
การปรับแต่ง
โดยค่าเริ่มต้น FirebaseUI จะใช้ AppCompat สำหรับการกำหนดธีม ซึ่งหมายความว่า
นำรูปแบบสีของแอปมาใช้ ถ้าต้องการปรับแต่งเพิ่มเติม คุณสามารถ
ส่งธีมและโลโก้ไปยังเครื่องมือสร้าง Intent
สำหรับการลงชื่อเข้าใช้
Kotlin+KTX
val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setLogo(R.drawable.my_great_logo) // Set logo drawable .setTheme(R.style.MySuperAppTheme) // Set theme .build() signInLauncher.launch(signInIntent)
Java
Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setLogo(R.drawable.my_great_logo) // Set logo drawable .setTheme(R.style.MySuperAppTheme) // Set theme .build(); signInLauncher.launch(signInIntent);
นอกจากนี้ คุณยังตั้งนโยบายความเป็นส่วนตัวและข้อกำหนดในการให้บริการที่กำหนดเองได้ดังนี้
Kotlin+KTX
val signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setTosAndPrivacyPolicyUrls( "https://example.com/terms.html", "https://example.com/privacy.html", ) .build() signInLauncher.launch(signInIntent)
Java
Intent signInIntent = AuthUI.getInstance() .createSignInIntentBuilder() .setAvailableProviders(providers) .setTosAndPrivacyPolicyUrls( "https://example.com/terms.html", "https://example.com/privacy.html") .build(); signInLauncher.launch(signInIntent);
ขั้นตอนถัดไป
- สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้และปรับแต่ง Firebase UI โปรดดู README ใน GitHub
- หากคุณพบปัญหาใน FirebaseUI และต้องการรายงานปัญหา ให้ใช้ เครื่องมือติดตามปัญหาของ GitHub