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

Tambahkan proses masuk dengan mudah ke aplikasi iOS Anda dengan FirebaseUI

FirebaseUI adalah library yang dibangun 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/kata sandi, tautan email, autentikasi telepon, Masuk dengan Google, Masuk Facebook, dan Masuk 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 : menyesuaikan tampilan FirebaseUI agar sesuai dengan aplikasi Anda. Selain itu, karena FirebaseUI adalah open source, Anda dapat melakukan fork proyek dan menyesuaikannya dengan 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 Firebase console .

Siapkan metode masuk

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

Alamat email dan kata sandi

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

  1. Di Firebase console , buka bagian Otentikasi . Pada tab Metode masuk , aktifkan penyedia Email/Kata Sandi . Perhatikan bahwa masuk dengan email/sandi harus diaktifkan untuk menggunakan masuk dengan 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 handleCodeInApp disetel 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 ke daftar putih yang Anda berikan ke penginisialisasi. Anda dapat melakukannya di Firebase console , buka bagian Otentikasi . Pada tab Metode masuk , tambahkan URL di bawah Domain yang diotorisasi .

  2. Setelah Anda menangkap tautan dalam, Anda harus meneruskannya ke UI auth agar dapat ditangani.

Cepat

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

Objective-C

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

apel

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

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

  3. Inisialisasi instance penyedia OAuth yang dikonfigurasi untuk Masuk dengan Apple:

    Cepat

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Di Firebase console , buka bagian Otentikasi dan aktifkan Google Sign-in.

  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 )
    NamaTampilan Facebook Nama aplikasi Anda
  6. Inisialisasi 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 konsumen dan rahasia API Twitter Anda, yang bisa Anda dapatkan di konsol Manajemen Aplikasi Twitter.

  2. Inisialisasi 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 masuk dengan nomor telepon.

  2. Firebase harus dapat memverifikasi bahwa permintaan masuk dengan nomor telepon berasal dari aplikasi Anda. Salah satu cara ini dilakukan adalah melalui pemberitahuan 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 Pusat Anggota Pengembang Apple .

      1. Di dalam proyek Anda di Firebase console, pilih ikon roda gigi, pilih Pengaturan Proyek , lalu pilih tab Pesan Awan .

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

      3. Jelajahi 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 Google Sign-in), 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 notifikasi push diam yang dikirim Firebase ke aplikasi Anda, dan untuk secara otomatis mencegat pengalihan skema kustom dari halaman verifikasi reCAPTCHA selama verifikasi.

    Jika Anda memilih untuk tidak menggunakan swizzling, lihat Lampiran: Menggunakan sign-in telepon tanpa swizzling di dokumen autentikasi Firebase SDK.

Masuk

Untuk memulai alur masuk FirebaseUI, pertama-tama inisialisasi FirebaseUI:

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 dengan 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 menampilkannya 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 masuk dengan nomor telepon, Anda dapat menampilkan tampilan masuk dengan nomor telepon secara langsung:

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 masuk dengan nomor telepon, Anda dapat menampilkan tampilan masuk dengan nomor telepon secara langsung:

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 perintah 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 menggunakan dan menyesuaikan FirebaseUI, lihat file README di GitHub.
  • Jika Anda menemukan dan menerbitkan masalah di FirebaseUI dan ingin melaporkannya, gunakan pelacak masalah GitHub .