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

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

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

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

1. เพิ่ม Firebase ลงในโปรเจ็กต์ Android หากยังไม่ได้เพิ่ม

2. เพิ่มการขึ้นต่อกันสำหรับ FirebaseUI ลงในไฟล์ build.gradle(.kts) ระดับแอป หากต้องการรองรับการลงชื่อเข้าใช้ด้วย Facebook หรือ Twitter ให้รวม SDK ของ Facebook และ Twitter ด้วย

       dependencies {
           // ...
   
           implementation("com.firebaseui:firebase-ui-auth:9.0.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")
       }
   

   FirebaseUI Auth SDK มีการขึ้นต่อกันแบบทรานซิทีฟกับ Firebase SDK และบริการ Google Play SDK

3. ในคอนโซล Firebase ให้ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์

4. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ที่ต้องการรองรับ ผู้ให้บริการลงชื่อเข้าใช้บางรายต้องใช้ข้อมูลเพิ่มเติม ซึ่งโดยปกติจะอยู่ในคอนโซลนักพัฒนาแอปของบริการ

5. หากเปิดใช้การลงชื่อเข้าใช้ด้วย Google ให้ทำดังนี้

   1. อัปเดตไฟล์กำหนดค่า Firebase

      1. เมื่อระบบแจ้งในคอนโซล Firebase ให้ดาวน์โหลดไฟล์กำหนดค่า Firebase ที่อัปเดต (google-services.json) ซึ่งตอนนี้มีข้อมูลไคลเอ็นต์ OAuth ที่จำเป็นสำหรับการลงชื่อเข้าใช้ด้วย Google แล้ว

      2. ย้ายไฟล์กำหนดค่าที่อัปเดตนี้ไปยังโปรเจ็กต์ Android Studio โดยให้ แทนที่ ไฟล์กำหนดค่าที่เกี่ยวข้องซึ่งล้าสมัยแล้ว (ดู เพิ่ม Firebase ลงในโปรเจ็กต์ Android)

   2. ระบุลายนิ้วมือ SHA-1 ของแอปหากยังไม่ได้ระบุ

      1. ในคอนโซล Firebase ให้ไปที่ settings การตั้งค่า > ทั่วไป แท็บ

      2. เลื่อนลงไปที่การ์ดแอปของคุณ เลือกแอป Android แล้วเพิ่มลายนิ้วมือ SHA-1 ในช่องลายนิ้วมือใบรับรอง SHA

      ดูรายละเอียดเกี่ยวกับวิธีรับลายนิ้วมือ SHA ของแอปได้ที่การตรวจสอบสิทธิ์ไคลเอ็นต์

6. หากรองรับการลงชื่อเข้าใช้ด้วย 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 ซึ่งลงทะเบียนการเรียกกลับสำหรับสัญญาผลลัพธ์ของกิจกรรม FirebaseUI

// See: https://developer.android.com/training/basics/intents/result
private val signInLauncher = registerForActivityResult(
    FirebaseAuthUIActivityResultContract(),
) { res ->
    this.onSignInResult(res)
}
FirebaseUIActivity.kt

// 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);
            }
        }
);
FirebaseUIActivity.java

หากต้องการเริ่มโฟลว์การลงชื่อเข้าใช้ FirebaseUI ให้สร้าง Intent การลงชื่อเข้าใช้ด้วยวิธีการลงชื่อเข้าใช้ที่ต้องการ

// 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)
FirebaseUIActivity.kt

// 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);
FirebaseUIActivity.java

เมื่อโฟลว์การลงชื่อเข้าใช้เสร็จสมบูรณ์ คุณจะได้รับผลลัพธ์ใน onSignInResult

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.
        // ...
    }
}
FirebaseUIActivity.kt

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.
        // ...
    }
}
FirebaseUIActivity.java

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

การตรวจสอบสิทธิ์ด้วยลิงก์อีเมล

1. ในคอนโซล Firebase ให้ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์

2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้วิธีการลงชื่อเข้าใช้ด้วยอีเมล/รหัสผ่าน โปรดทราบว่าต้องเปิดใช้การลงชื่อเข้าใช้ด้วยอีเมล/รหัสผ่านก่อนจึงจะใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมลได้

3. ในส่วนเดียวกัน ให้เปิดใช้วิธีการลงชื่อเข้าใช้ด้วยลิงก์อีเมล (การลงชื่อเข้าใช้แบบไม่ใช้รหัสผ่าน) แล้วคลิกบันทึก

4. นอกจากนี้ คุณยังต้องเปิดใช้ Firebase Dynamic Links เพื่อใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมลด้วย โดยทำดังนี้

   1. ในคอนโซล Firebase ให้ไปที่DevOps และการมีส่วนร่วม > Dynamic Links

   2. คลิกเริ่มต้นใช้งาน แล้วเพิ่มโดเมน โดเมนที่คุณเลือกที่นี่จะแสดงในลิงก์อีเมลที่ส่งถึงผู้ใช้

5. คุณสามารถเปิดใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมลใน FirebaseUI ได้โดยเรียกใช้ enableEmailLinkSignIn ในอินสแตนซ์ EmailBuilder นอกจากนี้ คุณจะต้องระบุออบเจ็กต์ ActionCodeSettings ที่ถูกต้องโดยตั้งค่า setHandleCodeInApp เป็น "จริง"

   นอกจากนี้ คุณยังต้องเพิ่ม URL ที่ส่งไปยัง setUrl ลงในรายการที่อนุญาตด้วย โดยทำดังนี้

   1. ในคอนโซลFirebase ให้ไปที่แท็บ ความปลอดภัย > การตรวจสอบสิทธิ์ > การตั้งค่า

   2. ในส่วนโดเมนที่ได้รับอนุญาต ให้คลิกเพิ่มโดเมน แล้วเพิ่ม โดเมน

   Kotlin

   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)
   FirebaseUIActivity.kt

   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);
   FirebaseUIActivity.java

6. หากต้องการดักจับลิงก์ในกิจกรรมที่เฉพาะเจาะจง โปรดทำตามขั้นตอนที่ระบุไว้ ที่นี่ ไม่เช่นนั้น ลิงก์จะ เปลี่ยนเส้นทางไปยังกิจกรรมตัวเปิดแอป

7. เมื่อดักจับ Deep Link แล้ว คุณจะต้องเรียกใช้เพื่อยืนยันว่าเราจัดการลิงก์ดังกล่าวให้คุณได้ หากจัดการได้ คุณจะต้องส่งลิงก์ดังกล่าวให้เราผ่าน setEmailLink

   Kotlin

   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)
       }
   }
   FirebaseUIActivity.kt

   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);
       }
   }
   FirebaseUIActivity.java

8. ไม่บังคับ ระบบรองรับการลงชื่อเข้าใช้ด้วยลิงก์อีเมลข้ามอุปกรณ์ ซึ่งหมายความว่าลิงก์ที่ส่งผ่านแอป Android สามารถใช้เพื่อเข้าสู่ระบบในเว็บแอปหรือแอป Apple ได้ โดยค่าเริ่มต้น ระบบจะเปิดใช้การรองรับข้ามอุปกรณ์ คุณปิดใช้ได้โดยเรียกใช้ setForceSameDevice ในอินสแตนซ์ EmailBuilder

   ดูข้อมูลเพิ่มเติมได้ที่ FirebaseUI-Web และ FirebaseUI-iOS

ออกจากระบบ

FirebaseUI มีเมธอดที่สะดวกในการออกจากระบบการตรวจสอบสิทธิ์ Firebase รวมถึงผู้ให้บริการข้อมูลประจำตัวทางโซเชียลทั้งหมด โดยทำดังนี้

AuthUI.getInstance()
    .signOut(this)
    .addOnCompleteListener {
        // ...
    }
FirebaseUIActivity.kt

AuthUI.getInstance()
        .signOut(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

นอกจากนี้ คุณยังลบบัญชีของผู้ใช้ทั้งหมดได้ด้วย โดยทำดังนี้

AuthUI.getInstance()
    .delete(this)
    .addOnCompleteListener {
        // ...
    }
FirebaseUIActivity.kt

AuthUI.getInstance()
        .delete(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

การปรับแต่ง

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

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)
FirebaseUIActivity.kt

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);
FirebaseUIActivity.java

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

val signInIntent = AuthUI.getInstance()
    .createSignInIntentBuilder()
    .setAvailableProviders(providers)
    .setTosAndPrivacyPolicyUrls(
        "https://example.com/terms.html",
        "https://example.com/privacy.html",
    )
    .build()
signInLauncher.launch(signInIntent)
FirebaseUIActivity.kt

Intent signInIntent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .setTosAndPrivacyPolicyUrls(
                "https://example.com/terms.html",
                "https://example.com/privacy.html")
        .build();
signInLauncher.launch(signInIntent);
FirebaseUIActivity.java

ขั้นตอนถัดไป

• ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้และการปรับแต่ง FirebaseUI ได้ใน ไฟล์ README บน GitHub
• หากพบปัญหาใน FirebaseUI และต้องการรายงาน โปรดใช้ เครื่องมือติดตามปัญหาบน GitHub