FirebaseUI で iOS アプリに簡単にログインを追加する

FirebaseUI は Firebase Authentication SDK の上に構築されるライブラリで、アプリで使用するドロップイン UI フローを提供します。FirebaseUI には次の利点があります。

  • 複数プロバイダ対応: メール、電話認証、Google ログイン、Facebook ログイン、および Twitter ログインが使用できます。
  • アカウント管理: アカウントの作成、パスワードのリセットなどのアカウント管理タスクを処理できます。
  • アカウントのリンク: ID プロバイダ間でユーザー アカウントを安全にリンクできます。
  • カスタマイズ可能: FirebaseUI の外観はアプリに合わせてカスタマイズできます。FirebaseUI はオープンソースであるため、必要に応じてプロジェクトをフォークしてカスタマイズすることもできます。

準備

  1. Firebase を iOS プロジェクトに追加します

  2. FirebaseUI を Podfile に追加します。

    pod 'FirebaseUI'
    

    Auth コンポーネントと必要なプロバイダのみを追加することもできます。

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/Twitter'
    pod 'FirebaseUI/Phone'
    
  3. アプリを Firebase プロジェクトに接続していない場合は、Firebase コンソールで接続します。

ログイン方法を設定する

Firebase を使用してログインできるようにするには、サポートするログイン方法を事前に有効にして設定しておく必要があります。

メールアドレスとパスワード

Firebase コンソールで [Authentication] セクションを開き、メールとパスワードによる認証を有効にします。

Google

  1. Firebase コンソールで [Authentication] セクションを開き、Google ログインを有効にします。

  2. 反転クライアント ID を Xcode プロジェクトの URL スキームとして追加します。この値は、GoogleService-Info.plist ファイルにあります。

Facebook

  1. Firebase コンソールで [Authentication] セクションを開き、Facebook を有効にします。Facebook ログインを有効にするには、Facebook Developers のコンソールで入手できる Facebook の App ID と App Secret を提供する必要があります。

  2. [Project Settings] > [Capabilities] 画面で、Xcode プロジェクトのキーチェーン共有を有効にします。

  3. Xcode プロジェクトに fbFACEBOOK_APP_ID を URL スキームとして追加します。

  4. Facebook のアプリ ID と表示名を Info.plist ファイルに追加します。

    キー
    FacebookAppID fbFACEBOOK_APP_ID(例: fb1234567890
    FacebookDisplayName アプリの名前

Twitter

  1. Firebase コンソールで [Authentication] セクションを開き、Twitter を有効にします。Twitter ログインを有効にするには、Twitter Application Management のコンソールから取得できる Twitter API コンシューマ キーとシークレットを提供する必要があります。

  2. Xcode プロジェクトに twitterkit-TWITTER_CONSUMER_KEY を URL スキームとして追加します。

  3. アプリのデリゲートで、Twitter コンシューマ キーとコンシューマ シークレットを使用して Twitter Kit を初期化します。

    Swift

    func application(_ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
      Twitter.sharedInstance().start(withConsumerKey:"TWITTER_CONSUMER_KEY",
                                      consumerSecret:"TWITTER_CONSUMER_SECRET")
      return true
    }
    

    Objective-C

              - (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        [[Twitter sharedInstance] startWithConsumerKey:@"TWITTER_CONSUMER_KEY"
                                        consumerSecret:@"TWITTER_CONSUMER_SECRET"];
    }
    

電話番号

  1. Firebase コンソールで [Authentication] セクションを開き、電話番号ログインを有効にします。

  2. 電話番号ログイン リクエストがこのアプリから送信されていることを Firebase で確認する必要があります。その方法の 1 つとして、APNs 通知を使用できます。詳細については、アプリの確認を有効にする方法についての記事をご覧ください。

    Firebase Authentication で APNs 通知を有効にするには:

    1. Xcode で、プロジェクトのプッシュ通知を有効にします

    2. APNs 認証キーを Firebase にアップロードします。APNs 認証キーがない場合は、FCM での APNs の構成に関する説明をご覧ください。

      1. Firebase コンソールのプロジェクト内で歯車アイコンを選択し、[プロジェクトの設定]、[クラウド メッセージング] タブの順に選択します。

      2. [iOS アプリの設定] の下の [APNs 認証キー] で [アップロード] ボタンをクリックします。

      3. キーが保存されている場所に移動し、キーを選択して [開く] をクリックします。キーのキー ID(Apple Developer Member Center の [Certificates, Identifiers & Profiles] で確認できます)を追加し、[アップロード] をクリックします。

      APNs 証明書がある場合は、代わりに証明書をアップロードできます。

  3. APNs 通知を端末で受信できない場合、Firebase は reCAPTCHA を使用してリクエストを確認します。

    reCAPTCHA 検証を有効にするにあたり、反転クライアント ID を URL スキームとして追加(たとえば、Google ログインを有効にするため)していない場合は、Xcode プロジェクトで追加してください。この値は、GoogleService-Info.plist ファイルにあります。

  4. オプション: Firebase は、メソッドの実装入れ替えを使用してアプリの APNs トークンの自動取得、Firebase がアプリに送信するサイレント プッシュ通知の処理、検証中に reCAPTCHA 検証ページからリダイレクトされるカスタム スキームの自動インターセプトを行います。

    実装入れ替えを使用しない場合は、Firebase SDK 認証ドキュメントの、実装入れ替えをしないで電話番号ログインを使用する方法に関する付録記事をご覧ください。

ログイン

FirebaseUI ログインフローを開始するには、まず FirebaseUI を初期化します。

Swift

import FirebaseUI

/* ... */

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

Objective-C

@import FirebaseUI;

...

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

次に、サポートするログイン方法を使用するように FirebaseUI を構成します。

Swift

import FirebaseUI

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

Objective-C

@import FirebaseUI;

...

NSArray<id<FUIAuthProvider>> *providers = @[
  [[FUIGoogleAuth alloc] init],
  [[FUIFacebookAuth alloc] init],
  [[FUITwitterAuth alloc] init],
  [[FUIPhoneAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]]
];
_authUI.providers = providers;

Google ログインまたは Facebook ログインを有効にしている場合は、Google ログインと Facebook ログインのフローの結果を処理するハンドラを実装します。

Swift

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

最後に、FUIAuth から AuthViewController のインスタンスを取得します。その後に、アプリの最初のビュー コントローラとして表示するか、またはアプリの別のビュー コントローラから表示できます。

Swift

ログイン方法のセレクタを取得するには次のようにします。

let authViewController = authUI.authViewController()

電話番号ログインのみを使用する場合は、代わりに電話番号ログインビューを直接表示できます。

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

Objective-C

ログイン方法のセレクタを取得するには次のようにします。

UINavigationController *authViewController = [authUI authViewController];

電話番号ログインのみを使用する場合は、代わりに電話番号ログインビューを直接表示できます。

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

認証ビューを表示して、ユーザーがログインした後に、結果が didSignInWithUser:error: メソッドの FirebaseUI Auth デリゲートに返されます。

Swift

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

ログアウト

FirebaseUI には、Firebase Authentication およびすべてのソーシャル ID プロバイダからログアウトするための便利なメソッドがあります。

Swift

authUI.signOut()

Objective-C

[authUI signOut];

カスタマイズ

FirebaseUI のビュー コントローラのサブクラスを作成し、FUIAuth のデリゲート メソッドにそのサブクラスを指定することでログイン画面をカスタマイズできます。

Swift

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

アカウント作成画面に表示される、アプリの利用規約の URL をカスタマイズできます。

Swift

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

Objective-C

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

最後に、カスタム バンドルを指定して、ユーザーに表示するメッセージとプロンプトをカスタマイズできます。

Swift

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

Objective-C

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

次のステップ

  • FirebaseUI の使用とカスタマイズの詳細については、GitHub の README ファイルをご覧ください。
  • FirebaseUI で問題が見つかった場合は、GitHub 公開バグトラッカーで報告してください。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。