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

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

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

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

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

2. เพิ่มทรัพยากร 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

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

4. สิ่งที่จะเกิดขึ้นหากคุณเปิดใช้ Google Sign-In ไว้

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

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

   3. หากคุณยังไม่ได้ระบุลายนิ้วมือ SHA ของแอป ให้ระบุจาก หน้าการตั้งค่า ของคอนโซล Firebase ดูการตรวจสอบสิทธิ์ไคลเอ็นต์ เพื่อดูรายละเอียดเกี่ยวกับวิธีรับลายนิ้วมือ SHA ของแอป

5. หากคุณรองรับการลงชื่อเข้าใช้ด้วย 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 สัญญาผลกิจกรรม:

// 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. นอกจากนี้คุณจะต้องเปิดใช้ลิงก์แบบไดนามิกของ Firebase เพื่อใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมล ใน คอนโซล Firebase ให้คลิกลิงก์แบบไดนามิกในส่วนมีส่วนร่วมในแถบนำทาง คลิก เริ่มต้นใช้งานและเพิ่มโดเมน โดเมนที่คุณเลือกที่นี่จะแสดงในอีเมล ที่ส่งให้ผู้ใช้ของคุณ

4. คุณเปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมลใน 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)
   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

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

6. เมื่อพบ 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)
       }
   }
   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

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

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

ออกจากระบบ

Firebase UI มอบวิธีที่สะดวกในการออกจากระบบการตรวจสอบสิทธิ์ 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 สำหรับการกำหนดธีม ซึ่งหมายความว่า นำรูปแบบสีของแอปมาใช้ ถ้าต้องการปรับแต่งเพิ่มเติม คุณสามารถ ส่งธีมและโลโก้ไปยังเครื่องมือสร้าง 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

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

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