Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

ก่อนจะเริ่ม

  1. เพิ่ม Firebase กับโครงการแอปเปิ้ลของคุณ

  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. ในส่วนเดียวกันช่วยให้การเชื่อมโยงอีเมล์ (passwordless ลงชื่อเข้าใช้) เข้าสู่ระบบในวิธีการและคลิกบันทึก

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

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

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

    Swift

    provider = FUIOAuth.appleAuthProvider()
    

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

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. ใน คอนโซล Firebase เปิดส่วนตรวจสอบและเปิดใช้งาน Google เข้าสู่ระบบใน

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

Facebook

  1. ตั้งค่า Facebook เข้าสู่ระบบ 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 เข้าสู่ระบบ จำกัด ตั้ง useLimitedLogin คุณสมบัติใน FUIFacebookAuth อินสแตนซ์

    Swift

    provider.useLimitedLogin = true
    

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

    provider.useLimitedLogin = YES;
    

ทวิตเตอร์

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

      1. ภายในโครงการของคุณใน Firebase คอนโซลเลือกไอคอนรูปเฟืองเลือกการตั้งค่าโครงการแล้วเลือกแท็บ Messaging เมฆ

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

      3. เรียกดูตำแหน่งที่คุณบันทึกสำคัญของคุณให้เลือกและคลิกเปิด เพิ่ม ID ที่สำคัญสำหรับคีย์ (ที่มีอยู่ใน แอปเปิ้ลผู้พัฒนาศูนย์สมาชิก ) และคลิกอัพโหลด

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

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

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

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

    หากคุณไม่ต้องการที่จะใช้ swizzling ดู ภาคผนวก: ใช้การลงชื่อเข้าโทรศัพท์โดยไม่ต้อง 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];

การปรับแต่ง

คุณสามารถปรับแต่งการลงชื่อเข้าใช้หน้าจอโดย subclassing FirebaseUI ของตัวควบคุมดูและการระบุไว้ใน FUIAuth 's การมอบหมาย:

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.

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

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