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

FirebaseUI , uygulamanızda kullanım için açılan UI akışları sağlayan Firebase Authentication SDK'nın üzerine inşa edilmiş bir kitaplıktır. FirebaseUI aşağıdaki avantajları sağlar:

  • Birden çok sağlayıcı : 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 yerine getirmek için akışlar.
  • Anonim hesap bağlama : anonim hesapları otomatik olarak kimlik sağlayıcılara bağlamak için akar.
  • Özelleştirilebilir : FirebaseUI'nin görünümünü uygulamanıza uyacak şekilde özelleştirin. Ayrıca, FirebaseUI açık kaynak olduğu için 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 Auth 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 ayarlayın

Kullanıcıların oturum açması için Firebase'i kullanmadan önce, 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 parola 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ı oturum açmayı kullanmak için e-posta/parola 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'e tıklayın.

  3. Bir FUIEmailAuth örneğini FIREmailLinkAuthSignInMethod ile 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 gerekir.

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

  2. Derin bağlantıyı yakaladığınızda, işlenebilmesi için onu kimlik doğrulama kullanıcı arayüzüne iletmeniz gerekir.

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 FirebaseUI-Android'den akışı başlatan bir kullanıcı bağlantıyı açabilir ve FirebaseUI-web ile oturum açmayı tamamlayabilir. Aynı durum karşıt akış için de geçerlidir.

Elma

  1. Firebase Apple ile Giriş Yap kılavuzundaki Başlamadan Önce ve Apple ile anonimleştirilmiş veri gereksinimlerine uyun bölümlerini izleyin.

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

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

    Süratli

    provider = FUIOAuth.appleAuthProvider()
    

    Amaç-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve Google ile Oturum Açmayı etkinleştirin.

  2. Projenizin GoogleService-Info.plist dosyasının yeni bir kopyasını indirin ve Xcode projenize kopyalayın. Mevcut sürümlerin üzerine yenisini yazın. (Bkz . Firebase'i iOS projenize ekleme .)

  3. Tersine çevrilmiş müşteri kimliğinizi Xcode projenize bir URL şeması olarak ekleyin. Bu değeri GoogleService-Info.plist dosyasında bulabilirsiniz.

    Facebook

  4. Facebook'un başlarken sayfasını takip ederek Facebook Oturum Açma SDK'sını kurun.

  5. 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 Developers konsolunda bulabileceğiniz Facebook Uygulama Kimliğinizi ve Uygulama Sırrınızı sağlamalısınız.

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

  7. fb FACEBOOK_APP_ID Xcode projenize bir URL şeması olarak ekleyin.

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

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

    Süratli

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

    Amaç-C

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

  10. Facebook Limited Login'i kullanmak istiyorsanız, FUIFacebookAuth örneğinde useLimitedLogin özelliğini ayarlayın.

    Süratli

    provider.useLimitedLogin = true
    

    Amaç-C

    provider.useLimitedLogin = YES;
    

twitter

  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 konsolunda bulabileceğiniz Twitter API tüketici anahtarınızı ve sırrınızı sağlamalısınız.

  2. Twitter girişi için yapılandırılmış bir OAuth sağlayıcı örneği 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, uygulamanızdan telefon numarası oturum açma isteklerinin geldiğini doğrulayabilmelidir. Bunun gerçekleştirilme yollarından biri, APN bildirimleridir. Ayrıntılar için Uygulama doğrulamayı etkinleştirme bölümüne bakın.

    APN bildirimlerini Firebase Authentication ile kullanmak üzere etkinleştirmek için:

    1. Xcode'da, projeniz için push bildirimlerini etkinleştirin .

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

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

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

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

      Halihazırda bir APNs sertifikanız varsa bunun yerine sertifikayı yükleyebilirsiniz.

  3. APN bildirimleri bir cihazda 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 yapılandırmanızı 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ızın bölümünde bulabilirsiniz. Diğer alanları boş bırakın.

      Tamamlandığında, yapılandırmanız aşağıdakine benzer görünmelidir (ancak uygulamanıza özel değerlerle):

      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 belirtecini otomatik olarak almak, Firebase'in uygulamanıza gönderdiği sessiz anında iletme bildirimlerini 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.

    Swizzling'i kullanmamayı tercih ederseniz Firebase SDK kimlik doğrulama belgelerinde Ek: Swizzling olmadan telefonla oturum açmayı kullanma bölümüne bakın.

Kayıt olmak

FirebaseUI oturum açma akışını başlatmak için önce 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, desteklemek istediğiniz oturum açma yöntemlerini kullanmak için FirebaseUI'yi 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 oturum açmayı etkinleştirdiyseniz, Google ve Facebook kayıt 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 bir AuthViewController örneği alın. Ardından, onu 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, tüm sosyal kimlik sağlayıcılarının yanı sıra Firebase Authentication oturumunu kapatmak için kolaylık sağlayan yöntemler sunar:

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 bulur ve yayınlarsanız ve bunu bildirmek isterseniz GitHub sorun izleyiciyi kullanın.