FirebaseUI ile iOS uygulamanıza kolayca oturum açma özelliği ekleyin

FirebaseUI, uygulamanızda kullanılmak üzere açılır kullanıcı arayüzü akışları sağlayan, Firebase Authentication SDK'nın üzerine kurulmuş bir kitaplıktır. FirebaseUI aşağıdaki avantajları sağlar:

  • Çoklu sağlayıcılar : e-posta/şifre, e-posta bağlantısı, telefon kimlik doğrulaması, Google Oturum Açma, Facebook Oturum Açma ve Twitter Oturum Açma için oturum açma akışları.
  • Hesap yönetimi : hesap oluşturma ve parola sıfırlama gibi hesap yönetimi görevlerini gerçekleştirmeye yönelik akışlar.
  • Anonim hesap bağlama : Anonim hesapları kimlik sağlayıcılara otomatik olarak bağlamaya yönelik akışlar.
  • Özelleştirilebilir : FirebaseUI'nin görünümünü uygulamanıza uyacak şekilde özelleştirin. Ayrıca FirebaseUI açık kaynak olduğundan projeyi çatallayabilir ve tam olarak ihtiyaçlarınıza göre özelleştirebilirsiniz.

Sen başlamadan önce

  1. Firebase'i Apple projenize ekleyin .

  2. FirebaseUI'yi Pod dosyanıza ekleyin:

    pod 'FirebaseUI'
    

    İsterseniz yalnızca Yetkilendirme bileşenini ve kullanmak istediğiniz sağlayıcıları ekleyebilirsiniz:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
    pod 'FirebaseUI/Phone'
    
  3. Uygulamanızı henüz Firebase projenize bağlamadıysanız bunu Firebase konsolundan yapın.

Oturum açma yöntemlerini ayarlama

Kullanıcıların oturum açması için Firebase'i kullanabilmeniz için öncelikle desteklemek istediğiniz oturum açma yöntemlerini etkinleştirmeniz ve yapılandırmanız gerekir.

E-posta adresi ve şifre

Firebase konsolunda Kimlik Doğrulama bölümünü açın ve e-posta ve şifre kimlik doğrulamasını etkinleştirin.

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın. Oturum açma yöntemi sekmesinde E-posta/Parola sağlayıcısını etkinleştirin. E-posta bağlantısıyla oturum açmayı kullanmak için e-posta veya parolayla oturum açmanın etkinleştirilmesi gerektiğini unutmayın.

  2. Aynı bölümde E-posta bağlantısı (şifresiz oturum açma) oturum açma yöntemini etkinleştirin ve Kaydet'i tıklayın.

  3. FIREmailLinkAuthSignInMethod ile bir FUIEmailAuth örneğini başlatarak e-posta bağlantısıyla oturum açmayı etkinleştirebilirsiniz. Ayrıca, handleCodeInApp true olarak ayarlanmış geçerli bir FIRActionCodeSettings nesnesi sağlamanız gerekecektir.

Süratli

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)

Amaç-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. Ayrıca, başlatıcıya ilettiğiniz URL'yi beyaz listeye eklemeniz gerekir. Bunu Firebase konsolunda Kimlik Doğrulama bölümünü açarak yapabilirsiniz. Oturum açma yöntemi sekmesinde, Yetkili alanlar altına URL'yi ekleyin.

  2. Derin bağlantıyı yakaladıktan sonra, işlenebilmesi için onu kimlik doğrulama arayüzüne aktarmanız gerekecektir.

Süratli

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

Amaç-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOS'ta e-posta bağlantısıyla oturum açma, FirebaseUI-Android ve FirebaseUI-web ile uyumludur; burada akışı FirebaseUI-Android'den başlatan bir kullanıcı bağlantıyı açabilir ve FirebaseUI-web ile oturum açmayı tamamlayabilir. Aynı şey ters akış için de geçerlidir.

Elma

  1. Firebase Apple ile Oturum Açma kılavuzundaki Başlamadan Önce ve Apple'ın anonimleştirilmiş veri gereksinimlerine uyma bölümlerini izleyin.

  2. Yetkilendirmeler dosyanıza Apple ile Giriş Yap özelliğini ekleyin.

  3. Apple ile Oturum Açma için yapılandırılmış bir OAuth sağlayıcı örneğini başlatın:

    Süratli

    provider = FUIOAuth.appleAuthProvider()
    

    Amaç-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Bu eğiticiyi kullanarak Google ile Oturum Açmayı kurun

Facebook

  1. Facebook'un başlangıç ​​sayfasını takip ederek Facebook Giriş SDK'sını kurun.

  2. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve Facebook'u etkinleştirin. Facebook'ta oturum açmayı etkinleştirmek için Facebook Geliştirici konsolundan alabileceğiniz Facebook Uygulama Kimliğinizi ve Uygulama Sırrınızı sağlamanız gerekir.

  3. Proje Ayarları > Yetenekler ekranından Xcode projenizde anahtarlık paylaşımını etkinleştirin.

  4. Xcode projenize fb FACEBOOK_APP_ID URL şeması olarak ekleyin.

  5. Facebook Uygulama Kimliğinizi ve görünen adınızı Info.plist dosyasına ekleyin:

    Anahtar Değer
    FacebookUygulama Kimliği FACEBOOK_APP_ID (örneğin, 1234567890 )
    FacebookGörünenAd Uygulamanızın adı
  6. Bir Facebook sağlayıcı örneğini başlatın:

    Süratli

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

    Amaç-C

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

  7. Facebook Sınırlı Giriş özelliğini kullanmak istiyorsanız FUIFacebookAuth örneğinde useLimitedLogin özelliğini ayarlayın.

    Süratli

    provider.useLimitedLogin = true
    

    Amaç-C

    provider.useLimitedLogin = YES;
    

heyecan

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve Twitter'ı etkinleştirin. Twitter'da oturum açmayı etkinleştirmek için Twitter Uygulama Yönetimi konsolundan alabileceğiniz Twitter API tüketici anahtarınızı ve sırrınızı sağlamanız gerekir.

  2. Twitter girişi için yapılandırılmış bir OAuth sağlayıcı örneğini başlatın:

    Süratli

    provider = FUIOAuth.twitterAuthProvider()
    

    Amaç-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

Telefon numarası

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve telefon numarasıyla oturum açmayı etkinleştirin.

  2. Firebase, telefon numarasıyla oturum açma isteklerinin uygulamanızdan geldiğini doğrulayabilmelidir. Bunu başarmanın yollarından biri APN bildirimleridir. Ayrıntılar için Uygulama doğrulamayı etkinleştirme konusuna bakın.

    Firebase Authentication ile kullanılmak üzere APN bildirimlerini etkinleştirmek için:

    1. Xcode'da projeniz için anında bildirimleri etkinleştirin .

    2. APN kimlik doğrulama anahtarınızı Firebase'e yükleyin. Henüz bir APN kimlik doğrulama anahtarınız yoksa Apple Geliştirici Üye Merkezi'nde bir tane oluşturduğunuzdan emin olun.

      1. Firebase konsolundaki projenizin içinde dişli simgesini seçin, Proje Ayarları'nı ve ardından Bulut Mesajlaşma sekmesini seçin.

      2. iOS uygulama yapılandırması altındaki APN kimlik doğrulama anahtarında Yükle düğmesini tıklayın.

      3. Anahtarınızı kaydettiğiniz konuma göz atın, onu seçin ve Aç'ı tıklayın. Anahtarın anahtar kimliğini ekleyin ( Apple Geliştirici Üye Merkezi'nde mevcuttur) ve Yükle'yi tıklayın.

      Zaten bir APN sertifikanız varsa bunun yerine sertifikayı yükleyebilirsiniz.

  3. Bir cihazda APN bildirimleri alınamadığında Firebase, istekleri doğrulamak için reCAPTCHA'yı kullanır.

    reCAPTCHA doğrulamasını etkinleştirmek için Xcode'da aşağıdakileri yapın:

    1. Proje konfigürasyonunuzu açın: sol ağaç görünümünde proje adına çift tıklayın. HEDEFLER bölümünden uygulamanızı seçin, ardından Bilgi sekmesini seçin ve URL Türleri bölümünü genişletin.
    2. + düğmesini tıklayın ve Kodlanmış Uygulama Kimliğinizi bir URL şeması olarak ekleyin. Kodlanmış Uygulama Kimliğinizi Firebase konsolunun Genel Ayarlar sayfasında, iOS uygulamanıza ait bölümde bulabilirsiniz. Diğer alanları boş bırakın.

      Tamamlandığında, yapılandırmanız aşağıdakine benzer bir şekilde görünmelidir (ancak uygulamaya özel değerlerinizle):

      Xcode'un özel URL şeması kurulum arayüzünün ekran görüntüsü
  4. İsteğe bağlı : Firebase, uygulamanızın APN jetonunu otomatik olarak almak, Firebase'in uygulamanıza gönderdiği sessiz anında bildirimleri işlemek ve doğrulama sırasında reCAPTCHA doğrulama sayfasından özel şema yönlendirmesini otomatik olarak engellemek için swizzling yöntemini kullanır.

    Şifrelemeyi kullanmamayı tercih ediyorsanız bkz . Ek: Firebase SDK kimlik doğrulama belgelerinde şifresiz telefonla oturum açmayı kullanma .

Kayıt olmak

FirebaseUI oturum açma akışını başlatmak için öncelikle FirebaseUI'yi başlatın:

Süratli

import FirebaseAuthUI

/* ... */

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

Amaç-C

@import FirebaseAuthUI;

...

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

Ardından FirebaseUI'yi desteklemek istediğiniz oturum açma yöntemlerini kullanacak şekilde yapılandırın:

Süratli

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

Amaç-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;

Google veya Facebook'ta oturum açmayı etkinleştirdiyseniz Google ve Facebook'a kaydolma akışlarının sonucu için bir işleyici uygulayın:

Süratli

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
}

Amaç-C

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

Son olarak, FUIAuth AuthViewController örneğini alın. Daha sonra bunu uygulamanızın ilk görünüm denetleyicisi olarak sunabilir veya uygulamanızdaki başka bir görünüm denetleyicisinden sunabilirsiniz.

Süratli

Oturum açma yöntemi seçiciyi almak için:

let authViewController = authUI.authViewController()

Yalnızca telefon numarasıyla oturum açmayı kullanıyorsanız bunun yerine doğrudan telefon numarasıyla oturum açma görünümünü görüntüleyebilirsiniz:

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

Amaç-C

Oturum açma yöntemi seçiciyi almak için:

UINavigationController *authViewController = [authUI authViewController];

Yalnızca telefon numarasıyla oturum açmayı kullanıyorsanız bunun yerine doğrudan telefon numarasıyla oturum açma görünümünü görüntüleyebilirsiniz:

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

Kimlik doğrulama görünümünü sunduktan ve kullanıcı oturum açtıktan sonra sonuç, didSignInWithUser:error: yöntemindeki FirebaseUI Auth temsilcisine döndürülür:

Süratli

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

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

Oturumu Kapat

FirebaseUI, Firebase Authentication'dan ve tüm sosyal kimlik sağlayıcılarından çıkış yapmak için kullanışlı yöntemler sağlar:

Süratli

authUI.signOut()

Amaç-C

[authUI signOut];

Özelleştirme

FirebaseUI'nin görünüm denetleyicilerini alt sınıflara ayırarak ve bunları FUIAuth temsilci yöntemlerinde belirterek oturum açma ekranlarını özelleştirebilirsiniz:

Süratli

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

Amaç-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];
}

URL'yi, hesap oluşturma ekranında bağlantısı verilen uygulamanızın hizmet şartlarına göre özelleştirebilirsiniz:

Süratli

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

Amaç-C

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

Son olarak, özel bir paket belirterek kullanıcılarınıza gösterilen mesajları ve istemleri özelleştirebilirsiniz:

Süratli

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

Amaç-C

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

Sonraki adımlar

  • FirebaseUI'yi kullanma ve özelleştirme hakkında daha fazla bilgi için GitHub'daki README dosyasına bakın.
  • FirebaseUI'de bulup sorun yaşıyorsanız ve bunu bildirmek istiyorsanız GitHub sorun izleyiciyi kullanın.