Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Tambahkan proses masuk dengan mudah ke aplikasi iOS Anda dengan FirebaseUI

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

FirebaseUI adalah pustaka yang dibuat di atas Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan di aplikasi Anda. FirebaseUI memberikan manfaat berikut:

  • Beberapa penyedia : alur masuk untuk email/sandi, tautan email, autentikasi telepon, Masuk dengan Google, Masuk dengan Facebook, dan Masuk dengan Twitter.
  • Manajemen akun : alur untuk menangani tugas manajemen akun, seperti pembuatan akun dan pengaturan ulang kata sandi.
  • Penautan akun anonim : mengalir untuk secara otomatis menautkan akun anonim ke penyedia identitas.
  • Dapat disesuaikan : sesuaikan tampilan FirebaseUI agar cocok dengan aplikasi Anda. Selain itu, karena FirebaseUI adalah open source, Anda dapat membagi proyek dan menyesuaikannya sesuai kebutuhan Anda.

Sebelum kamu memulai

  1. Tambahkan Firebase ke proyek Apple Anda .

  2. Tambahkan FirebaseUI ke Podfile Anda:

    pod 'FirebaseUI'

    Jika mau, Anda hanya dapat menambahkan komponen Auth dan penyedia yang ingin Anda gunakan:

    pod 'FirebaseUI/Auth'

pod 'FirebaseUI/Google'
pod 'FirebaseUI/Facebook'
pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
pod 'FirebaseUI/Phone'

  3. Jika Anda belum menghubungkan aplikasi ke proyek Firebase, lakukan dari konsol Firebase .

Siapkan metode masuk

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

Alamat email dan kata sandi

Di konsol Firebase , buka bagian Otentikasi dan aktifkan otentikasi email dan kata sandi.

  1. Di konsol Firebase , buka bagian Otentikasi . Pada tab Metode masuk , aktifkan penyedia Email/Kata Sandi . Perhatikan bahwa masuk email/sandi harus diaktifkan untuk menggunakan masuk tautan email.

  2. Di bagian yang sama, aktifkan metode masuk tautan Email (masuk tanpa kata sandi) dan klik Simpan .

  3. Anda dapat mengaktifkan masuk tautan email dengan menginisialisasi instance FUIEmailAuth dengan FIREmailLinkAuthSignInMethod . Anda juga harus menyediakan objek FIRActionCodeSettings yang valid dengan set handleCodeInApp ke true.

Cepat

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)

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] initWithAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];

  1. Selain itu, Anda perlu memasukkan URL yang Anda berikan ke penginisialisasi ke daftar putih. Anda dapat melakukannya di konsol Firebase , buka bagian Otentikasi . Pada tab Metode masuk , tambahkan URL di bawah Domain yang diotorisasi .

  2. Setelah mendapatkan tautan dalam, Anda harus meneruskannya ke UI autentikasi agar dapat ditangani.

Cepat

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. Login link email di FirebaseUI-iOS kompatibel dengan FirebaseUI-Android dan FirebaseUI-web di mana satu pengguna yang memulai alur dari FirebaseUI-Android dapat membuka link dan menyelesaikan login dengan web FirebaseUI. Hal yang sama berlaku untuk aliran yang berlawanan.

apel

  1. Ikuti bagian Sebelum Anda mulai dan Mematuhi persyaratan data anonim Apple di panduan Masuk Firebase dengan Apple .

  2. Tambahkan kemampuan Masuk dengan Apple ke file hak Anda.

  3. Menginisialisasi instans penyedia OAuth yang dikonfigurasi untuk Masuk dengan Apple:

    Cepat

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Di konsol Firebase , buka bagian Otentikasi dan aktifkan Masuk dengan Google.

  2. Tambahkan ID klien terbalik Anda sebagai skema URL di proyek 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 konsol Firebase , buka bagian Otentikasi dan aktifkan Facebook. Untuk mengaktifkan masuk Facebook, Anda harus memberikan ID Aplikasi Facebook dan Rahasia Aplikasi, yang bisa Anda dapatkan di konsol Pengembang Facebook.

  3. Aktifkan berbagi gantungan kunci di proyek Xcode Anda dari layar Pengaturan Proyek > Kemampuan .

  4. Tambahkan fb FACEBOOK_APP_ID sebagai skema URL di proyek Xcode Anda.

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

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

  6. Menginisialisasi instance penyedia Facebook:

    Cepat

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

    Objective-C

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

  7. Jika Anda ingin menggunakan Facebook Limited Login , setel properti useLimitedLogin pada instance FUIFacebookAuth .

    Cepat

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

  1. Di konsol Firebase , buka bagian Otentikasi dan aktifkan Twitter. Untuk mengaktifkan masuk Twitter, Anda harus memberikan kunci dan rahasia konsumen API Twitter, yang dapat Anda peroleh di konsol Manajemen Aplikasi Twitter.

  2. Menginisialisasi instance penyedia OAuth yang dikonfigurasi untuk login Twitter:

    Cepat

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Nomor telepon

  1. Di konsol Firebase , buka bagian Otentikasi dan 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. Lihat Mengaktifkan verifikasi aplikasi untuk detailnya.

    Untuk mengaktifkan notifikasi APN untuk digunakan dengan Firebase Authentication:

    1. Di Xcode, aktifkan pemberitahuan push untuk proyek Anda.

    2. Unggah kunci autentikasi APN Anda ke Firebase. Jika Anda belum memiliki kunci autentikasi APN, pastikan untuk membuatnya di Apple Developer Member Center .

      1. Di dalam proyek Anda di Firebase console, pilih ikon roda gigi, pilih Project Settings , lalu pilih tab Cloud Messaging .

      2. Di kunci autentikasi APN di bawah konfigurasi aplikasi iOS , klik tombol Unggah .

      3. Telusuri ke lokasi tempat Anda menyimpan kunci, pilih, dan klik Buka . Tambahkan ID kunci untuk kunci tersebut (tersedia di Pusat Anggota Pengembang Apple ) dan klik Unggah .

      Jika Anda sudah memiliki sertifikat APN, Anda dapat mengunggah sertifikat tersebut.

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

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

  4. Opsional : Firebase menggunakan metode swizzling untuk mendapatkan token APN aplikasi Anda secara otomatis, untuk menangani pemberitahuan push senyap yang dikirim Firebase ke aplikasi Anda, dan untuk mencegat pengalihan skema khusus secara otomatis dari halaman verifikasi reCAPTCHA selama verifikasi.

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

Masuk

Untuk memulai alur masuk FirebaseUI, inisialisasi FirebaseUI terlebih dahulu:

Cepat

import FirebaseAuthUI

/* ... */

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

Objective-C

@import FirebaseAuthUI;

...

[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 masuk yang ingin Anda dukung:

Cepat

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

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

Jika Anda mengaktifkan masuk Google atau Facebook, terapkan penangan untuk hasil alur pendaftaran Google dan Facebook:

Cepat

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 . Anda kemudian dapat menyajikannya sebagai pengontrol tampilan pertama aplikasi Anda atau menyajikannya dari pengontrol tampilan lain di aplikasi Anda.

Cepat

Untuk mendapatkan pemilih metode masuk:

let authViewController = authUI.authViewController()

Jika Anda hanya menggunakan login nomor telepon, Anda dapat langsung menampilkan tampilan login nomor telepon:

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

Objective-C

Untuk mendapatkan pemilih metode masuk:

UINavigationController *authViewController = [authUI authViewController];

Jika Anda hanya menggunakan login nomor telepon, Anda dapat langsung menampilkan tampilan login nomor telepon:

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

Setelah Anda menampilkan tampilan autentikasi dan pengguna masuk, hasilnya dikembalikan ke delegasi FirebaseUI Auth dalam metode didSignInWithUser:error: ::

Cepat

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

Keluar

FirebaseUI menyediakan metode mudah untuk keluar dari Firebase Authentication serta semua penyedia identitas sosial:

Cepat

authUI.signOut()

Objective-C

[authUI signOut];

Kustomisasi

Anda dapat menyesuaikan layar masuk dengan mensubklasifikasikan pengontrol tampilan FirebaseUI dan menentukannya dalam metode delegasi FUIAuth :

Cepat

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 dengan persyaratan layanan aplikasi Anda, yang ditautkan di layar pembuatan akun:

Cepat

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 permintaan yang ditampilkan kepada pengguna Anda dengan menentukan bundel khusus:

Cepat

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

Objective-C

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

Langkah selanjutnya

  • Untuk informasi selengkapnya tentang penggunaan dan penyesuaian FirebaseUI, lihat file README di GitHub.
  • Jika Anda menemukan dan bermasalah di FirebaseUI dan ingin melaporkannya, gunakan pelacak masalah GitHub .