Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

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

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

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

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

  1. เพิ่ม Firebase ในโปรเจ็กต์ iOS ของคุณ

  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 เป็น true

รวดเร็ว

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

  2. เมื่อคุณจับลิงก์ในรายละเอียดคุณจะต้องส่งต่อไปยัง UI การตรวจสอบสิทธิ์จึงจะสามารถจัดการได้

รวดเร็ว

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

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

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

แอปเปิ้ล

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

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

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

    รวดเร็ว

    provider = FUIOAuth.appleAuthProvider()
    

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

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

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

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

เฟสบุ๊ค

  1. ตั้งค่า SDK การเข้าสู่ระบบ Facebook โดยทำตาม หน้าเริ่มต้นของ Facebook

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

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

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

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

    สำคัญ มูลค่า
    FacebookAppID FACEBOOK_APP_ID (เช่น 1234567890 )
    FacebookDisplayName ชื่อแอปของคุณ

ทวิตเตอร์

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

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

    รวดเร็ว

    provider = FUIOAuth.twitterAuthProvider()
    

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

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เข้าสู่ระบบ

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

รวดเร็ว

import FirebaseUI

/* ... */

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

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

@import FirebaseUI;

...

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

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

รวดเร็ว

import FirebaseUI

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

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

@import FirebaseUI;

...

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:

รวดเร็ว

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 จากนั้นคุณสามารถนำเสนอเป็นตัวควบคุมมุมมองแรกของแอปของคุณหรือนำเสนอจากตัวควบคุมมุมมองอื่นในแอปของคุณ

รวดเร็ว

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

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 Auth ใน didSignInWithUser:error: method:

รวดเร็ว

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 Authentication รวมถึงผู้ให้บริการข้อมูลประจำตัวทางสังคมทั้งหมด:

รวดเร็ว

authUI.signOut()

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

[authUI signOut];

การปรับแต่ง

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

รวดเร็ว

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

รวดเร็ว

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

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

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

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

รวดเร็ว

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

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

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

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