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

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

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

ก่อนจะเริ่ม

  1. เพิ่ม Firebase ในโครงการ Apple ของคุณ

  2. เพิ่ม FirebaseUI ให้กับ Podfile ของคุณ:

    pod 'FirebaseUI'
    

    หากต้องการ คุณสามารถเพิ่มได้เฉพาะองค์ประกอบ Auth และผู้ให้บริการที่คุณต้องการใช้:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
    pod 'FirebaseUI/Phone'
    
  3. หากคุณยังไม่ได้เชื่อมต่อแอปกับโปรเจ็กต์ Firebase ให้ดำเนินการจาก คอนโซล Firebase

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

ก่อนที่คุณจะสามารถใช้ Firebase เพื่อลงชื่อเข้าใช้ผู้ใช้ คุณต้องเปิดใช้งานและกำหนดค่าวิธีการลงชื่อเข้าใช้ที่คุณต้องการสนับสนุน

ที่อยู่อีเมลและรหัสผ่าน

ใน คอนโซล Firebase เปิดส่วนการ ตรวจสอบสิทธิ์ และเปิดใช้งานการตรวจสอบสิทธิ์อีเมลและรหัสผ่าน

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

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

  3. คุณสามารถเปิดใช้งานการลงชื่อเข้าใช้ลิงก์อีเมลโดยเริ่มต้นอินสแตนซ์ FUIEmailAuth ด้วย FIREmailLinkAuthSignInMethod คุณจะต้องระบุวัตถุ FIRActionCodeSettings ที่ถูกต้องด้วย handleCodeInApp ที่ตั้งค่าเป็นจริง

Swift

var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.appspot.com")
actionCodeSettings.handleCodeInApp = true
actionCodeSettings.setAndroidPackageName("com.firebase.example", installIfNotAvailable: false, minimumVersion: "12")

let provider = FUIEmailAuth(authUI: FUIAuth.defaultAuthUI()!,
                            signInMethod: FIREmailLinkAuthSignInMethod,
                            forceSameDevice: false,
                            allowNewEmailAccounts: true,
                            actionCodeSetting: actionCodeSettings)

วัตถุประสงค์-C

FIRActionCodeSettings *actionCodeSettings = [[FIRActionCodeSettings alloc] init];
actionCodeSettings.URL = [NSURL URLWithString:@"https://example.appspot.com"];
actionCodeSettings.handleCodeInApp = YES;
[actionCodeSettings setAndroidPackageName:@"com.firebase.example"
                    installIfNotAvailable:NO
                           minimumVersion:@"12"];

id<FUIAuthProvider> provider = [[FUIEmailAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];
  1. นอกจากนี้ คุณต้องไวท์ลิสต์ URL ที่คุณส่งไปยังตัวเริ่มต้น คุณสามารถทำได้ใน คอนโซล Firebase เปิดส่วนการ ตรวจสอบสิทธิ์ บนแท็บ วิธีการลงชื่อเข้าใช้ ให้เพิ่ม URL ภายใต้ โดเมนที่ได้รับอนุญาต

  2. เมื่อคุณจับ Deep Link แล้ว คุณจะต้องส่งผ่านไปยัง auth UI เพื่อให้สามารถจัดการได้

Swift

FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)

วัตถุประสงค์-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. การลงชื่อเข้าใช้ลิงก์อีเมลใน FirebaseUI-iOS เข้ากันได้กับเว็บ FirebaseUI-Android และ FirebaseUI โดย ที่ผู้ใช้รายหนึ่งที่เริ่มต้นโฟลว์จาก FirebaseUI-Android สามารถเปิดลิงก์และลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ด้วยเว็บ FirebaseUI เช่นเดียวกับการไหลตรงข้าม

แอปเปิล

  1. ปฏิบัติตามหัวข้อ ก่อนที่คุณจะเริ่มต้น และ ปฏิบัติตามข้อกำหนดข้อมูลที่ไม่ระบุตัวตนของ Apple ในคู่มือการ ลงชื่อเข้าใช้ Firebase ด้วย Apple

  2. เพิ่มความสามารถในการลงชื่อเข้าใช้ด้วย Apple ให้กับไฟล์การให้สิทธิ์ของคุณ

  3. เริ่มต้นอินสแตนซ์ของผู้ให้บริการ OAuth ที่กำหนดค่าสำหรับการลงชื่อเข้าใช้ด้วย Apple:

    Swift

    provider = FUIOAuth.appleAuthProvider()
    

    วัตถุประสงค์-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์ และเปิดใช้งาน Google Sign-in

  2. เพิ่มรหัสไคลเอ็นต์ที่กลับรายการเป็นรูปแบบ URL ในโครงการ Xcode ของคุณ คุณค้นหาค่านี้ได้ในไฟล์ GoogleService-Info.plist

Facebook

  1. ตั้งค่า Facebook Login SDK โดยทำตาม หน้าเริ่มต้นใช้งานของ Facebook

  2. ใน คอนโซล Firebase เปิดส่วนการ ตรวจสอบสิทธิ์ และเปิดใช้งาน Facebook ในการเปิดใช้งานการลงชื่อเข้าใช้ Facebook คุณต้องระบุ Facebook App ID และ App Secret ของคุณ ซึ่งคุณจะได้รับในคอนโซลนักพัฒนา Facebook

  3. เปิดใช้งานการแชร์พวงกุญแจในโปรเจ็กต์ Xcode ของคุณจากหน้าจอ การตั้งค่าโปรเจ็กต์ > ความสามารถ

  4. เพิ่ม fb FACEBOOK_APP_ID เป็นรูปแบบ URL ในโครงการ Xcode ของคุณ

  5. เพิ่ม Facebook App ID ของคุณและชื่อที่แสดงลงในไฟล์ Info.plist :

    สำคัญ ค่า
    FacebookAppID FACEBOOK_APP_ID (เช่น 1234567890 )
    FacebookDisplayName ชื่อแอปของคุณ
  6. เริ่มต้นอินสแตนซ์ของผู้ให้บริการ Facebook:

    Swift

    provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
    

    วัตถุประสงค์-C

    FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
    

  7. หากคุณต้องการใช้ Facebook Limited Login ให้ตั้งค่าคุณสมบัติ useLimitedLogin บนอินสแตนซ์ FUIFacebookAuth

    Swift

    provider.useLimitedLogin = true
    

    วัตถุประสงค์-C

    provider.useLimitedLogin = YES;
    

ทวิตเตอร์

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

  2. เริ่มต้นอินสแตนซ์ของผู้ให้บริการ OAuth ที่กำหนดค่าสำหรับการเข้าสู่ระบบ Twitter:

    Swift

    provider = FUIOAuth.twitterAuthProvider()
    

    วัตถุประสงค์-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

หมายเลขโทรศัพท์

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

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

    วิธีเปิดใช้งานการแจ้งเตือน APN สำหรับใช้กับการตรวจสอบสิทธิ์ Firebase:

    1. ใน Xcode เปิดใช้งานการแจ้งเตือนแบบพุช สำหรับโครงการของคุณ

    2. อัปโหลดคีย์การตรวจสอบสิทธิ์ APN ของคุณไปยัง Firebase หากคุณยังไม่มีคีย์การตรวจสอบสิทธิ์ APN ให้สร้างคีย์ดังกล่าวใน Apple Developer Member Center

      1. ภายในโปรเจ็กต์ของคุณในคอนโซล Firebase ให้เลือกไอคอนรูปเฟือง เลือก Project Settings แล้วเลือกแท็บ Cloud Messaging

      2. ใน คีย์การตรวจสอบสิทธิ์ APN ภายใต้ การกำหนดค่าแอป iOS ให้คลิกปุ่ม อัปโหลด

      3. เรียกดูตำแหน่งที่คุณบันทึกคีย์ เลือก และคลิก เปิด เพิ่มรหัสคีย์สำหรับคีย์ (มีอยู่ใน Apple Developer Member Center ) แล้วคลิก อัปโหลด

      หากคุณมีใบรับรอง APN อยู่แล้ว คุณสามารถอัปโหลดใบรับรองแทนได้

  3. เมื่ออุปกรณ์รับการแจ้งเตือน APN ไม่ได้ Firebase จะใช้ reCAPTCHA เพื่อยืนยันคำขอ

    หากต้องการเปิดใช้งานการยืนยัน reCAPTCHA หากคุณยังไม่ได้เพิ่มรหัสไคลเอ็นต์ที่ย้อนกลับเป็นรูปแบบ URL (เช่น เพื่อเปิดใช้งาน Google Sign-in) ให้ดำเนินการในโครงการ Xcode ของคุณ คุณค้นหาค่านี้ได้ในไฟล์ GoogleService-Info.plist

  4. ไม่บังคับ : Firebase ใช้วิธีวนซ้ำเพื่อรับโทเค็น APN ของแอปของคุณโดยอัตโนมัติ เพื่อจัดการข้อความ Push แบบเงียบที่ Firebase ส่งไปยังแอปของคุณ และเพื่อสกัดกั้นการเปลี่ยนเส้นทางแบบแผนที่กำหนดเองโดยอัตโนมัติจากหน้าการยืนยัน reCAPTCHA ระหว่างการยืนยัน

    หากคุณไม่ต้องการใช้ Swizzling โปรดดู ภาคผนวก: การใช้การลงชื่อเข้าใช้โทรศัพท์โดยไม่ทำให้สับสน ในเอกสารการตรวจสอบสิทธิ์ Firebase SDK

เข้าสู่ระบบ

หากต้องการเริ่มขั้นตอนการลงชื่อเข้าใช้ FirebaseUI ให้เริ่มต้น FirebaseUI ก่อน:

Swift

import FirebaseAuthUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

วัตถุประสงค์-C

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

จากนั้นกำหนดค่า FirebaseUI เพื่อใช้วิธีการลงชื่อเข้าใช้ที่คุณต้องการสนับสนุน:

Swift

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

วัตถุประสงค์-C

@import FirebaseAuthUI;
@import FirebaseFacebookAuthUI;
@import FirebaseGoogleAuthUI;
@import FirebaseOAuthUI;
@import FirebasePhoneAuthUI;

...

NSArray<id<FUIAuthProvider>> *providers = @[
  [[FUIGoogleAuth alloc] init],
  [[FUIFacebookAuth alloc] init],
  [[FUITwitterAuth alloc] init],
  [[FUIPhoneAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]]
];
_authUI.providers = providers;

หากคุณเปิดใช้งานการลงชื่อเข้าใช้ Google หรือ Facebook ให้ใช้ตัวจัดการสำหรับผลลัพธ์ของขั้นตอนการลงทะเบียนของ Google และ Facebook:

Swift

func application(_ app: UIApplication, open url: URL,
    options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
  let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String?
  if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
    return true
  }
  // other URL handling goes here.
  return false
}

วัตถุประสงค์-C

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary *)options {
  NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
  return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}

สุดท้าย รับอินสแตนซ์ของ AuthViewController จาก FUIAuth จากนั้นคุณสามารถนำเสนอเป็นตัวควบคุมมุมมองแรกของแอปหรือนำเสนอจากตัวควบคุมมุมมองอื่นในแอปของคุณ

Swift

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

let authViewController = authUI.authViewController()

หากคุณใช้เพียงการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ คุณสามารถแสดงมุมมองการลงชื่อเข้าใช้หมายเลขโทรศัพท์ได้โดยตรงแทน:

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

วัตถุประสงค์-C

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

UINavigationController *authViewController = [authUI authViewController];

หากคุณใช้เพียงการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ คุณสามารถแสดงมุมมองการลงชื่อเข้าใช้หมายเลขโทรศัพท์ได้โดยตรงแทน:

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

หลังจากที่คุณนำเสนอมุมมองการรับรองความถูกต้องและผู้ใช้ลงชื่อเข้าใช้ ผลลัพธ์จะถูกส่งกลับไปยังผู้รับมอบสิทธิ์การตรวจสอบสิทธิ์ FirebaseUI ใน didSignInWithUser:error: :

Swift

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

วัตถุประสงค์-C

   - (void)authUI:(FUIAuth *)authUI
didSignInWithUser:(nullable FIRUser *)user
            error:(nullable NSError *)error {
  // Implement this method to handle signed in user or error if any.
}

ออกจากระบบ

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

Swift

authUI.signOut()

วัตถุประสงค์-C

[authUI signOut];

การปรับแต่ง

คุณสามารถปรับแต่งหน้าจอลงชื่อเข้าใช้โดยจัดคลาสย่อยตัวควบคุมมุมมองของ FirebaseUI และระบุในวิธีการมอบสิทธิ์ของ FUIAuth :

Swift

func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
  return FUICustomAuthPickerViewController(nibName: "FUICustomAuthPickerViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func emailEntryViewController(forAuthUI authUI: FUIAuth) -> FUIEmailEntryViewController {
  return FUICustomEmailEntryViewController(nibName: "FUICustomEmailEntryViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func passwordRecoveryViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordRecoveryViewController {
  return FUICustomPasswordRecoveryViewController(nibName: "FUICustomPasswordRecoveryViewController",
                                                 bundle: Bundle.main,
                                                 authUI: authUI,
                                                 email: email)
}

func passwordSignInViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignInViewController {
  return FUICustomPasswordSignInViewController(nibName: "FUICustomPasswordSignInViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordSignUpViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignUpViewController {
  return FUICustomPasswordSignUpViewController(nibName: "FUICustomPasswordSignUpViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordVerificationViewController(forAuthUI authUI: FUIAuth, email: String, newCredential: AuthCredential) -> FUIPasswordVerificationViewController {
  return FUICustomPasswordVerificationViewController(nibName: "FUICustomPasswordVerificationViewController",
                                                     bundle: Bundle.main,
                                                     authUI: authUI,
                                                     email: email,
                                                     newCredential: newCredential)
}

วัตถุประสงค์-C

- (FUIAuthPickerViewController *)authPickerViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomAuthPickerViewController alloc] initWithNibName:@"FUICustomAuthPickerViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];
}

- (FUIEmailEntryViewController *)emailEntryViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomEmailEntryViewController alloc] initWithNibName:@"FUICustomEmailEntryViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];

}

- (FUIPasswordSignInViewController *)passwordSignInViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignInViewController alloc] initWithNibName:@"FUICustomPasswordSignInViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordSignUpViewController *)passwordSignUpViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignUpViewController alloc] initWithNibName:@"FUICustomPasswordSignUpViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordRecoveryViewController *)passwordRecoveryViewControllerForAuthUI:(FUIAuth *)authUI
                                                                         email:(NSString *)email {
  return [[FUICustomPasswordRecoveryViewController alloc] initWithNibName:@"FUICustomPasswordRecoveryViewController"
                                                                   bundle:[NSBundle mainBundle]
                                                                   authUI:authUI
                                                                    email:email];

}

- (FUIPasswordVerificationViewController *)passwordVerificationViewControllerForAuthUI:(FUIAuth *)authUI
                                                                                 email:(NSString *)email
                                                                         newCredential:(FIRAuthCredential *)newCredential {
  return [[FUICustomPasswordVerificationViewController alloc] initWithNibName:@"FUICustomPasswordVerificationViewController"
                                                                       bundle:[NSBundle mainBundle]
                                                                       authUI:authUI
                                                                        email:email
                                                                newCredential:newCredential];
}

คุณสามารถปรับแต่ง URL ให้สอดคล้องกับข้อกำหนดในการให้บริการของแอปของคุณ ซึ่งเชื่อมโยงในหน้าจอการสร้างบัญชี:

Swift

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

วัตถุประสงค์-C

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

สุดท้าย คุณสามารถปรับแต่งข้อความและพร้อมท์ที่แสดงต่อผู้ใช้ของคุณโดยระบุบันเดิลแบบกำหนดเอง:

Swift

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

วัตถุประสงค์-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

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