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

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

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

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

1. เพิ่ม Firebase ในโปรเจ็กต์ Apple

2. เพิ่ม FirebaseUI ลงใน Podfile โดยทำดังนี้

   pod 'FirebaseUI'
   

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

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

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

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

   Swift

   var actionCodeSettings = ActionCodeSettings()
   actionCodeSettings.url = URL(string: "https://example.firebasestorage.app")
   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)
   

   Objective-C

   FIRActionCodeSettings *actionCodeSettings = [[FIRActionCodeSettings alloc] init];
   actionCodeSettings.URL = [NSURL URLWithString:@"https://example.firebasestorage.app"];
   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];
   

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

5. เมื่อจับ Deep Link ได้แล้ว คุณจะต้องส่ง Deep Link ไปยัง UI การตรวจสอบสิทธิ์เพื่อให้ระบบจัดการได้

   Swift

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

   Objective-C

   [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
   

6. การลงชื่อเข้าใช้ด้วยลิงก์อีเมลใน FirebaseUI-iOS เข้ากันได้กับ FirebaseUI-Android และ FirebaseUI-web โดยผู้ใช้ที่เริ่มโฟลว์จาก FirebaseUI-Android สามารถเปิดลิงก์ และลงชื่อเข้าใช้ด้วย FirebaseUI-web ได้ และในทางกลับกันก็เช่นกัน

Apple

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

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

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

   Swift

   provider = FUIOAuth.appleAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

1. ตั้งค่าการลงชื่อเข้าใช้ด้วย Google โดยใช้บทแนะนำนี้

Facebook

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

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

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

4. เพิ่ม fbFACEBOOK_APP_ID เป็น URL Scheme ในโปรเจ็กต์ Xcode ของคุณ

5. เพิ่มรหัสแอป Facebook และชื่อที่แสดงลงในไฟล์ Info.plist โดยทำดังนี้

   คีย์	ค่า
   FacebookAppID	FACEBOOK_APP_ID (เช่น 1234567890)
   FacebookDisplayName	ชื่อแอป

6. เริ่มต้นอินสแตนซ์ผู้ให้บริการ Facebook โดยทำดังนี้

   Swift

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

   Objective-C

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

7. หากต้องการใช้ การเข้าสู่ระบบแบบจำกัดของ Facebook, ให้ตั้งค่าพร็อพเพอร์ตี้ useLimitedLogin ในอินสแตนซ์ FUIFacebookAuth

   Swift

   provider.useLimitedLogin = true

   Objective-C

   provider.useLimitedLogin = YES;

Twitter

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

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

   Swift

   provider = FUIOAuth.twitterAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

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

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

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

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

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

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

      1. ในคอนโซล Firebase ให้ไปที่ settings การตั้งค่า > ทั่วไป จากนั้นคลิกแท็บ Cloud Messaging
      2. ในส่วนคีย์การตรวจสอบสิทธิ์ APNs ในส่วนการกำหนดค่าแอป iOS, ให้คลิกอัปโหลด เพื่ออัปโหลดคีย์การตรวจสอบสิทธิ์สำหรับการพัฒนา หรือ คีย์การตรวจสอบสิทธิ์เวอร์ชันที่ใช้งานจริง หรือทั้ง 2 อย่าง คุณต้องอัปโหลดคีย์อย่างน้อย 1 รายการ
      3. เรียกดูตำแหน่งที่คุณบันทึกคีย์ เลือกคีย์ แล้วคลิก เปิด เพิ่มรหัสคีย์สำหรับคีย์ (ดูได้ใน Apple Developer Member Center) แล้วคลิก อัปโหลด

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

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

   หากต้องการเปิดใช้การยืนยัน reCAPTCHA ให้ทำดังนี้ใน Xcode

   1. เปิดการกำหนดค่าโปรเจ็กต์โดยดับเบิลคลิกชื่อโปรเจ็กต์ใน มุมมองแบบต้นไม้ทางด้านซ้าย เลือกแอปจากส่วน TARGETS จากนั้น เลือกแท็บ Info แล้วขยายส่วน URL Types
   2. คลิกปุ่ม + แล้วเพิ่มรหัสแอปที่เข้ารหัสเป็นรูปแบบ URL scheme คุณดูรหัสแอปที่เข้ารหัสได้ในหน้าการตั้งค่า ทั่วไป ของคอนโซล Firebase ในส่วนสำหรับแอป iOS ส่วนช่องอื่นๆ ให้เว้นว่างไว้

      เมื่อเสร็จแล้ว การกำหนดค่าควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้ (แต่มีค่าเฉพาะของแอปพลิเคชัน)

      

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

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

ลงชื่อเข้าใช้

หากต้องการเริ่มโฟลว์การลงชื่อเข้าใช้ FirebaseUI ให้เริ่มต้น FirebaseUI ก่อนโดยทำดังนี้

import FirebaseAuthUI

/* ... */

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

@import FirebaseAuthUI;

...

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

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

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

@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 โดยทำดังนี้

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
}

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

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

let authViewController = authUI.authViewController()

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

UINavigationController *authViewController = [authUI authViewController];

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

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

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

   - (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 รวมถึงผู้ให้บริการข้อมูลประจำตัวทางโซเชียลทั้งหมด โดยทำดังนี้

authUI.signOut()

[authUI signOut];

การปรับแต่ง

คุณสามารถปรับแต่งหน้าจอการลงชื่อเข้าใช้ได้โดยการสร้างคลาสย่อยของ View Controller ของ FirebaseUI และระบุ View Controller เหล่านั้นในเมธอดผู้รับมอบสิทธิ์ของ 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)
}

- (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

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

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

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

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

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

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