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
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'
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.
Autentikasi tautan email
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.
Di bagian yang sama, aktifkan metode masuk tautan Email (masuk tanpa kata sandi) dan klik Simpan .
Anda dapat mengaktifkan masuk tautan email dengan menginisialisasi instance
FUIEmailAuth
denganFIREmailLinkAuthSignInMethod
. Anda juga harus menyediakan objekFIRActionCodeSettings
yang valid dengan sethandleCodeInApp
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];
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 .
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];
- 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
Ikuti bagian Sebelum Anda mulai dan Mematuhi persyaratan data anonim Apple di panduan Masuk Firebase dengan Apple .
Tambahkan kemampuan Masuk dengan Apple ke file hak Anda.
Menginisialisasi instans penyedia OAuth yang dikonfigurasi untuk Masuk dengan Apple:
Cepat
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Di konsol Firebase , buka bagian Otentikasi dan aktifkan Masuk dengan Google.
Tambahkan ID klien terbalik Anda sebagai skema URL di proyek Xcode Anda. Anda dapat menemukan nilai ini di file
GoogleService-Info.plist
.
Siapkan Facebook Login SDK dengan mengikuti halaman memulai Facebook .
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.
Aktifkan berbagi gantungan kunci di proyek Xcode Anda dari layar Pengaturan Proyek > Kemampuan .
Tambahkan
fb FACEBOOK_APP_ID
sebagai skema URL di proyek Xcode Anda.Tambahkan ID Aplikasi Facebook Anda dan nama tampilan ke file
Info.plist
:Kunci Nilai FacebookAppID FACEBOOK_APP_ID
(misalnya,1234567890
)FacebookDisplayName Nama aplikasi Anda Menginisialisasi instance penyedia Facebook:
Cepat
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Jika Anda ingin menggunakan Facebook Limited Login , setel properti
useLimitedLogin
pada instanceFUIFacebookAuth
.Cepat
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
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.
Menginisialisasi instance penyedia OAuth yang dikonfigurasi untuk login Twitter:
Cepat
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Nomor telepon
Di konsol Firebase , buka bagian Otentikasi dan aktifkan login dengan nomor telepon.
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:
Di Xcode, aktifkan pemberitahuan push untuk proyek Anda.
Unggah kunci autentikasi APN Anda ke Firebase. Jika Anda belum memiliki kunci autentikasi APN, pastikan untuk membuatnya di Apple Developer Member Center .
Di dalam proyek Anda di Firebase console, pilih ikon roda gigi, pilih Project Settings , lalu pilih tab Cloud Messaging .
Di kunci autentikasi APN di bawah konfigurasi aplikasi iOS , klik tombol Unggah .
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.
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
.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 .