เพิ่มการลงชื่อเข้าใช้แอป Android ของคุณได้อย่างง่ายดายด้วย FirebaseUI

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

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

ก่อนที่คุณจะเริ่ม

  1. หากคุณยังไม่ได้ เพิ่ม Firebase ในโครงการ Android ของคุณ

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

    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'
    }
    

    FirebaseUI Auth SDK มีการพึ่งพาแบบสกรรมกริยากับ Firebase SDK และ SDK ของบริการ Google Play

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

  4. หากคุณเปิดใช้งานการลงชื่อเข้าใช้ Google:

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

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

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

  1. ใน คอนโซล Firebase ให้เปิดส่วน การตรวจสอบสิทธิ์ บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ อีเมล/รหัสผ่าน โปรดทราบว่าต้องเปิดใช้งานการลงชื่อเข้าใช้อีเมล/รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล

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

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

  4. คุณสามารถเปิดใช้งานการลงชื่อเข้าใช้ลิงก์อีเมลใน FirebaseUI ได้โดยการเรียก enableEmailLinkSignIn บนอินสแตนซ์ EmailBuilder คุณจะต้องจัดเตรียมออบเจ็กต์ ActionCodeSettings ที่ถูกต้องโดยตั้งค่า setHandleCodeInApp เป็นจริง นอกจากนี้ คุณต้องอนุญาต URL ที่คุณส่งไปยัง setUrl ซึ่งสามารถทำได้ใน คอนโซล Firebase ภายใต้ Authentication -> Sign in Methods -> Authorized domains

    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);
  5. หากคุณต้องการดูลิงก์ในกิจกรรมใดกิจกรรมหนึ่ง โปรดทำตามขั้นตอนที่แสดงไว้ ที่นี่ มิฉะนั้น ลิงก์จะเปลี่ยนเส้นทางไปยังกิจกรรมตัวเรียกใช้งานของคุณ

  6. เมื่อคุณพบลิงก์ในรายละเอียดแล้ว คุณจะต้องโทรยืนยันว่าเราสามารถจัดการให้คุณได้ หากทำได้ คุณจะต้องส่งต่อให้เราทาง 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);
        }
    }
  7. รองรับการลงชื่อเข้าใช้ลิงก์อีเมลข้ามอุปกรณ์ เสริม ซึ่งหมายความว่าลิงก์ที่ส่งผ่านแอป Android ของคุณสามารถใช้เพื่อเข้าสู่ระบบบนเว็บหรือแอป Apple ของคุณได้ ตามค่าเริ่มต้น การสนับสนุนข้ามอุปกรณ์จะถูกเปิดใช้งาน คุณสามารถปิดใช้งานได้โดยการเรียก setForceSameDevice บนอินสแตนซ์ EmailBuilder

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

ออกจากระบบ

FirebaseUI มอบวิธีการที่สะดวกในการออกจากระบบ Firebase Authentication รวมถึงผู้ให้บริการข้อมูลประจำตัวทางสังคมทั้งหมด:

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);

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

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