FirebaseUI to biblioteka zbudowana na pakiecie SDK uwierzytelniania Firebase, która udostępnia przepływy interfejsu użytkownika do użycia w Twojej aplikacji. FirebaseUI zapewnia następujące korzyści:
- Wielu dostawców : przepływy logowania dla adresu e-mail/hasła, łącza e-mail, uwierzytelniania telefonu, logowania Google, logowania do Facebooka i logowania do Twittera.
- Zarządzanie kontem : przepływy do obsługi zadań związanych z zarządzaniem kontami, takich jak tworzenie kont i resetowanie haseł.
- Łączenie kont anonimowych : przepływy do automatycznego łączenia kont anonimowych z dostawcami tożsamości.
- Możliwość dostosowania : dostosuj wygląd interfejsu FirebaseUI do swojej aplikacji. Ponadto, ponieważ FirebaseUI jest open source, możesz rozwidlić projekt i dostosować go dokładnie do swoich potrzeb.
Zanim zaczniesz
Dodaj FirebaseUI do swojego Podfile:
pod 'FirebaseUI'Jeśli wolisz, możesz dodać tylko komponent Auth i dostawców, z których chcesz korzystać:
pod 'FirebaseUI/Auth' pod 'FirebaseUI/Google' pod 'FirebaseUI/Facebook' pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc pod 'FirebaseUI/Phone'Jeśli nie połączyłeś jeszcze swojej aplikacji z projektem Firebase, zrób to z poziomu konsoli Firebase .
Skonfiguruj metody logowania
Zanim będziesz mógł używać Firebase do logowania użytkowników, musisz włączyć i skonfigurować metody logowania, które chcesz obsługiwać.
Adres e-mail i hasło
W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz uwierzytelnianie za pomocą poczty e-mail i hasła.
Uwierzytelnianie łącza e-mail
W konsoli Firebase otwórz sekcję Uwierzytelnianie . Na karcie Metoda logowania włącz dostawcę adresu e-mail/hasła . Pamiętaj, że logowanie za pomocą adresu e-mail/hasła musi być włączone, aby można było korzystać z logowania za pomocą łącza e-mail.
W tej samej sekcji włącz metodę logowania przez łącze e-mail (logowanie bez hasła) i kliknij przycisk Zapisz .
Możesz włączyć logowanie za pomocą łącza e-mail, inicjując instancję
FUIEmailAuthza pomocąFIREmailLinkAuthSignInMethod. Będziesz także musiał podać prawidłowy obiektFIRActionCodeSettingszhandleCodeInAppustawionym na wartość true.
Szybki
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)
Cel 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];
Ponadto musisz dodać do białej listy adres URL przekazywany do inicjalizatora. Możesz to zrobić w konsoli Firebase , otwórz sekcję Uwierzytelnianie . Na karcie Metoda logowania dodaj adres URL w obszarze Autoryzowane domeny .
Gdy złapiesz precyzyjny link, musisz przekazać go do interfejsu uwierzytelniania, aby można było go obsłużyć.
Szybki
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Cel C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Logowanie za pomocą łącza e-mail w FirebaseUI-iOS jest zgodne z FirebaseUI-Android i FirebaseUI-web , gdzie jeden użytkownik uruchamiający przepływ z FirebaseUI-Android może otworzyć łącze i dokończyć logowanie za pomocą FirebaseUI-web. To samo dotyczy przepływu przeciwnego.
Jabłko
Postępuj zgodnie z sekcjami Zanim zaczniesz i Zgodność z wymaganiami dotyczącymi anonimowych danych firmy Apple w przewodniku Firebase Logowanie się za pomocą Apple .
Dodaj funkcję Zaloguj się przy użyciu konta Apple do pliku uprawnień.
Zainicjuj instancję dostawcy OAuth skonfigurowaną do logowania się za pomocą Apple:
Szybki
provider = FUIOAuth.appleAuthProvider()
Cel C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Logowanie przez Google.
Pobierz nową kopię pliku
GoogleService-Info.plistswojego projektu i skopiuj go do swojego projektu Xcode. Zastąp wszystkie istniejące wersje nową. (Zobacz Dodawanie Firebase do projektu na iOS ).Dodaj odwrócony identyfikator klienta jako schemat adresu URL w swoim projekcie Xcode. Możesz znaleźć tę wartość w pliku
GoogleService-Info.plist.
Facebook
Skonfiguruj zestaw Facebook Login SDK, postępując zgodnie ze stroną wprowadzającą Facebooka .
W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Facebooka. Aby włączyć logowanie na Facebooku, musisz podać swój identyfikator aplikacji na Facebooku i klucz tajny aplikacji, które można uzyskać w konsoli programistów Facebooka.
Włącz udostępnianie pęku kluczy w swoim projekcie Xcode na ekranie Ustawienia projektu > Możliwości .
Dodaj
fb FACEBOOK_APP_IDjako schemat adresu URL w swoim projekcie Xcode.Dodaj swój identyfikator aplikacji Facebook i wyświetlaną nazwę do pliku
Info.plist:Klucz Wartość Identyfikator aplikacji Facebooka FACEBOOK_APP_ID(na przykład1234567890)FacebookDisplayName Nazwa Twojej aplikacji Zainicjuj instancję dostawcy Facebooka:
Szybki
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Cel C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Jeśli chcesz używać ograniczonego logowania do Facebooka , ustaw właściwość
useLimitedLoginw instancjiFUIFacebookAuth.Szybki
provider.useLimitedLogin = true
Cel C
provider.useLimitedLogin = YES;
Świergot
W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Twittera. Aby włączyć logowanie na Twitterze, musisz podać swój klucz i tajny klucz klienta interfejsu API Twittera, które można uzyskać w konsoli zarządzania aplikacjami na Twitterze.
Zainicjuj instancję dostawcy OAuth skonfigurowaną do logowania na Twitterze:
Szybki
provider = FUIOAuth.twitterAuthProvider()
Cel C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Numer telefonu
W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz logowanie za pomocą numeru telefonu.
Firebase musi być w stanie zweryfikować, czy żądania logowania na numer telefonu pochodzą z Twojej aplikacji. Jednym ze sposobów osiągnięcia tego celu są powiadomienia APN. Aby uzyskać szczegółowe informacje, zobacz Włącz weryfikację aplikacji .
Aby włączyć powiadomienia APN do użytku z uwierzytelnianiem Firebase:
W Xcode włącz powiadomienia push dla swojego projektu.
Prześlij swój klucz uwierzytelniający APN do Firebase. Jeśli nie masz jeszcze klucza uwierzytelniającego APNs, utwórz go w Apple Developer Member Center .
W swoim projekcie w konsoli Firebase wybierz ikonę koła zębatego, wybierz Ustawienia projektu , a następnie wybierz kartę Cloud Messaging .
W kluczu uwierzytelniania APNs w konfiguracji aplikacji na iOS kliknij przycisk Prześlij .
Przejdź do lokalizacji, w której zapisałeś klucz, wybierz go i kliknij Otwórz . Dodaj identyfikator klucza dla klucza (dostępny w Apple Developer Member Center ) i kliknij Prześlij .
Jeśli masz już certyfikat APNs, możesz zamiast tego przesłać ten certyfikat.
Gdy na urządzeniu nie można odbierać powiadomień APN, Firebase używa reCAPTCHA do weryfikacji żądań.
Aby włączyć weryfikację reCAPTCHA, wykonaj następujące czynności w Xcode:
- Otwórz konfigurację projektu: kliknij dwukrotnie nazwę projektu w lewym widoku drzewa. Wybierz swoją aplikację z sekcji CELE , następnie wybierz kartę Informacje i rozwiń sekcję Typy adresów URL .
- Kliknij przycisk + i dodaj swój zakodowany identyfikator aplikacji jako schemat adresu URL. Identyfikator zakodowanej aplikacji można znaleźć na stronie Ustawienia ogólne konsoli Firebase, w sekcji dotyczącej aplikacji na iOS. Pozostałe pola pozostaw puste.
Po zakończeniu konfiguracja powinna wyglądać podobnie do poniższej (ale z wartościami specyficznymi dla aplikacji):
Opcjonalnie : Firebase używa zamiany metod, aby automatycznie uzyskiwać token APN Twojej aplikacji, obsługiwać ciche powiadomienia push, które Firebase wysyła do Twojej aplikacji, oraz automatycznie przechwytywać niestandardowe przekierowanie schematu ze strony weryfikacji reCAPTCHA podczas weryfikacji.
Jeśli wolisz nie używać swizzlingu, zobacz Dodatek: Używanie logowania przez telefon bez swizzlingu w dokumentach uwierzytelniających Firebase SDK.
Zalogować się
Aby uruchomić przepływ logowania FirebaseUI, najpierw zainicjuj FirebaseUI:
Szybki
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Cel C
@import FirebaseAuthUI;
...
[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;
Następnie skonfiguruj interfejs FirebaseUI tak, aby korzystał z metod logowania, które chcesz obsługiwać:
Szybki
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Cel 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;
Jeśli włączyłeś logowanie przez Google lub Facebook, zaimplementuj procedurę obsługi wyników przepływów rejestracji w Google i Facebook:
Szybki
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
}
Cel C
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
Na koniec pobierz instancję AuthViewController z FUIAuth . Następnie możesz przedstawić go jako pierwszy kontroler widoku swojej aplikacji lub przedstawić go z innego kontrolera widoku w swojej aplikacji.
Szybki
Aby uzyskać selektor metody logowania:
let authViewController = authUI.authViewController()
Jeśli korzystasz tylko z logowania za pomocą numeru telefonu, możesz zamiast tego wyświetlić bezpośrednio widok logowania za pomocą numeru telefonu:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Cel C
Aby uzyskać selektor metody logowania:
UINavigationController *authViewController = [authUI authViewController];
Jeśli korzystasz tylko z logowania za pomocą numeru telefonu, możesz zamiast tego wyświetlić bezpośrednio widok logowania za pomocą numeru telefonu:
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Po przedstawieniu widoku uwierzytelniania i zalogowaniu się użytkownika wynik jest zwracany do delegata FirebaseUI Auth w metodzie didSignInWithUser:error: ::
Szybki
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Cel 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.
}
Wyloguj się
FirebaseUI zapewnia wygodne metody wylogowywania się z Firebase Authentication, a także wszystkich dostawców tożsamości społecznościowych:
Szybki
authUI.signOut()
Cel C
[authUI signOut];
Dostosowywanie
Możesz dostosować ekrany logowania, podklasując kontrolery widoku FirebaseUI i określając je w metodach delegowania FUIAuth :
Szybki
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)
}
Cel 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];
}
Możesz dostosować adres URL do warunków korzystania z aplikacji, do których link znajduje się na ekranie tworzenia konta:
Szybki
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Cel C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
Na koniec możesz dostosować komunikaty i monity wyświetlane użytkownikom, określając niestandardowy pakiet:
Szybki
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Cel C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Następne kroki
- Aby uzyskać więcej informacji na temat używania i dostosowywania interfejsu FirebaseUI, zobacz plik README w serwisie GitHub.
- Jeśli znajdziesz problem w FirebaseUI i chcesz go zgłosić, użyj narzędzia do śledzenia problemów GitHub .