Buka konsol

Menambahkan login ke aplikasi iOS secara mudah dengan FirebaseUI

FirebaseUI adalah library yang dibuat sebagai tambahan dari Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan dalam aplikasi Anda. FirebaseUI memiliki manfaat berikut:

  • Beberapa penyedia: alur login untuk email/sandi, link email, autentikasi telepon, Login dengan Google, Login dengan Facebook, dan Login dengan Twitter.
  • Manajemen Akun: alur untuk menangani tugas pengelolaan akun, seperti pembuatan akun dan penyetelan ulang sandi.
  • Penautan akun anonim: alur untuk secara otomatis menautkan akun anonim ke penyedia identitas.
  • Mudah disesuaikan: menyesuaikan tampilan FirebaseUI agar cocok dengan aplikasi Anda. Selain itu, karena FirebaseUI bersifat open source, Anda bisa menyalin project dan menyesuaikannya sesuai kebutuhan.

Sebelum memulai

  1. Tambahkan Firebase ke project iOS Anda.

  2. Tambahkan FirebaseUI ke Podfile Anda:

    pod 'FirebaseUI'
    

    Jika mau, Anda dapat menambahkan komponen Auth saja dan penyedia yang ingin digunakan:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/Twitter'
    pod 'FirebaseUI/Phone'
    
  3. Jika Anda belum menghubungkan aplikasi dengan project Firebase, lakukanlah dari Firebase console.

Menyiapkan metode login

Sebelum Anda dapat menggunakan Firebase untuk membuat pengguna login, Anda harus mengaktifkan dan mengonfigurasi metode login yang ingin Anda dukung.

Alamat email dan sandi

Di Firebase console, buka bagian Authentication, lalu aktifkan autentikasi email dan sandi.

  1. Di Firebase console, buka bagian Authentication. Pada tab Metode login, aktifkan penyedia Email/Sandi. Perlu diketahui bahwa login dengan email/sandi harus diaktifkan untuk menggunakan metode login dengan link email.

  2. Di bagian yang sama, aktifkan metode login dengan Link email (login tanpa sandi), lalu klik Simpan.

  3. Anda dapat mengaktifkan metode login dengan link email dengan menginisialisasi instance FUIEmailAuth dengan FIREmailLinkAuthSignInMethod. Anda juga harus memberikan objek FIRActionCodeSettings yang valid dengan handleCodeInApp ditetapkan ke true.

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.initAuthAuthUI(FUIAuth.defaultAuthUI(), signInMethod: FIREmailLinkAuthSignInMethod, forceSameDevice: false, allowNewEmailAccounts: true, actionCodeSetting: actionCodeSettings)

Objective-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] initAuthAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];
  1. Selain itu, Anda harus memberi akses pada URL yang diteruskan ke iniatializer. Anda dapat melakukannya di Firebase console, buka bagian Authentication. Pada tab Metode login, tambahkan URL di bagian Domain yang diotorisasi.

  2. Setelah mendapatkan deep link, Anda harus meneruskannya ke UI autentikasi agar dapat ditangani.

Swift

Auth.defaultAuthUI.handleOpenURL(url, sourceApplication: sourceApplication)

Objective-C

[FUIAuth.defaultAuthUI handleOpenURL:url sourceApplication:sourceApplication];
  1. Metode login dengan link email di FirebaseUI-iOS kompatibel dengan FirebaseUI-Android dan FirebaseUI-web, karena satu pengguna yang memulai alur dari FirebaseUI-Android dapat membuka link tersebut dan menyelesaikan proses login dengan FirebaseUI-web. Hal tersebut juga berlaku untuk alur yang berlawanan.

Google

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan Login dengan Google.

  2. Tambahkan ID klien terbalik sebagai skema URL di project Xcode Anda. Anda dapat menemukan nilai ini di file GoogleService-Info.plist.

Facebook

  1. Siapkan Facebook Login SDK dengan mengikuti halaman memulai Facebook.

  2. Di Firebase console, buka bagian Authentication, lalu aktifkan Facebook. Untuk mengaktifkan login dengan Facebook, Anda harus menyediakan ID Aplikasi Facebook dan App Secret yang dapat diperoleh di konsol Developer Facebook.

  3. Aktifkan fitur berbagi keychain di project Xcode Anda dari layar Setelan Project > Kemampuan.

  4. Tambahkan fbFACEBOOK_APP_ID sebagai skema URL di project Xcode Anda.

  5. Tambahkan ID Aplikasi dan nama tampilan Facebook Anda ke file Info.plist:

    Kunci Nilai
    FacebookAppID FACEBOOK_APP_ID (misalnya, 1234567890)
    FacebookDisplayName Nama aplikasi Anda

Twitter

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan Twitter. Untuk mengaktifkan login dengan Twitter, Anda harus memberikan kunci dan rahasia konsumen Twitter API yang dapat diperoleh di konsol Pengelolaan Aplikasi Twitter.

  2. Melakukan inisialisasi instance penyedia OAuth yang dikonfigurasikan untuk login Twitter:

    Swift

    provider = FUIOAuth(authUI: self.authUI!,
                    providerID: "twitter.com",
                    buttonLabelText: "Sign in with Twitter",
                    shortName: "Twitter",
                    buttonColor: buttonColor,
                    iconImage: UIImage(contentsOfFile: iconPath)!,
                    scopes: ["user.readwrite"],
                    customParameters: ["prompt" : "consent"],
                    loginHintKey: nil)
    

    Objective-C

    FUIOAuth *provider = [[FUIOAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]
                                           providerID:@"twitter.com"
                                      buttonLabelText:@"Sign in with Twitter"
                                            shortName:@"Twitter"
                                          buttonColor:buttonColor
                                            iconImage:[UIImage imageWithContentsOfFile:iconPath]
                                               scopes:@[@"user.readwrite"]
                                     customParameters:@{@"prompt" : @"consent"}
                                         loginHintKey:nil];
    

Nomor telepon

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan login dengan nomor telepon.

  2. Firebase harus dapat memverifikasi bahwa permintaan login dengan nomor telepon berasal dari aplikasi Anda. Salah satu cara untuk melakukannya adalah melalui notifikasi APN. Baca bagian Mengaktifkan verifikasi aplikasi untuk mengetahui detailnya.

    Untuk mengaktifkan notifikasi APN agar dapat digunakan dengan Firebase Authentication:

    1. Di Xcode, aktifkan notifikasi push untuk project Anda.

    2. Upload kunci autentikasi APN Anda ke Firebase. Jika Anda belum memiliki kunci autentikasi APN, baca cara Mengonfigurasi APN dengan FCM.

      1. Pada project Anda di Firebase console, pilih ikon roda gigi, pilih Setelan Project, kemudian pilih tab Cloud Messaging.

      2. Di kunci autentikasi APN di bagian konfigurasi aplikasi iOS, klik tombol Upload.

      3. Buka lokasi tempat Anda menyimpan kunci, pilih kunci tersebut, lalu klik Buka. Tambahkan ID kunci untuk kunci tersebut (tersedia di Certificates, Identifiers & Profiles pada Apple Developer Member Center) lalu klik Upload.

      Jika sudah memiliki sertifikat APN, Anda dapat mengupload sertifikat.

  3. Jika notifikasi APN tidak dapat diterima di perangkat, Firebase akan menggunakan reCAPTCHA untuk memverifikasi permintaan.

    Untuk mengaktifkan verifikasi reCAPTCHA, jika Anda belum menambahkan ID klien terbalik sebagai skema URL (misalnya, untuk mengaktifkan Login dengan Google), lakukanlah di project Xcode Anda. Anda dapat menemukan nilai ini di GoogleService-Info.plist.

  4. Opsional: Firebase menggunakan method swizzling untuk memperoleh token APN aplikasi secara otomatis, menangani notifikasi push diam yang dikirim Firebase ke aplikasi Anda, dan menghalangi pengalihan skema khusus dari halaman verifikasi reCAPTCHA secara otomatis selama verifikasi berlangsung.

    Jika Anda memilih untuk tidak menggunakan swizzling, lihat Lampiran: Menggunakan login ponsel tanpa swizzling di dokumen autentikasi Firebase SDK.

Login

Untuk memulai alur login FirebaseUI, inisialisasikan FirebaseUI terlebih dahulu:

Swift

import FirebaseUI

/* ... */

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

Objective-C

@import FirebaseUI;

...

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

Kemudian, konfigurasikan FirebaseUI untuk menggunakan metode login yang ingin Anda dukung:

Swift

import FirebaseUI

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

Objective-C

@import FirebaseUI;

...

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

Jika Anda mengaktifkan login dengan Google atau Facebook, gunakan penangan untuk hasil aliran login dengan Google dan 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
}

Objective-C

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

Terakhir, dapatkan instance AuthViewController dari FUIAuth. Selanjutnya, Anda dapat menampilkannya sebagai pengontrol tampilan pertama aplikasi Anda atau menampilkannya dari pengontrol tampilan lain di aplikasi.

Swift

Untuk mendapatkan pemilih metode login:

let authViewController = authUI.authViewController()

Jika hanya menggunakan login dengan nomor ponsel, Anda dapat secara langsung menampilkan tampilan login dengan nomor ponsel:

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

Objective-C

Untuk mendapatkan pemilih metode login:

UINavigationController *authViewController = [authUI authViewController];

Jika hanya menggunakan login dengan nomor ponsel, Anda dapat secara langsung menampilkan tampilan login dengan nomor ponsel:

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

Setelah menampilkan tampilan autentikasi dan login pengguna, hasilnya dikembalikan ke delegasi FirebaseUI Auth di method didSignInWithUser:error::

Swift

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

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

Logout

FirebaseUI menyediakan cara mudah untuk logout dari Firebase Authentication dan semua penyedia identitas sosial:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Penyesuaian

Anda dapat menyesuaikan layar login dengan menentukan subclass pengontrol tampilan FirebaseUI dan menentukannya di method delegasi 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)
}

Objective-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];
}

Anda dapat menyesuaikan URL ke persyaratan layanan aplikasi Anda yang ditautkan pada layar pembuatan akun:

Swift

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

Objective-C

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

Terakhir, Anda dapat menyesuaikan pesan dan perintah yang ditampilkan ke pengguna dengan menentukan paket khusus:

Swift

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

Objective-C

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

Langkah Berikutnya

  • Untuk mengetahui informasi lebih lanjut cara menggunakan dan menyesuaikan FirebaseUI, baca file README di GitHub.
  • Jika Anda menemukan masalah di FirebaseUI dan ingin melaporkannya, gunakan pelacak masalah GitHub.